第20天，Ajax

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。现在基本都用JSON进行交换数据。

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

Ajax的优点：

• AJAX使用Javascript技术向服务器发送异步请求；
• AJAX无须刷新整个页面；
• 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；

jQuery实现的Ajax

点击参考

回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

• beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数
• error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）。
• dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
• success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
• complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

数据类型

通过dataType选项可以指定其他不同数据处理方式。常用的有json、jsonp、和XML。注意，JSONP是JSON格式的扩展。他要求一些服务器端的代码来检测并处理查询字符串参数。

发送数据到服务器

默认情况下，Ajax请求使用GET方法。如果要使用POST方法，可以设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。

data选项既可以包含一个查询字符串，比如 key1=value1&key2=value2 ，也可以是一个映射，比如 {key1: 'value1', key2: 'value2'} 。如果使用了后者的形式，则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置processData选项为false来回避。如果我们希望发送一个XML对象给服务器时，这种处理可能并不合适。并且在这种情况下，我们也应当改变contentType选项的值，用其他合适的MIME类型来取代默认的 application/x-www-form-urlencoded 。

语法

$.ajax(url,[settings])

参数：

• url : 一个用来包含发送请求的URL字符串；
• settings : Ajax请求设置，所有选项都是可选的。

settings常用选项：

• url : 发送请求的地址。（String)
• type ： (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。（String）
• data : 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。(Object,String)。
• dataType：预期服务器返回的数据类型。"json": 返回 JSON 数据 。回调函数中就可以直接使用JSON数据，而不需要先通过JSON.parse()解析。
• success(data, textStatus, jqXHR)：请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。
• error：请求失败时调用此函数。

示例1：

<script>
      //$.ajax的两种使用方式:

      //$.ajax(settings);
      //$.ajax(url,[settings]);


       $(".send_Ajax").click(function(){

           $.ajax({
               url:"/handle_Ajax/",
               type:"POST",
               data:{username:"Yuan",password:123},

               success:function(data){
                   alert(data)
               },

                 //=================== error============

                error: function (jqXHR, textStatus, err) {

                        // jqXHR: jQuery增强的xhr
                        // textStatus: 请求完成状态
                        // err: 底层通过throw抛出的异常对象，值与错误类型有关
                        console.log(arguments);
                    },

                 //=================== complete============

                complete: function (jqXHR, textStatus) {
                    // jqXHR: jQuery增强的xhr
                    // textStatus: 请求完成状态 success | error
                    console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);
                    console.log('textStatus: %s', textStatus);
                },

                //=================== statusCode============
                statusCode: {
                    '403': function (jqXHR, textStatus, err) {
                        console.log(arguments);  //注意：后端模拟errror方式：HttpResponse.status_code=500
                     },

                    '400': function () {
                    }
                }

           })

       })

</script>
           

示例2：

$.ajax('register.html',{
                        type: 'post',
                        data: $("#f1").serialize(),
                        success: function(response_data){
                            var flag=JSON.parse(response_data);
                            if (flag['stat']){
                                location.href='/registsuccess/?username='+flag["username"]
                            }
                        }
                    });
           

$("#f1").serialize() : f1是form标签的id，serialize()会自动收集form表单中的数据，并组成类似“user=alex&pwd=123”这样的字符串。

response_data : 回调函数中的参数，这是服务器返回的数据，如果设置了dataType，则返回的数据就是dataType设置的数据类型。假如设置dataType:"json"，那么回传的数据会经过jQuery内部处理成json格式的数据，可以直接使用，而不再需要通过JSON.parse(data)处理了。

jquery ajax 中 $(this) 不起作用的解决方法

第一种解决办法

，在回调函数外部先将$(this)赋值给一个变量：_this=$(this)，然后在ajax的回调函数中直接使用_this操作当前标签。

第二种解决办法

，如果一定要在ajax的回调函数中使用$(this)操作当前标签，那就需要用bind(this)绑定this到回调函数。如：success: function(){ ... }.bind(this)