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)