jQuery基礎---Ajax進階

内容提綱：

1.加載請求

2.錯誤處理

3.請求全局事件

4.JSON 和 JSONP

5.jqXHR 對象

發文不易，轉載請注明出處！

在 Ajax 基礎一篇中，我們了解了最基本的異步處理方式。本篇來了解一下 Ajax 的一些全局請求事件、跨域處理和其他一些問題。

一．加載請求

在 Ajax 異步發送請求時，遇到網速較慢的情況，就會出現請求時間較長的問題。而超過一定時間的請求， 使用者就會變得不再耐煩而關閉頁面。 而如果在請求期間能給使用者一些提示，比如：“正在努力加載中...”，那麼相同的請求時間會讓使用者體驗更加的好一些。

jQuery 提供了兩個全局事件，.ajaxStart()和.ajaxStop()。這兩個全局事件，隻要使用者觸發了 Ajax，請求開始時（未完成其他請求）激活.ajaxStart()，請求結束時（所有請求都結束了）激活.ajaxStop()。

//請求加載提示的顯示和隐藏

$('.loading').ajaxStart(function () {

　　$(this).show();

　　}).ajaxStop(function () {

　　$(this).hide();

});

PS：以上代碼在 jQuery1.8 及以後的版本不再有效，需要引入jquery-migrate 向下相容檔案才能運作。新版本中，必須綁定在 document 元素上。

$(document).ajaxStart(function () {

　　$('.loading').show();

　　$('.loading').hide();

//如果請求時間太長，可以設定逾時

$.ajax({

　　timeout : 500

//如果某個 ajax 不想觸發全局事件，可以設定global取消

　　global : false

二．錯誤處理

Ajax 異步送出時，不可能所有情況都是成功完成的，也有因為代碼異步檔案錯誤、網絡錯誤導緻送出失敗的。這時，我們應該把錯誤報告出來，提醒使用者重新送出或提示開發者進行修補。

在之前高層封裝中是沒有回調錯誤處理的，比如$.get()、$.post()和.load()。是以，早期的方法通過全局的 .ajaxError()事件方法來傳回錯誤資訊。而在 jQuery1.5 之後，可以通過連綴處理使用局部.error()方法即可。而對于$.ajax()方法，不但可以用這兩種方法，還有自己的屬性方法 error : function () {}。

//$.ajax()使用屬性方法提示錯誤

//$.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, info) {   //event為事件對象

　　alert(settings+ ':' + info);

三．請求全局事件

jQuery 對于 Ajax 操作提供了很多全局事件方法，.ajaxStart()、.ajaxStop()、.ajaxError()等事件方法。他們都屬于請求時觸發的全局事件，除了這些，還有一些其他的全局事件：

.ajaxSuccess()，對應一個局部方法：.success()，請求成功完成時執行。

.ajaxComplete()，對應一個局部方法：.complete()，請求完成後注冊一個回調函數。

.ajaxSend()，沒有對應的局部方法，隻有屬性 beforeSend，請求發送之前要綁定的函數。

//$.post()使用局部方法.success()

//$.post()使用全局事件方法.ajaxSuccess()

$(document).ajaxSuccess(function (event, xhr, settings) {

　　alert(xhr.responseText);

PS：全局事件方法是所有 Ajax 請求都會觸發到，并且隻能綁定在 document 上。而局部方法，則針對某個 Ajax。

對于一些全局事件方法的參數，大部分為對象，而這些對象有哪些屬性或方法能調用，可以通過周遊方法得到。

//周遊 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) {

//$.post()請求發送之前的全局方法.ajaxSend()

$(document).ajaxSend(function (event, xhr, settings) {

　　alert('發送請求之前');

//$.ajax()方法（參加ajax基礎篇中此方法的參數），可以直接通過屬性設定即可。

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

四．JSON 和 JSONP

如果在同一個域下，$.ajax()方法隻要設定 dataType 屬性即可加載 JSON 檔案。而在非同域下，可以使用 JSONP，但也是有條件的。

//同一個域下$.ajax()加載 JSON 檔案

如果想跨域操作檔案的話，我們就必須使用 JSONP。JSONP(JSON with Padding)是一個非官方的協定，它允許在伺服器端內建 Script tags 傳回至用戶端，通過 javascript callback 的形式實作跨域通路（這僅僅是 JSONP 簡單的實作形式） 。

//跨域的 PHP 端檔案

//$.getJSON()方法跨域擷取 JSON

$.getJSON('http://www.li.cc/test.php?callback=?', function (response) {

　　console.log(response);

//$.ajax()方法跨域擷取 JSON

五．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 />');

}

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

//成功後回調函數

使用 jqXHR 的連綴方式比$.ajax()的屬性方式有三大好處：

1.可連綴操作，可讀性大大提高；

2.可以多次執行同一個回調函數；

3.為多個操作指定回調函數；

//同時執行多個成功後的回調函數

jqXHR.done().done();

//多個操作指定回調函數

test1.php檔案:

<?php

         echo 'test1.php'

?>

test2.php檔案:

         echo 'test2.php'

var jqXHR1 = $.ajax('test1.php');

var jqXHR2 = $.ajax('test2.php');

//使用when方法同時處理多個，不需要每個都單獨書寫了！

$.when(jqXHR1, jqXHR2).done(function (r1,r2) {

alert(r1[0]);   //可以列印下r1看看結果

alert(r2[0]);

 For my Lover, C!

Thank you, MR. Lee !