第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)
