AJAX

Posted 财经知识狂魔

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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

以上是关于AJAX的主要内容，如果未能解决你的问题，请参考以下文章

Javascript代码片段在drupal中不起作用

前端面试题之手写promise

Ajax 片段元标记 - Googlebot 未读取页面内容

执行AJAX返回HTML片段中的JavaScript脚本

javascript AJAX片段

Spring MVC 3.2 Thymeleaf Ajax 片段