第一百七十四節，jQuery，Ajax進階

標籤：操作   strong   非同步   timeout   關閉   false   取消   query   檔案   

jQuery，Ajax進階

 

學習要點：

　　1.載入請求

　　2.錯誤處理

　　3.請求全域事件

　　4.JSON 和 JSONP

　　5.jqXHR 對象

 

在 Ajax 課程中，我們瞭解了最基本的非同步處理方式。本章，我們將瞭解一下 Ajax 的 一些全域請求事件、跨域處理和其他一些問題。

 

一．載入請求

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

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

ajaxStart()方法，請求開始時（未完成其他請求）啟用.ajaxStart()，在document上使用，參數是匿名函數，可以在函數裡做請求時的提示和操作

ajaxStop()方法，請求結束時（所有請求都結束了）啟用.ajaxStop()，在document上使用，參數是匿名函數，可以在函數裡做請求結束的提示和操作

    //ajax請求    $(‘form input[type=button]‘).click(function () {        $.ajax({            type: ‘POST‘,            url: ‘http://www.test.php‘,            data: $(‘form‘).serialize(),            success: function (response, status, xhr) {                $(‘#box‘).html(response);            }        });    });    //監測ajax請求    $(document).ajaxStart(function () {  //未完成請求時        $(‘span‘).show();  //顯示正在請求，請稍等    }).ajaxStop(function () {  //請求結束時        $(‘span‘).hide();  //隱藏請求提示元素    });

 

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

    //ajax請求    $(‘form input[type=button]‘).click(function () {        $.ajax({            type: ‘POST‘,            url: ‘http://www.test.php‘,            data: $(‘form‘).serialize(),            success: function (response, status, xhr) {                $(‘#box‘).html(response);            },            timeout : 500  //如果請求時間太長，可以設定逾時        });    });    //監測ajax請求    $(document).ajaxStart(function () {  //未完成請求時        $(‘span‘).show();  //顯示正在請求，請稍等    }).ajaxStop(function () {  //請求結束時        $(‘span‘).hide();  //隱藏請求提示元素    });

 

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

    //ajax請求    $(‘form input[type=button]‘).click(function () {        $.ajax({            type: ‘POST‘,            url: ‘http://www.test.php‘,            data: $(‘form‘).serialize(),            success: function (response, status, xhr) {                $(‘#box‘).html(response);            },            global : false  //如果某個 ajax 不想觸發全域事件，可以設定取消        });    });    //監測ajax請求    //global : false了就不會觸發這兩個事件了，這裡就不起作用了    $(document).ajaxStart(function () {  //未完成請求時        $(‘span‘).show();  //顯示正在請求，請稍等    }).ajaxStop(function () {  //請求結束時        $(‘span‘).hide();  //隱藏請求提示元素    });

 

二．錯誤處理

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

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

$.ajax()使用屬性提示錯誤,error : function () {}。

 

第一百七十四節，jQuery，Ajax進階