jQuery中Ajax的JSONP和jqXHR对象
JSON 和JSONP:如果在同一个域下,$.ajax()方法只要设置 dataType属性即可加载 JSON 文件。而在非同域下,可以使用 JSONP,但也是有条件的。
$.ajax({ //$.ajax()加载 JSON 文件
url : 'test.json',
success : function (response, status, xhr) {alert(response[0].url);}
});
如果想跨域操作文件的话,我们就必须使用JSONP。JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成 Script tags 返回至客户端,通过 javascript callback的形式实现跨域访问(这仅仅是JSONP 简单的实现形式) 。
$.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 对象,查看属性和方法
var jqXHR = $.ajax({
type : 'POST',
url : 'test.php',
data : $('form').serialize()
});
for (var i in jqXHR) {document.write(i + '
');}
如果使用jqXHR 对象的话,那么建议用.done()、.always()和.fail()代替.success()、.complete()和.error()。在未来版本中,很可能将这三种方法废弃取消。
jqXHR.done(function (response) {$('#box').html(response);});//成功后回调函数
使用 jqXHR的连缀方式比$.ajax()的属性方式有三大好处:
1.可连缀操作,可读性大大提高;
2.可以多次执行同一个回调函数;
3.为多个操作指定回调函数;
jqXHR.done().done();//同时执行多个成功后的回调函数
多个操作指定回调函数:
var jqXHR = $.ajax('test.php');
var jqXHR2 = $.ajax('test2.php');
$.when(jqXHR, jqXHR2).done(function (r1,r2) {alert(r1[0]);alert(r2[0]);});