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

1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8

如果想跨網域作業檔案的話，我們就必須使用 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); }});

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 二.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 />');}

1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8

注意:如果使用 jqXHR 對象的話，那麼建議用.done()、.always()和.fail()代 替.success()、.complete()和.error()。以為在未來版本中，很可能將這三種方法廢棄取消。

//成功後回呼函數 jqXHR.done(function (response) {$('#box').html(response); });

1 2 3 1 2 3

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