弄一個ajax筆記方便查詢-$.ajax()

$.ajax()是所有ajax方法中最底層的方法,所有其他方法都是基於$.ajax()方法的封裝。這個方法只有一個參數,傳遞一個各個功能鍵值對的對象。 $.ajax()方法對象參數表: 註意:對於data屬性,如果是GET模式,可以使用三種之前說所的三種形式。如果是POST模式可以使用之前的兩種形式 ...

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

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

參數               類型                說明
url               String             發送請求的地址
type              String             請求方式:POST或GET,預設GET
timeout           Number             設置請求超時的時間(毫秒)
data              Object或String     發送到伺服器的數據,對象或鍵值對字元串
dataType          String             返回的數據類型,比如html、xml、json等
beforeSend        Function           發送請求前可修改XMLHttpRequest對象的函數
complete          Function           請求完成後調用的回調函數
seccess           Function           請求成功後調用的回調函數
error             Function           請求失敗時調用的回調函數
global            Boolean            預設為true,表示是否觸發全局Ajax
cache             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.為多個操作指定回調函數;