jQuery AJAX 與 AJAX

1. JQuery提供的Ajax方法

（1）jQuery Ajax方法

//從伺服器加載資料，并把傳回的資料放入被選元素中
$(selector).load(URL,data,callback);
//通過 HTTP GET(從指定的資源請求資料)請求從伺服器上請求資料
$.get(URL,callback);
//通過 HTTP POST(向指定的資源送出要處理的資料)請求從伺服器上請求資料
$.post(URL,data,callback);
           

（2）GET與POST

• GET

  查詢字元串（名稱/值對）是在 GET 請求的 URL 中發送的

• POST

  查詢字元串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發送的

（3）jQuery Ajax

$.ajax({
    url: ,
    type: '',
    dataType: '',
    data: {

    },
    success: function(){

    },
    error: function(){

    }
 })
           

2.Ajax

Ajax技術的核心就是異步發送請求，而XMLHttpRequest則是異步發送請求的對象。 是以，Ajax技術的核心是XMLHttpRequest（XHR）。異步指的是使用者發送請求後，完全無需等待，請求在背景發送，不會堵塞使用者目前活動。使用者無需等到第一次請求得到完全響應，就可以再次請求。 也不需要重新整理整個頁面。Ajax不支援跨域通路。

（1）XMLHttpRequest

在背景與伺服器交換資料（IE5，IE6用ActiveXObject）,考慮這個問題使用相容寫法。

var xmlhttp;
if (window.XMLHttpRequest){
    //IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}else if (window.ActiveXObject){
    //IE5，IE6
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"）;
}
           

（2）XMLHttpRequest的屬性

• onreadystatechange

  該屬性用來指定xhr對象狀态改變時的事件函數。每當readyState屬性改變的時候就會調用該函數。

• readyState

  有如下幾種狀态。

  0：xhr對象還沒完成初始化。

  1：xhr對象開始發送請求。

  2：xhr對象的請求發送完成。

  3：xhr對象開始讀取伺服器的相應。

  4：xhr對象讀取伺服器相應結束。

• status

  并不是說伺服器響應完成後就萬事大吉了。還需要看伺服器的相應碼，就是status。

  常用的有：

  200 OK：伺服器響應正常。

  304 Not Modified：該資源在上次請求後沒有任何修改。通常用于浏覽器的緩存（get請求導緻的緩存，加一個随機參數可解決）。

  400 Bad Request：語義有誤，目前請求無法被伺服器了解或者請求參數有誤。

  403 Forbidden：伺服器已經了解請求，但是拒絕執行它。

  404 Not Found*：請求失敗，請求所希望得到的資源未被在伺服器上發現。

  500 Internal Server Error*：内部伺服器錯誤。一般來說，這個問題都會在伺服器端的源代碼出現錯誤時出現。

  504 Gateway Timeout：請求逾時。

• statusText

  見status。

• responseText

  用于擷取伺服器的響應文本。

• responseXML

  用于擷取伺服器響應的XML文檔對象。

（3）XMLHttpRequest的方法

• abort()：停止發送目前請求。
• getAllResponseHeaders()：擷取字元串形式的伺服器傳回的所有響應頭。
• getResponseHeader(‘headerLabel’)：根據響應頭的名字，擷取對應的響應頭。
• open(method, url, async)：建立與伺服器url的連接配接，以及是否使用異步（true/false）。
• send(content)：發送請求，其中content是參數。
• setRequestHeader(‘label’, ‘value’)：在發送請求（send）之前，先設定請求頭。POST傳資料時，用來添加 HTTP 頭，然後send(data)，注意data格式；GET發送資訊時直接加參數到url上就可以，比如url?a=a1&b=b1。

（4） 原生js實作Ajax方法

var Ajax={
    get: function(url, fn) {
        //這裡省略了，注意浏覽器相容寫法
        var obj = new XMLHttpRequest();  // XMLHttpRequest對象用于在背景與伺服器交換資料          
        obj.open('GET', url, true);
        obj.onreadystatechange = function() {
            if (obj.readyState ==  && obj.status ==  || obj.status == ) { // readyState == 4說明請求已完成
                fn.call(this, obj.responseText);  //從伺服器獲得資料或者寫成alert("success")這樣就沒有fn這個參數; 
            }
        };
        obj.send();
    },
    post: function (url, data, fn) {         // datat應為'a=a1&b=b1'這種字元串格式，在jq裡如果data為對象會自動将對象轉成這種字元串格式
        var obj = new XMLHttpRequest();
        obj.open("POST", url, true);
        obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  // 添加http頭，發送資訊至伺服器時内容編碼類型
        obj.onreadystatechange = function() {
            if (obj.readyState ==  && (obj.status ==  || obj.status == )) {  // 304未修改
                fn.call(this, obj.responseText);//alert("success"); 
            }
        };
        obj.send(data);
    }
}