AJAX

  • 局部刷新,减少请求中发送的数据

  • 执行过程:
  1. 使用JavaScript语言以及相关浏览器提供类库的功能,向服务端发送请求

  2. 当服务端处理完请求之后,自动执行某个JavaScript的回调函数

  • 请求和响应的整个过程是偷偷进行的,页面无任何感知

  • 利用AJAX可以做:

  1. 注册时,输入用户名自动检测用户名是否已经存在
  2. 登陆时,提示用户名密码错误
  3. 删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除
  • 所以说AJAX的主战场是在前端

 

伪AJAX

首先来看一下一种用iframe标签模拟ajax请求

  • 利用iframe标签的src属性链接网站实现局部刷新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <p>请输入要加载的地址:<span id="current_time"></span></p>
        <p>
            <input id="url" type="text"/>
            <input type="button" value="刷新" onclick="LoadPage();"/>
        </p>
    </div>

    <div>
        <h3>加载页面位置:</h3>
        <iframe id="iframePosition" style="width:100%;height:500px;"></iframe>
    </div>

    <script type="text/javascript">
        window.onload = function(){
            var myDate = new Date();
            document.getElementById("current_time").innerText = myDate.getTime();
        };
        function LoadPage(){
            var targetUrl = document.getElementById("url").value;
            document.getElementById("iframePosition").src = targetUrl;
        }
    </script>
</body>
</html>

 

原生AJAX

  如今使用ajax其实就是使用浏览器(除了老旧的IE6,IE5)的XMLHttpRequest对象来完成

XmlHttpRequest对象的主要方法:

a. void open(String method,String url,Boolen async)
   用于创建请求
    
   参数:
       method: 请求方式(字符串类型),如:POST、GET、DELETE...
       url:    要请求的地址(字符串类型)
       async:  是否异步(布尔类型)
 
b. void send(String body)
    用于发送请求
 
    参数:
        body: 要发送的数据(字符串类型)
 
c. void setRequestHeader(String header,String value)
    用于设置请求头
 
    参数:
        header: 请求头的key(字符串类型)
        vlaue:  请求头的value(字符串类型)
 
d. String getAllResponseHeaders()
    获取所有响应头
 
    返回值:
        响应头数据(字符串类型)
 
e. String getResponseHeader(String header)
    获取响应头中指定header的值
 
    参数:
        header: 响应头的key(字符串类型)
 
    返回值:
        响应头中指定的header对应的值
 
f. void abort()
 
    终止请求

 XmlHttpRequest对象的主要属性:

a. Number readyState
   状态值(整数)
 
   详细:
      0-未初始化,尚未调用open()方法;
      1-启动,调用了open()方法,未调用send()方法;
      2-发送,已经调用了send()方法,未接收到响应;
      3-接收,已经接收到部分响应数据;
      4-完成,已经接收到全部响应数据;
 
b. Function onreadystatechange
   当readyState的值改变时自动触发执行其对应的函数(回调函数)
 
c. String responseText
   服务器返回的数据(字符串类型)
 
d. XmlDocument responseXML
   服务器返回的数据(Xml对象)
 
e. Number states
   状态码(整数),如:200、404...
 
f. String statesText
   状态文本(字符串),如:OK、NotFound...

 执行四步走:

  • 创建XMLHttpRequest对象

  • 定义回调函数(onreadystatechange和readyState=4)

  • 指定发送请求的方法和连接地址(post方式还要设置请求头)

  • 发送请求(send)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <h1>XMLHttpRequest - Ajax请求</h1>
    <input type="button" onclick="XmlGetRequest();" value="Get发送请求" />
    <input type="button" onclick="XmlPostRequest();" value="Post发送请求" />

    <script src="/statics/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        //用户创建XMLHttpRequest对象
        function GetXHR(){
            var xhr = null;
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;

        }

        function XhrPostRequest(){
            var xhr = GetXHR();
            // 定义回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已经接收到全部响应数据,执行以下操作
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定连接方式和地址----文件方式
            xhr.open('POST', "/test/", true);
            // 设置请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
            // 发送请求
            xhr.send('n1=1;n2=2;');
        }

        function XhrGetRequest(){
            var xhr = GetXHR();
            // 定义回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已经接收到全部响应数据,执行以下操作
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定连接方式和地址----文件方式
            xhr.open('get', "/test/", true);
            // 发送请求
            xhr.send();
        }

    </script>

</body>
</html>

 

jQuery AJAX

  • jQuery 不是生产者,而是大自然搬运工
  • jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject
            jQuery.ajax(...)

                部分参数:

                        url:请求地址
                       type:请求方式,GET、POST(1.9.0之后用method)
                    headers:请求头
                       data:要发送的数据
                contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
                      async:是否异步
                    timeout:设置请求超时时间(毫秒)

                 beforeSend:发送请求前执行的函数(全局)
                   complete:完成之后执行的回调函数(全局)
                    success:成功之后执行的回调函数(全局)
                      error:失败之后执行的回调函数(全局)
                

                    accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型
                   dataType:将服务器端返回的数据转换成指定类型
                                   "xml": 将服务器端返回的内容转换成xml格式
                                  "text": 将服务器端返回的内容转换成普通文本格式
                                  "html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。
                                "script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式
                                  "json": 将服务器端返回的内容转换成相应的JavaScript对象
                                 "jsonp": JSONP 格式
                                          使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数
View Code

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <p>
        <input type="button" onclick="XmlSendRequest();" value='Ajax请求' />
    </p>


    <script type="text/javascript" src="/statics/jquery-1.8.2.js"></script>
    <script>

        function XmlSendRequest(){
            $.ajax({
                url: "/index",
                type: 'POST',
                data:{"k1":"vl"},
                dataType: 'text',
                success: function(data){
                    console.log(data);
                }
            })
        }

    </script>
</body>
</html>

 

跨域AJAX

  由于浏览器存在同源策略机制,本域脚本只能读写本域内的资源,而无法访问其它域的资源,请求的发送和响应是可以进行的,但是浏览器不接受而已,但是浏览器同源策略并不是对所有的请求均制约。

  • 制约:XMLHttpRequest

  • 不制约:img、iframe、script等具有src属性的标签

  实现跨域请求有两种方法,jsonp和cors(跨域资源共享)

  1、JSONP实现跨域请求

  • jsonp的原理是利用script标签的src实现跨域,不足--只能发送get请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="Ajax" onclick="DoAjax();">
    <input type="button" value="JsonpAjax" onclick="JsonpAjax();">
    <script src="/statics/jquery-1.12.4.js"></script>
    <script>
 
        function func(arg) {
            console.log(arg)
        }
        function DoAjax() {
            $.ajax({
                url: 'http://w2.com:8002/index',
                type: 'POST',
                data: {'k1': 'v1'},
                success:function (arg) {
                    console.log(arg)
                }
            });
        }
 
        function JsonpAjax() {
 
//            var tag = document.createElement("script");
//            tag.src = 'http://w2.com:8002/index?callback=func';
//            document.head.appendChild(tag);
//            document.head.removeChild(tag);
 
            $.ajax({
                url:'http://w2.com:8002/index',
                dataType: 'jsonp',
                jsonp: 'callback',
                jsonpCallBack: 'func'
            })
        }
    </script>
</body>
</html>
 
w1下面的index用来请求w2
View Code
import tornado.web
import tornado.ioloop
 
 
class IndexHandler(tornado.web.RequestHandler):
    def get(self):
        func = self.get_argument('callback')
        self.write('%s([11,22])' % func)
 
    def post(self, *args, **kwargs):
        self.write('w2.post')
 
 
settings = {
    'template_path': 'views',
    'static_path': 'statics',
    "static_url_prefix": '/statics/',
}
 
application = tornado.web.Application([
    (r'/index', IndexHandler),
 
], **settings)
 
if __name__ == '__main__':
    application.listen(8002)
    tornado.ioloop.IOLoop.instance().start()
 
w2下面的start文件
View Code
import tornado.web
import tornado.ioloop
 
 
class IndexHandler(tornado.web.RequestHandler):
    def get(self):
        self.render('index.html')
 
    def post(self, *args, **kwargs):
        self.write('w1.post')
 
 
settings = {
    'template_path': 'views',
    'static_path': 'statics',
    "static_url_prefix": '/statics/',
}
 
application = tornado.web.Application([
    (r'/index', IndexHandler),
 
], **settings)
 
if __name__ == '__main__':
    application.listen(8001)
    tornado.ioloop.IOLoop.instance().start()
 
w1下的start文件
View Code

  2、CORS(跨域资源共享)

  • 本质:主动设置浏览器的请求头,使得浏览器允许跨域请求

  • 去请求的域不用修改,只需被请求的域进行修改

  • 不足:版本太低的浏览器不支持

说cors之前,先要分清楚什么是简单请求和复杂请求。

条件:

    1、请求方式:HEAD、GET、POST
    2、请求头信息:
        Accept
        Accept-Language
        Content-Language
        Last-Event-ID
        Content-Type 对应的值是以下三个中的任意一个
                                application/x-www-form-urlencoded
                                multipart/form-data
                                text/plain
 
注意:同时满足以上两个条件时,则是简单请求,否则为复杂请求

简单请求: 一次请求

非简单请求:两次请求,在发送数据之前会先发一次请求用于做“预检”,
      只有“预检”通过后才再发送一次请求用于数据传输。

1、简单请求

简单请求由于没有预检,所以比较简单,只需要在被请求的一方设置响应头 Access-Control-Allow-Origin,value为请求响应的域名,如果写上一个*的话,代表所有的域都可以来这里请求。

2、非简单请求

  • “预检”请求时,允许请求方式则需服务器设置响应头:Access-Control-Request-Method
  • “预检”请求时,允许请求头则需服务器设置响应头:Access-Control-Request-Headers
  • “预检”缓存时间,服务器设置响应头:Access-Control-Max-Age 设置完成后再该时间里只需通过一次预检
  • 默认获取到的所有响应头只有基本信息,如果想要获取自定义的响应头,则需要再服务器端设置Access-Control-Expose-Headers。

此外在跨域请求中,默认情况下,HTTP Authentication信息,Cookie头以及用户的SSL证书无论在预检请求中或是在实际请求都是不会被发送。

如果想要发送:

  • 浏览器端:XMLHttpRequest的withCredentials为true
  • 服务器端:Access-Control-Allow-Credentials为true
  • 注意:此时服务器端响应的 Access-Control-Allow-Origin 不能是通配符 *

下面来看一下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input  type="button" value="Ajax" onclick="DoAjax();"/>
    <input  type="button" value="DoAjaxComplex" onclick="DoAjaxComplex();"/>
 
    <script src="/statics/jquery-1.12.4.js"></script>
    <script>
 
        function DoAjax() {
            $.ajax({
                url: 'http://w2.com:8002/cors',
                type: 'POST',
                data: {'k1': 'v1'},
                success: function (arg) {
                    console.log(arg);
                }
                 
            });
        }
        function DoAjaxComplex() {
            $.ajax({
                url: 'http://w2.com:8002/cors',
                type: 'PUT',
                headers: {'h1': 'xxoo'},
                data: {'k1': 'v1'},
                xhrFields:{withCredentials: true},
                success: function (arg) {
                    console.log(arg);
                }
 
            });
        }
 
    </script>
</body>
</html>
 
w1下的html文件
View Code
import tornado.web
import tornado.ioloop
 
 
class IndexHandler(tornado.web.RequestHandler):
    def get(self):
        func = self.get_argument('callback')
        self.write('%s([11,22])' % func)
 
    def post(self, *args, **kwargs):
        self.write('w2.post')
 
class CorsHandler(tornado.web.RequestHandler):
    def get(self):
        self.write('{"status": 1, "message": "get"}')
 
    def post(self, *args, **kwargs):
        self.set_header('Access-Control-Allow-Origin', "*")
        self.write('{"status": 1, "message": "post"}')
 
    def options(self, *args, **kwargs):
        # 允许put方法来
        # self.set_header('Access-Control-Allow-Origin', "*")
        self.set_header('Access-Control-Allow-Origin', "http://w1.com:8001")
        self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
        self.set_header('Access-Control-Allow-Headers', "h1,h2")
        self.set_header('Access-Control-Allow-Credentials', "true")
        self.set_header('Access-Control-Max-Age', 10)
 
    def put(self, *args, **kwargs):
        print(self.cookies)
        self.set_cookie('k1', 'kkk')
        self.set_header('Access-Control-Allow-Origin', "http://w1.com:8001")
        self.set_header('Access-Control-Allow-Credentials', "true")
 
        self.set_header('xxoo', "seven")
        self.set_header('bili', "daobidao")
        self.set_header('Access-Control-Expose-Headers', "xxoo,bili")
 
        self.write('ok')
 
settings = {
    'template_path': 'views',
    'static_path': 'statics',
    "static_url_prefix": '/statics/',
}
 
application = tornado.web.Application([
    (r'/index', IndexHandler),
    (r'/cors', CorsHandler),
 
], **settings)
 
if __name__ == '__main__':
    application.listen(8002)
    tornado.ioloop.IOLoop.instance().start()
 
w2的start文件 
View Code

 

骚师博客:http://www.cnblogs.com/wupeiqi/articles/5703697.html

posted @ 2016-08-31 17:18  财经知识狂魔  阅读(225)  评论(0编辑  收藏  举报