學習要點：

• 1.加載請求
• 2.錯誤處理
• 3.請求全局事件
• 4.JSON 和 JSONP
• 5.jqXHR 對象

一．加載請求

在 Ajax 異步發送請求時，遇到網速較慢的情況，就會出現請求時間較長的問題。而超過一定時間的請求，用戶就會變得不再耐煩而關閉頁面。而如果在請求期間能給用戶一些提示，比如：正在努力加載中...，那麽相同的請求時間會讓用戶體驗更加的好一些。jQuery 提供了兩個全局事件，.ajaxStart()和.ajaxStop()。這兩個全局事件，只要用戶觸發了 Ajax，請求開始時（未完成其他請求）激活.ajaxStart()，請求結束時（所有請求都結束了）激活.ajaxStop()。

//請求加載提示的顯示和隱藏
$(‘.loading‘).ajaxStart(function () {
　　$(this).show();
}).ajaxStop(function () {
　　$(this).hide();
});

註意：以上代碼在 jQuery1.8 及以後的版本不在有效，需要使用 jquery-migrate 向下兼容才能運行。新版本中，必須綁定在 document 元素上。

$(document).ajaxStart(function () {
　　$(‘.loading‘).show();
}).ajaxStop(function () {
　　$(‘.loading‘).hide();
});
 
//如果請求時間太長，可以設置超時
$.ajax({
　　timeout : 500
});//如果某個 ajax 不想觸發全局事件，可以設置取消
$.ajax({
　　global : false
});

二．錯誤處理

Ajax 異步提交時，不可能所有情況都是成功完成的，也有因為代碼異步文件錯誤、網絡錯誤導致提交失敗的。這時，我們應該把錯誤報告出來，提醒用戶重新提交或提示開發者進行修補。在之前高層封裝中是沒有回調錯誤處理的，比如$.get()、$.post()和.load()。所以，早期的方法通過全局.ajaxError()事件方法來返回錯誤信息。而在 jQuery1.5 之後，可以通過連綴處理使用局部.error()方法即可。而對於$.ajax()方法，不但可以用這兩種方法，還有自己的屬性方法 error : function () {}。

//$.ajax()使用屬性提示錯誤
$.ajax({
　　type : ‘POST‘,
　　url : ‘test1.php‘,
　　data : $(‘form‘).serialize(),
　　success : function (response, status, xhr) {
　　　　$(‘#box‘).html(response);
　　},
　　error : function (xhr, errorText, errorStatus) {
　　　　alert(xhr.status + ‘:‘ + xhr.statusText);
　　}
});

//$.post()使用連綴.error()方法提示錯誤，連綴方法將被.fail()取代
$.post(‘test1.php‘).error(function (xhr, status, info) {
　　alert(xhr.status + ‘:‘ +xhr.statusText);
　　alert(status + ‘:‘ + info);
});
//$.post()使用全局.ajaxError()事件提示錯誤
$(document).ajaxError(function (event, xhr, settings, infoError) {
　　alert(xhr.status + ‘:‘ +xhr.statusText);
　　alert(settings+ ‘:‘ + info);
});

三．請求全局事件

jQuery 對於 Ajax 操作提供了很多全局事件方法，.ajaxStart()、.ajaxStop()、.ajaxError()等事件方法。他們都屬於請求時觸發的全局事件，除了這些，還有一些其他全局事件：.ajaxSuccess()，對應一個局部方法：.success()，請求成功完成時執行。.ajaxComplete()，對應一個局部方法：.complete()，請求完成後註冊一個回調函數。.ajaxSend()，沒有對應的局部方法，只有屬性 beforeSend，請求發送之前要綁定的函數。

//$.post()使用局部方法.success()
$.post(‘test.php‘, $(‘form‘).serialize(), function (response, status, xhr) {
　　$(‘#box‘).html(response);
}).success(function (response, status, xhr) {
　　alert(response);
});
//$.post()使用全局事件方法.ajaxSuccess()
$(document).ajaxSuccess(function (event, xhr, settings) {
　　alert(xhr.responseText);
});

註意：全局事件方法是所有 Ajax 請求都會觸發到，並且只能綁定在 document 上。而局部方法，則針對某個 Ajax。對於一些全局事件方法的參數，大部分為對象，而這些對象有哪些屬性或方法能調用，可以通過遍歷方法得到。

//遍歷 settings 對象的屬性
$(document).ajaxSuccess(function (event, xhr, settings) {
　　for (var i in settings) {
　　　　alert(i);
　　}
});

//$.post()請求完成的局部方法.complete()
$.post(‘test.php‘, $(‘form‘).serialize(), function (response, status, xhr) {
　　alert(‘成功‘);
}).complete(function (xhr,status) {
　　alert(‘完成‘);
});

//$.post()請求完成的全局方法.ajaxComplete()
$(document).ajaxComplete(function (event, xhr, settings) {
　　alert(‘完成‘);
});

//$.post()請求發送之前的全局方法.ajaxSend()
$(document).ajaxSend(function (event, xhr, settings) {
　　alert(‘發送請求之前‘);
});

//$.ajax()方法，可以直接通過屬性設置即可。
$.ajax({type : ‘POST‘,
　　url : ‘test.php‘,
　　data : $(‘form‘).serialize(),
　　success : function (response, status, xhr) {
　　　　$(‘#box‘).html(response);
　　},
　　complete : function (xhr, status) {
　　　　alert(‘完成‘ + ‘ - ‘ + xhr.responseText + ‘ - ‘ + status);
　　},
　　beforeSend : function (xhr, settings) {
　　　　alert(‘請求之前‘ + ‘ - ‘ + xhr.readyState + ‘ - ‘ + settings.url);
　　}
});

註意：在 jQuery1.5 版本以後，使用.success()、.error()和.complete()連綴的方法，可以用.done()、.fail()和.always()取代。

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

Jquery13 Ajax 進階