ajax請求

一個完整的Ajax過程如下：

1. 創建XMLHttpRequest對象

2. 通過上一步創建的XMLHttpRequest對象，打開一個連接

3. 綁定事件，對獲取到的數據進行處理。一般為請求成功后的回調函數

4. 發送該請求

根據上面的步驟進行簡單的描述：

1. 對于不同的瀏覽器，創建一個能發起Ajax請求對象的方式不一樣。 現代瀏覽器通過內嵌的XMLHttpRequest()對象即可實現，而老的瀏覽器(IE6/IE6-)則需要通過一個ActiveX對象來創建。

2. 打開一個到遠程對象的請求，需要通過XHR的open()方法實現。語法:

open(method, url, async, user, password)

其中：

• method可以取值為GET、POST、HEAD、PUT、DELETE、OPTIONS，前二者是常用的。

• url為請求的遠程接口

• async為布爾值，是否需要異步處理請求，默認為true

• 如果此接口需要用戶名和密碼，可附上，不過這樣就暴露了

3. 通過監控readystatechange事件，判斷數據是否請求完成，并進行相關處理。其狀態值可以通過readyState獲取，有如下5種狀態：

• 0: XHR對象未初始化

• 1: XHR對象已經建立，但還未發送

• 2: 已調用send()，請求已發送

• 3: 已接收到數據，正在處理中

• 4: 數據接收并處理完成，可以使用了

4. send()方法用于發送請求，若是POST方式，可以將需要傳送的數據作為參數發送，形如send(data)，但此時需要先設置XMLHttpRequest請求頭的Content-Type為application/x-www-form-urlencoded。

一個簡單的Ajax示例：

jQuery中ajax的4種常用請求方式：
1.$.ajax()返回其創建的 XMLHttpRequest 對象。
$.ajax() 只有一個參數：參數 key/value 對象，包含各配置及回調函數信息。詳細參數選項見下。
如果你指定了 dataType 選項，請確保服務器返回正確的 MIME 信息，(如 xml 返回 "text/xml")。
實例：
保存數據到服務器，成功時顯示信息。 
 $.ajax({
        type: "post",
        dataType: "html",
        url: '/Resources/GetList.ashx',
        data: dataurl,
        success: function (data) {            if (data != "") {
                $("#pager").pager({ pagenumber: pagenumber, pagecount: data.split("$$")[1], buttonClickCallback: PageClick });
                $("#anhtml").html(data.split("$$")[0]);

            }
        }
    });
 2.通過遠程 HTTP GET 請求載入信息。
這是一個簡單的 GET 請求功能以取代復雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執行函數，請使用 $.ajax。
實例：
$.get("test.cgi", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  }); 
3. 通過遠程 HTTP POST 請求載入信息。
這是一個簡單的 POST 請求功能以取代復雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執行函數，請使用 $.ajax。
實例：
 $.post("/Resources/addfriend.ashx", { "fid": fids, "fname": fnames, "tuid": tuids, "tuname": tunames }, function (data) {        if (data == "ok") {
            alert("添加成功！");
        }
    })4.通過 HTTP GET 請求載入 JSON 數據。
實例：
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
  $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).appendTo("#p_w_picpaths");    if ( i == 3 ) return false;
  });
});