[jQuery知识]jQuery之知识十四-Ajax高级进阶

前言

1.JSON 和 JSONP
2.jqXHR 对象

一.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(JSON with Padding)是一个 非官方的协议，它允许在服务器端集成 Script tags 返回至客户端，通过 javascript callback 的 形式实现跨域访问(这仅仅是 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 对象，查看属性和方法 
var jqXHR = $.ajax({
type : 'POST',
url : 'test.php',
data : $('form').serialize()
});
for (var i in jqXHR) { 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();
//多个操作指定回调函数
var jqXHR = $.ajax('test.php'); var jqXHR2 = $.ajax('test2.php');
$.when(jqXHR, jqXHR2).done(function (r1,r2) { alert(r1[0]);
alert(r2[0]); });

继续看下一章[jQuery知识]jQuery之知识体系