[jQuery知識]jQuery之知識十四-Ajax進階

前言

1.載入請求 
2.錯誤處理 
3.請求全域事件

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

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

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

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

1 2 3 4 5 1 2 3 4 5

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 二.錯誤處理

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

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 三.請求全域事件

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

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

注意:全域事件方法是所有 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); }});

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

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