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

　　}).ajaxStop(function () {

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

});

 

//若是請求時間太長，能夠設置超時

$.ajax({

　　timeout : 500

});

 

//若是某個 ajax 不想觸發全局事件，能夠設置global取消

$.ajax({

　　global : false

});

 

二．錯誤處理

Ajax 異步提交時，不可能全部狀況都是成功完成的，也有由於代碼異步文件錯誤、網絡錯誤致使提交失敗的。這時，咱們應該把錯誤報告出來，提醒用戶從新提交或提示開發者進行修補。

 

在以前高層封裝中是沒有回調錯誤處理的，好比$.get()、$.post()和.load()。因此，早期的方法經過全局的 .ajaxError()事件方法來返回錯誤信息。而在 jQuery1.5 以後，能夠經過連綴處理使用局部.error()方法便可。而對於$.ajax()方法，不但能夠用這兩種方法，還有本身的屬性方法 error : function () {}。

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

 1 $.ajax({
 2 
 3     type : 'POST',
 4 
 5     url : 'test1.php',
 6 
 7     data : $('form').serialize(),
 8     
 9     success : function (response, status, xhr) {
10 
11         $('#box').html(response);
12 
13     },
14 
15 error : function (xhr, errorText, errorStatus) { 16 17 alert(xhr.status + ':' + xhr.statusText); 18 19 } 20 
21 });

 

 

//$.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(xhr.status + ':' +xhr.statusText);

　　alert(settings+ ':' + info);

});

 

三．請求全局事件

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

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

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

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

 

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

1 $.post('test.php', $('form').serialize(), function (response, status, xhr) {
2 
3     $('#box').html(response);
4 
5     }).success(function (response, status, xhr) {
6 
7     alert(response);
8 
9 });

 

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

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

　　alert(xhr.responseText);

});

PS：全局事件方法是全部 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基礎篇中此方法的參數），能夠直接經過屬性設置便可。

 1 $.ajax({
 2 
 3     type : 'POST',
 4 
 5     url : 'test.php',
 6 
 7     data : $('form').serialize(),
 8 
 9 success : function (response, status, xhr) { 10 11 $('#box').html(response); 12 13 }, 14 15 complete : function (xhr, status) { 16 17 alert('完成' + ' - ' + xhr.responseText + ' - ' + status); 18 19 } , 20 21 beforeSend : function (xhr, settings) { 22 23 alert('請求以前' + ' - ' + xhr.readyState + ' - ' + settings.url); 24 25 } 26 
27 });

 

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

 

四．JSON 和 JSONP

若是在同一個域下，$.ajax()方法只要設置 dataType 屬性便可加載 JSON 文件。而在非同域下，能夠使用 JSONP，但也是有條件的。

//同一個域下$.ajax()加載 JSON 文件

 1 $.ajax({
 2 
 3     type : 'POST',
 4 
 5     url : 'test.json',
 6 
 7     dataType : 'json',  8 
 9     success : function (response, status, xhr) {
10 
11         alert(response[0].url);
12 
13     }
14 
15 });

 

若是想跨域操做文件的話，咱們就必須使用 JSONP。JSONP(JSON with Padding)是一個非官方的協議，它容許在服務器端集成 Script tags 返回至客戶端，經過 javascript callback 的形式實現跨域訪問（這僅僅是 JSONP 簡單的實現形式） 。

//跨域的 PHP 端文件

 1 <?php
 2 
 3 $arr = array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
 4 
 5 $result = json_encode($arr);
 6 
 7 $callback = $_GET['callback'];  8 
 9 echo $callback."($result)";
10 
11 ?>

 

 

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

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

　　console.log(response);

});

 

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

 1 $.ajax({
 2 
 3     url : 'http://www.li.cc/test.php?callback=?',
 4 
 5     dataType : 'jsonp', 　　　　　　 //這兒設置爲jsonp那麼上面一行能夠不要  "?callback=?" 了 !
 6 
 7     success : function (response, status, xhr) {
 8 
 9         console.log(response);
10 
11         alert(response.a);
12 
13     }
14 
15 });

 

 

五．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()。覺得在將來版本中，極可能將這三種方法廢棄取消。

//成功後回調函數

 1 var jqXHR = $.ajax({
 2 
 3     type : 'POST',
 4 
 5     url : 'test.php',
 6 
 7     data : $('form').serialize()
 8 
 9 });
10 
11  
12 
13 jqXHR.done(function (response) {
14 
15     $('#box').html(response);
16 
17 });

 

 

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

1.可連綴操做，可讀性大大提升；

2.能夠屢次執行同一個回調函數；

3.爲多個操做指定回調函數；

 

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

jqXHR.done().done();

 

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

test1.php文件:

<?php

         echo 'test1.php'

?>

test2.php文件:

<?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 !