四.JSON 和 JSONP
如果在同一个域下,$.ajax()方法只要设置 dataType 属性即可加载 JSON 文件。而在非 同域下,可以使用 JSONP,但也是有条件的。
//$.ajax()加载 JSON 文件
$.ajax({
type:'POST',
url:'test.json',
dataType:'json',
success:function(response,status,xhr){
alert(response[0].url);
}
});
如果想跨域操作文件的话,我们就必须使用 JSONP。JSONP(JSONwithPadding)是一个 非官方的协议,它允许在服务器端集成 Scripttags 返回至客户端,通过 javascriptcallback 的 形式实现跨域访问(这仅仅是 JSONP 简单的实现形式)。
//跨域的 PHP 端文件
<?php
$arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
$result=json_encode($arr);
$callback=$_GET['callback'];
echo$callback."($result)";
?>
//$.getJSON()方法跨域获取 JSON
$.getJSON('http://www.li.cc/test.php?callback=?',function(response){ console.log(response);});
//$.ajax()方法跨域获取 JSON
$.ajax({
url:'http://www.li.cc/test.php?callback=?',
dataType:'jsonp',
success:function(response,status,xhr){
console.log(response);
alert(response.a);
}
});
五.jqXHR 对象
在之前,我们使用了局部方法:.success()、.complete()和.error()。这三个局部方法并不 是 XMLHttpRequest 对象调用的,而是$.ajax()之类的全局方法返回的对象调用的。这个对象, 就是 jqXHR 对象,它是原生对象 XHR 的一个超集。
//获取 jqXHR 对象,查看属性和方法
varjqXHR=$.ajax({
type:'POST',
url:'test.php',
data:$('form').serialize()
}); for(variinjqXHR){
document.write(i+'<br/>');
}
注意:如果使用 jqXHR 对象的话,那么建议用.done()、.always()和.fail()代 替.success()、.complete()和.error()。以为在未来版本中,很可能将这三种方法废弃取消。
//成功后回调函数
jqXHR.done(function(response){
$('#box').html(response);
});
使用 jqXHR 的连缀方式比$.ajax()的属性方式有三大好处:
1.可连缀操作,可读性大大提高;
2.可以多次执行同一个回调函数;
3.为多个操作指定回调函数;
//同时执行多个成功后的回调函数
jqXHR.done().done();
//多个操作指定回调函数
varjqXHR=$.ajax('test.php');
varjqXHR2 =$.ajax('test2.php');
$.when(jqXHR,jqXHR2).done(function(r1,r2){
alert(r1[0]);
alert(r2[0]);
});
注意:以上教程均来源于北风网,学习ing