jquery發送ajax請求

Ajax用於瀏覽器與服務器通信而無需刷新整個頁面，服務器將不再返回整個頁面，而是返回少量數據，通過JavaScript DOM更新一部分節點。期間數據傳輸可採用xml，json等格式，Ajax最早用於谷歌的搜索提示。

其實不刷新整個頁面便可與服務器通信的方法有很多，比如Flash，Java applet，iframe等，但Ajax是目前最爲常見的一種。

我們可以使用JavaScript擴展對象XMLHttpRequest實現Ajax，對於這種方法在這裏不做介紹，下面直接瞭解jQuery實現Ajax的幾種方法。

瀏覽器與服務器之間傳輸數據所採用的格式，比較常見的有xml，html，text，json，jsonp等，目前json由於佔用更小存儲，且是JavaScript原生格式，因此很受歡迎。

當確定數據傳輸採用json格式後，下面就需要考慮序列化問題了。

網絡中傳輸的都是文本字符串（其實是二進制比特流，這裏方便理解），因此在向網絡通道中寫入數據時，都需要先序列化json對象爲文本字符串。而從網絡通道中讀取數據時，都需要反序列化文本字符串爲json對象。在Python中json.dumps用於序列化，json.loads用於反序列化。

如果確定數據格式是json，JS也需對服務器返回的數據進行反序列化，即把json樣式的字符串變成json對象。
 

var json_str = '{"result": "hello, world!"}';
var json_object = eval("(" + json_str + ")");  // 法一，使用eval函數，注意括號
var json_object = jQuery.parseJSON(json_str);  // 法二，使用jQuery的parseJSON函數
 
alert(json_object.result);     

下面我們就來看看jQuery中發送Ajax請求的幾個常見方法。

$.ajax()

該方法用於執行Ajax請求，常用於其他jQuery Ajax方法不能完成的請求，也許我們可以把它稱爲"jQuery中Ajax系列方法之母"。

形式：$.ajax({name:val, name:val,...});
可選字段：
1）url：鏈接地址，字符串表示
2）data：需發送到服務器的數據，GET與POST都可以，格式爲{A: '...', B: '...'}
3）type："POST" 或 "GET"，請求類型
4）timeout：請求超時時間，單位爲毫秒，數值表示
5）cache：是否緩存請求結果，bool表示
6）contentType：內容類型，默認爲"application/x-www-form-urlencoded"
7）dataType：服務器響應的數據類型，字符串表示；當填寫爲json時，回調函數中無需再對數據反序列化爲json
8）success：請求成功後，服務器回調的函數
9）error：請求失敗後，服務器回調的函數
10）complete：請求完成後調用的函數，無論請求是成功還是失敗，都會調用該函數；如果設置了success與error函數，則該函數在它們之後被調用
11）async：是否異步處理，bool表示，默認爲true；設置該值爲false後，JS不會向下執行，而是原地等待服務器返回數據，並完成相應的回調函數後，再向下執行
12）username：訪問認證請求中攜帶的用戶名，字符串表示
13）password：返回認證請求中攜帶的密碼，字符串表示

$.ajax({
    url: "/greet",
    data: {name: 'jenny'},
    type: "POST",
    dataType: "json",
    success: function(data) {
        // data = jQuery.parseJSON(data);  //dataType指明瞭返回數據爲json類型，故不需要再反序列化
        ...
    }
})

$.post()

該方法使用POST方式執行Ajax請求，從服務器加載數據。

形式：$.post(url, data, func, dataType);
可選參數：
1）url：鏈接地址，字符串表示
2）data：需要發送到服務器的數據，格式爲{A: '...', B: '...'}
3）func：請求成功後，服務器回調的函數；function(data, status, xhr)，其中data爲服務器回傳的數據，status爲響應狀態，xhr爲XMLHttpRequest對象，個人感覺關注data參數即可
4）dataType：服務器返回數據的格式
 

$.post(
    "/greet",
    {name: 'Brad'},
    function(data) {
        ...
    },
    "json"
)

$.get()

 

該方法使用GET方式執行Ajax請求，從服務器加載數據。

形式：$.get(url, data, func, dataType);
其各個參數所示意義與$.post()一致，在此不再列出，唯一區別就是請求類型是GET。

$.get(
    "/greet",
    {name: 'Brad'},
    function(data) {
        ...
    },
    "json"
)