[Ajax]（二）jQuery中的Ajax

快速上手

$.ajax({
    url:'data.json',
    type:'get', 
    data:{id:1,type:'onsale'},   //用於提交到服務端的參數
    dataType:'json',             //用於設置響應體的類型
    beforeSend:function(xhr){     //請求發送以前
        console.log(xhr)
    },
    success:function(res){   //狀態碼200
        console.log(res)     //res會自動根據服務端響應的Content-Type自動轉換爲對象
    },
    error:function(xhr){     //狀態碼不是200
        console.log(xhr)
    },
    complete:function(xhr){  //無論是否是200，都會執行
        cosole.log(xhr)
    }
})

相關屬性解釋

data

用於提交到服務端的參數

若是是GET就經過url傳遞，若是是POST請求就經過data傳遞

dataType

用於設置響應體的類型，與data無關

一旦設置了dataType選項，就再也不關心服務端響應的Content-Type了

快捷方式

$.get()

$.get(url,data,function(res){

})

$.getJson()

使用一個HTTP GET請求從服務器加載JSON編碼的數據。

從jQuery 1.4開始，若是JSON文件包含一個語法錯誤，該請求一般會靜靜的失敗。所以應該避免頻繁手工編輯JSON數據。JSON語法規則比JavaScript對象字面量表示法更加嚴格。例如，全部在JSON中的字符串，不管是屬性或值，必須用雙引號括起來。

//爲了防止服務端不加Content-Type
$.getJSON(url,data,function(res){

})

$.getScript()

使用一個HTTP GET請求從服務器加載並執行一個 JavaScript 文件

$.getScript(url)
.done(function(script, textStatus) {

})
//從jQuery 1.5開始，以用.fail()來處理錯誤:
.fail(function(jqxhr, settings, exception) {

});

$.post()

$.post(url,data,function(res){

})

$().load()

載入遠程 HTML 文件代碼並插入至 DOM 中。這樣作能夠節省不少請求

默認使用 GET 方式 - 傳遞附加參數時自動轉換爲 POST 方式。jQuery 1.2 中，能夠指定選擇符，來篩選載入的 HTML 文檔，DOM 中將僅插入篩選出的 HTML 代碼。語法形如 "url #some > selector"。請查看示例。

//load(url,[data],[callback])
$("#links").load("/Main_Page #p-Getting-Started li");

全局Ajax事件處理器

這些方法用於註冊事件處理器，用來處理頁面上的任何 Ajax 請求，當某些事件觸發後，這些事件處理器被調用。

查看其餘博主關於全局Ajax的總結