老生常談ajax

標籤：

jQuery對Ajax做了大量的封裝，jQuery採用了三層封裝：最底層的封裝方法為：$.ajax()通過最底層進一步封裝了第二層的三種方法：.load()、$.get()、$.post()最高層是：$.getScript() and $.getJSON()

我自己的記憶方法：$.ajax()是非同步處理本源，它是一個地區、一個村子、一個小型生態系統，是jQuery的一個分公司；$.get()是得到、獲得，也就是往我們的生態系統中運輸我們生態系統所沒有的東西；$.post()是把我們不能完全消耗的物品運出去換我們需要的東西；一個掌管輸入，一個掌管輸出，這時就需要一個管理自身的管家，而.load()就是管理生態系統的管家，由於它不需要出去，只是在自家進行活動，所以就不用打上，jQuery公司的LOGO=>$了。由於我們有的貨物是重要的有的是次要的，這樣就誕生了貴賓服務，$.getScript()和$.getJSON()這兩個專為貴賓服務的特殊通道，方便快捷

【1】.laod()方法擁有三個參數：1. url：必須，請求html檔案的url地址，參數類型為String2. data：可選，發送的key/value資料，參數類型為Object3. callback：可選，成功或失敗的回呼函數，參數類型為函數Function

// 例子：GET方式：不傳遞data,則預設get方式$(‘.ajax_btn‘).on(‘click‘,function(){    $(‘.ajax_box‘).load(‘ajax.php?url=snail‘,function(){        alert(‘我是回呼函數！‘);    });});

<?phpif($_GET[‘url‘]==‘snail‘){    echo ‘蝸牛‘;}else{    echo ‘其它動物！‘;}?>

// POST方式：傳遞data,則為post方式$(‘.ajax_btn‘).on(‘click‘,function(){    $(‘.ajax_box‘).load(‘ajax.php‘,{        url:‘snail‘,    },function(){        alert(‘我是回呼函數！‘);    });});

<?phpif($_POST[‘url‘]==‘snail‘){    echo ‘蝸牛‘;}else{    echo ‘其它動物！‘;}?>

在Ajax資料載入完畢之後，就能執行回呼函數callback，也就是第三個參數；回呼函數可以傳遞三個選擇性參數：responseText(請求返回)、textStatus(請求狀態)、XMLHttpRequest(XMLHttpRequest對象)

$(‘.ajax_btn‘).on(‘click‘,function(){    $(‘.ajax_box‘).load(‘ajax.php‘,{        url:‘snail‘,    },function(response,status,xhr){        console.log(‘返回的值為：‘+response+‘，狀態為：‘+status+‘，狀態是：‘+xhr.statusText);        // 返回的值為：蝸牛，狀態為：success，狀態是：OK        console.log(‘返回的值為：‘+xhr.responseText+‘，XML DOM文檔：‘+xhr.responseXML+‘，響應的HTTP狀態：‘+xhr.status+‘，HTTP狀態的說明：‘+xhr.statusText);        // index.html:36 返回的值為：蝸牛，XML DOM文檔：undefined，響應的HTTP狀態：200，HTTP狀態的說明：OK    });});

<?phpif($_POST[‘url‘]==‘snail‘){    echo ‘蝸牛‘;}else{    echo ‘其它動物！‘;}?>

注意：status得到的值，如果成功返回資料則為：success，否則為：error。XMLHttpRequest對象屬於JavaScript範濤，可以調用一些屬性如下：

屬性名稱            說明responseText     作為響應主體被返回的文本responseXML      如果響應主體內容類型是"text/xml"或"application/xml"，則返回包含響應資料的XML DOM文檔status           響應的HTTP狀態statusText       HTTP狀態的說明

返回資料status和statusText對照表：HTTP狀態代碼     狀態字串                  說明200           OK                        伺服器成功返回了頁面400           Bad Request               語法錯誤導致伺服器不識別401           Unauthorized              請求需要使用者認證404           Not found                 指定的 URL 在伺服器上找不到500           Internal Server Error     伺服器遇到意外錯誤,無法完成請求503           ServiceUnavailable        由於伺服器過載或維護導致無法完成請求

【2】$.get()和$.post().load()方法是局部方法，因為它需要一個包含元素的jQuery對象作為首碼。而$.get()和$.post()是全域方法，無須指定某個元素。用途方面：.load()適合做靜態檔案的非同步擷取，而對於需要傳遞參數到伺服器頁面的，$.get()和$.post()更加合適

$.get()方法有四個參數：前面三個和.load()一樣，多了一個第四參數type，即伺服器返回的內容格式：包括xml、html、script、json、jsonp和text第一個參數為必選參數，後面三個為選擇性參數

$(‘.ajax_btn‘).on(‘click‘,function(){    $.get(‘ajax.php‘,{        url:‘snail‘,    },function(response,status,xhr){        if(status==‘success‘){            $(‘.ajax_box‘).html(response);        }        // type自動轉化成text    })});

注意:第四參數type是指定非同步返回的類型。一般情況下type參數是智能判斷,並不需要我們主動設定,如果主動設定,則會強行按照指定類型格式返回。

$(‘.ajax_btn‘).on(‘click‘,function(){    $.get(‘ajax.xml‘,{        url:‘snail‘,    },function(response,status,xhr){        if(status==‘success‘){            $(‘.ajax_box‘).html(response);        }        // type自動轉化成XML    })});

注意:如果載入的是xml檔案,type會智能判斷。如果強行設定html類型返回,則會把xml檔案當成普通資料全部返回,而不會按照xml格式解析資料。

$.post()方法的使用和$.get()基本上一致,他們之間的區別也比較隱晦,基本都是背後的不同,在使用者使用上體現不出。具體區別如下:1.GET請求是通過URL提交的,而POST請求則是HTTP訊息實體提交的;2.GET提交有大小限制(2KB),而POST方式不受限制;3.GET方式會被緩衝下來,可能有安全性問題,而POST沒有這個問題;4.GET方式通過$_GET[]擷取,POST方式通過$_POST[]擷取。

$(‘.ajax_btn‘).on(‘click‘,function(){    $.post(‘ajax.php‘,{        url:‘snail‘,    },function(response,status,xhr){        if(status==‘success‘){            $(‘.ajax_box‘).html(response);        }    })});

$.getScript()和$.getJSON()=>jQuery提供了一組用於特定非同步載入的方法:$.getScript(),用於載入特定的JS檔案;$.getJSON(),用於專門載入JSON檔案。

$(‘.ajax_btn‘).on(‘click‘,function(){    $.getScript(‘ajax.js‘);});$(‘.ajax_btn‘).on(‘click‘,function(){    $.getJSON(‘ajax.json‘,function(response,status,xhr){        console.log(response.ajax.name);    });});

 

$.ajax()是所有ajax方法中最底層的方法,所有其他方法都是基於$.ajax()方法的封裝。
這個方法只有一個參數,傳遞一個各個功能索引值對的對象。

$.ajax()方法對象參數表:

參數               類型                說明url               String             發送請求的地址type              String             請求方式:POST或GET,預設GETtimeout           Number             佈建要求逾時的時間(毫秒)data              Object或String     發送到伺服器的資料,對象或索引值對字串dataType          String             返回的資料類型,比如html、xml、json等beforeSend        Function           發送請求前可修改XMLHttpRequest對象的函數complete          Function           請求完成後調用的回呼函數seccess           Function           請求成功後調用的回呼函數error             Function           請求失敗時調用的回呼函數global            Boolean            預設為true,表示是否觸發全域Ajaxcache             Boolean            設定瀏覽器緩衝響應,預設為true。如果dataType類型為script或jsonp則為false。content           DOM                指定某個元素為與這個請求相關的所有回呼函數的上下文。contentType       String             指定請求內容的類型。預設為application/x-www-form-urlencoded。async             Boolean            是否非同步處理。預設為true,false為同步處理processData       Boolean            預設為true,資料被處理為URL編碼格式。如果為false,則阻止將傳入的資料處理為URL編碼的格式。dataFilter        Function           用來篩選響應資料的回呼函數。ifModified        Boolean            預設為false,不進行頭檢測。如果為true,進行頭檢測,當相應內容與上次請求改變時,請求被認為是成功的。jsonp             String             指定一個查詢參數名稱來覆蓋預設的jsonp回調參數名callback。username          String             在HTTP認證請求中使用的使用者名稱password          String             在HTTP認證請求中使用的密碼scriptCharset     String             當遠程和本地內容使用不同的字元集時,用來設定script和jsonp請求所使用的字元集。xhr               Function           用來提供XHR執行個體自訂實現的回呼函數traditional       Boolean            預設為false,不使用傳統風格的參數序列化。如為true,則使用。

$(‘.ajax_btn‘).on(‘click‘,function(){    $.ajax({        type:"GET",        url:"ajax.php",        data:{            url:"snail",        },        success:function(response,status,xhr){            console.log(response);        }    })});

注意:對於data屬性,如果是GET模式,可以使用三種之前說所的三種形式。如果是POST模式可以使用之前的兩種形式。

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

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

$(‘.ajax_load‘).ajaxStart(function(){    $(this).show();}).ajaxStop(function(){    $(this).hide();});

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

$(document).ajaxStart(function(){    $(‘.ajax_load‘).show();}).ajaxStop(function(){    $(‘.ajax_load‘).hide();});

// 請求時間過長，導致頁面呈現假死狀態，所以可以設定逾時$.ajax({    timeout:2000,});

// 如果某個ajax不想觸發全域事件,可以設定取消;比如取消觸發.ajaxStart()和.ajaxStop()全域事件：$.ajax({    global:false,});

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

$(‘.ajax_btn‘).on(‘click‘,function(){    $.ajax({        type:"GET",        url:"ajax.php",        data:{            url:"snail",        },        success:function(response,status,xhr){            console.log(response);        },        error:function(xhr,errorText,errorStatus){            console.log(xhr);            console.log(errorText);            console.log(errorStatus);        }    })});

// $.post()使用連綴.error()方法提示錯誤,連綴方法將被.fail()取代$.post(‘ajax.php‘).error(function(xhr,status,info){    console.log(xhr.status+‘:‘+xhr.statusText);    console.log(status+‘:‘+info);});

// $.post()使用全域.ajaxError()事件提示錯誤$(document).ajaxError(function(event,xhr,settings,infoError){    alert(xhr.status+‘:‘+xhr.statusText);    alert(settings+‘:‘+info);});

三.請求全域事件jQuery對於Ajax操作提供了很多全域事件方法,.ajaxStart()、.ajaxStop()、.ajaxError()等事件方法。他們都屬於請求時觸發的全域事件,除了這些,還有一些其他全域事件:.ajaxSend(),沒有對應的局部方法,只有屬性beforeSend,請求發送之前要綁定的函數。.ajaxComplete(),對應一個局部方法:.complete(),請求完成後註冊一個回呼函數。.ajaxSuccess(),對應一個局部方法:.success(),請求成功完成時執行。注意:全域事件方法是所有Ajax請求都會觸發到,並且只能綁定在document上。而局部方法,則針對某個Ajax。對於一些全域事件方法的參數,大部分為對象,而這些對象有哪些屬性或方法能調用,可以通過遍曆方法得到。

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

// $.post()請求完成的局部方法.complete()$.post().complete(function(xhr,status){    console.log("完成！");})

// $.post()請求完成的全域方法.ajaxComplete()$(document).ajaxComplete(function(event,xhr,setting){    console.log("完成！");})

// $.ajax()方法,可以直接通過屬性設定即可。$.ajax({    type:"POST",    url:"ajax.php",    success:function(data,status,xhr){},    complete:function(xhr,status){},    beforeSend:function(xhr,settints){}})

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

四.JSON和JSONP如果在同一個域下,$.ajax()方法只要設定dataType屬性即可載入JSON檔案。而在非同域下,可以使用JSONP,但也是有條件的。如果想跨網域作業檔案的話,我們就必須使用JSONP。JSONP(JSON with Padding)是一個非官方的協議,它允許在伺服器端整合Script tags返回至用戶端,通過javascriptcallback的形式實現跨域訪問(這僅僅是JSONP簡單的實現形式)。

$.ajax({    type:"GET",    dataType:"jsonp",    success:function(data,status,xhr){}})

五.jqXHR對象在之前,我們使用了局部方法:.success()、.complete()和.error()。這三個局部方法並不是XMLHttpRequest對象調用的,而是$.ajax()之類的全域方法返回的對象調用的。這個對象,就是jqXHR對象,它是原生對象XHR的一個超集。注意:如果使用jqXHR對象的話,那麼建議用.done()、.always()和.fail()代 替.success()、.complete()和.error()。以為在未來版本中,很可能將這三種方法廢棄取消。使用jqXHR的連綴方式比$.ajax()的屬性方式有三大好處:1.可連綴操作,可讀性大大提高;2.可以多次執行同一個回呼函數;3.為多個操作指定回呼函數;

老生常談ajax