20151211Jquery Ajax进阶学习笔记

四．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