首页 > js学习 > js基础知识 > jQuery中Ajax的JSONP和jqXHR对象
2016
12-16

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]);});

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。