1、加载请求
jQuery提供了两种全局事件:ajaxStart()、ajaxStop()。
只要用户触发了Ajax,请求开始时(未完成其他请求)激活ajaxStart(),请求结束时激活ajaxStop()
$('.loading').ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});
若要请求时间太长。可以设置超时timeout;
若不想触发全局事件,可以设置“global”为false。
$.ajax({
timeout:500
});
$.ajax({
global:false
});
2、错误请求
(1)使用ajax,可以使用error()方法
$.ajax(function(){
error:function(xhr,errorText,errorStatus){
alert(xhr.status+':'+xhr.statusText);
}
});
(2)$.post()使用连缀的error()方法提示错误,连缀方法被fail()取代。
$.post('user.php').error(function(xhr,errorText,errorType){
alert(errorText+':'+errorType);
alert(xhr.status+':'+xhr.statusText);
});
(3)$.post()使用全局ajaxError()提示错误
$(document).ajaxError(function(event,xhr,settings,info){
for(var i in event){
document.write(i+"<br/>");
}
});
3、请求全局事件
(1)ajaxSuccess(),对应局部方法success(),请求成功完成时执行
(2)ajaxComplete(),对应complete(),请求完成后注册一个回调函数
(3)ajaxSend(),没有对应的局部方法,请求之前要绑定的函数。(只有属性beforeSend)
$(function(){
$('form input[type=button]').click(function(){
$.post('user.php',$('form').serialize());
});
$(document).ajaxSend(function(){
alert("发送请求之前!");
}).ajaxComplete(function(){
alert("请求完成后!");
}).ajaxSuccess(function(){
alert("请求成功后!");
}).ajaxError(funcion(){
alert("请求失败后!");
});
});
此外,若要在ajax()方法下执行上述这些函数,如下所示:
$.ajax({
type:'POST',
url:'user.php',
data:$('form').serialize(),
success:function(response,status,xhr){
$('#box').html(response);
},
complete:function(){
alert('请求完成后,不管成功与失败!');
},
beforeSend:function(){
alert('请求发送之前!');
},
error:function(){
alert('请求失败后!');
}
});
4、JSON和JSONP
(1)JSON
首先,以一个json文件为例,text.json
[
{
"url":"baidu.com"
}
]
若要在ajax中加载该json文件,即
$.ajax({
type:'POST',
url:'text.json',
//dataType:'html',
success:function(response,status,xhr){
//alert(response);
}
});
由于json文件默认的dataType为“json”;
若强制将其改为“html”,则在alert弹出对话框时,需要借助“response”
(2)JSONP
若想跨域进行操作文件时,就必须使用JSONP。
JSONP(JSON with Padding),它是一个非官方的协议,它允许在服务器集成Script tags返回至客户端,同时通过JavaScript callback回调函数的形式实现跨域访问。
//跨域的php端文件,即远程端的文件jsonp.php
<?php
$arr=array('a'=>1,'b'=>2,'c'=>3);
$result=json_encode($arr);
$callback=$_GET['callback'];
echo $callback"($result)";
?>
类似于上述的远程端php,需要使用jsonp文件,如下所示:
a、本地访问——“jsonp.php”
$.ajax({
type:'POST',
url:'jsonp.php', //php文件默认是html文件,得到的是json文件;
dataType:'json',
success:function(response,status,xhr){
alert(response.a);
}
});
b、远程端访问
若url对应的不是“jsonp.php”,而是“http://www.li/jsonp.php?callback=?”
若远程访问json2.php,此时不用ajax()方法,用getJSON()方法
//跨域,远程
$.getJSON("http://www.li/json.php?callback=?",function(){
alert(response.a);
console.log(response);
});
远程访问json,采用jsonp进行
(1)若dataType:'json'时,所对应的url文件必须是含有“?callback=?”的情况;
(2)若不使用“callback”回调函数时,还可以使用第二种方法,在ajax()方法中,将“dataType”设置为“jsonp”。
5、jqXHR对象
该对象是原生XMLHttpRequest的超级,包括“success()、complete()、error()”
而对于jqXHR是$.ajax()返回的对象。
//获取jqXHR对象
var jqXHR=$.ajax({
type:'POST',
url:'test.php',
data:$('form').serialize();
});
jqXHR.succss(function(){
alert(response);
});
由于success()、complete()、error()方法可能取消,同时用done()、always()、fail()三种代替。
done()表示成功后的回调函数。
jqXHR.done(function(response){
alert(response+'1');
}).done(function(response){
alert(response+'2');
});
使用jqXHR的连缀方式比$.ajax()属性方式3大好处:
(1)可连缀操作,可读性大大提高;
(2)可以多次执行同一个回调函数;
(3)为多个操作指定回调函数。
(注意:在上述案例中类似于jqXHR.done().done())