摘要：接收響應當請求發送到服務器端，收到響應后，響應的數據會自動填充對象的屬性。一般而已狀態代碼為作為成功的標志。必要時，可以將查詢字符串參數追加到的末尾，以便提交給服務器。后端實現可以自學一點后端知識，便于學習。

前端學習：教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總

歡迎提issues斧正：Ajax

2005年Jesse James Garrett 發表了一篇文章，標題為：“Ajax：A new Approach to Web Applications”。他在這篇文章里介紹了一種技術叫：Ajax，即Asynchronous JavaScript And XML。這種技術能夠向服務器請求數據而不須刷新整個頁面，會帶來更好的用戶體驗。

Ajax技術核心是XMLHttpRequest 對象(簡稱XHR)，提供了向服務器發送請求和解析服務器響應提供了流暢的接口。能夠以異步方式從服務器獲取更多的信息，在不刷新網頁的情況下，更新服務器最新的數據到頁面上。IE7+、Firefox、Opera、Chrome 和Safari 都支持原生的XHR對象。

var xhr = new XMLHttpRequest();  //實例化XMLHttpRequest

雖然說現在基本不用去兼容IE6了，有句話叫啥：你不用為了一點用戶去提高開發成本。不過，學習的時候還是要摸清楚。IE6 及以下，那么我們必須還需要使用ActiveX 對象通過MSXML 庫來實現。兼容一下：

function CreateXHR() {
    if(window.XMLHttpRequest){
        return new XMLHttpRequest();
    }else{
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}
var xhr = new CreateXHR();  

var xhr = new CreateXHR();

在使用XHR 對象時，必須先調用open()方法，它接受三個參數：要發送的請求類型(get、post)、請求的URL 和表示是否異步，true 為異步，false 為同步。

xhr.open("get", "xzavier", true); 

open()方法并不會真正發送請求，而只是啟動一個請求以備發送。在send()之前，有一個設置自定義請求頭部的方法setRequestHeader("key", "value");放在open 方法之后，send 方法之前。不過，一般在post提交表單時用到：

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

當open()方法準備好之后，通過send()方法進行發送請求，send()方法接受一個參數，作為請求主體發送的數據。如果不需要則，必須填null。

xhr.send(null); 

執行send()方法之后，請求就會發送到服務器上。

當請求發送到服務器端，收到響應后，響應的數據會自動填充XHR 對象的屬性。一共有四個屬性，常用前面三個：

    屬性                       說明
responseText    作為響應主體被返回的文本
status          響應的HTTP 狀態
statusText      HTTP 狀態的說明
responseXML     如果響應主體內容類型是"text/xml"或"application/xml"，則返回包含響應數據的XML DOM 文檔

接受響應之后，第一步檢查status 屬性，以確定響應已經成功返回。一般而已HTTP狀態代碼為200作為成功的標志。HTTP狀態代碼：

HTTP      狀態碼                  說明
200   OK                    服務器成功返回
400   Bad Request           語法錯誤導致服務器無法識別
404   Not found             URL不存在
500   Internal Server Error 服務器遇到意外錯誤無法完成請求
503   ServiceUnavailable    服務器過載導致無法完成請求

列幾個比較常用的狀態碼，詳見：狀態碼
同步方式：

var oButton = document.getElementById("myButton");
oButton.onclick = function() {
    var xhr = new createXHR();
    xhr.open("get", "xzavier", false); //false同步
    xhr.send(null);
    if (xhr.status == 200) { 
        console.log(xhr.responseText); 
    } else {
        console.log("error status:" + xhr.status + "info:" + xhr.statusText);
    }
}

同步只是這項技術的一種使用方式，但是很少用，使用異步調用才是常用的。使用異步調用的時候，需要觸發readystatechange事件，然后檢測readyState屬性，屬性值：

屬性值    狀態         說明
  0     未初始化    未調用open()方法
  1     啟動       已經調用open()方法，未調用send()方法
  2     發送       已經調用send()方法，未接受響應
  3     接受       已經接受到部分響應數據
  4     完成       已經接受到全部響應數據

異步方式：

var oButton = document.getElementById("myButton");
oButton.onclick = function() {
    var xhr = new createXHR();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                alert(xhr.responseText);
            } else {
                console.log("error status:" + xhr.status + "info:" + xhr.statusText);
            }
        }
    }
    xhr.open("get", "/xzavier", true); //true同步
    xhr.send(null);
}

整個ajax異步可以總結為：

創建XMLHttpRequest對象,即創建一個異步調用對象

創建一個新的HTTP請求,并指定該HTTP請求的方法、URL及是否異步

設置響應HTTP請求狀態變化的函數

發送HTTP請求

獲取異步調用返回的數據

使用JavaScript和DOM實現局部刷新

在提供服務器請求的過程中，有兩種方式，分別是：GET和POST。
GET： 一般用于信息獲取，用URL傳遞參數，對發送信息數量有限制，一般2000個字符
POST：一般用于修改服務器上的資源，對所發送的信息沒有限制
GET： 是通過地址欄來傳值
POST：是通過提交表單來傳值
在以下情況中，請使用 POST 請求：

無法使用緩存文件（更新服務器上的文件或數據庫）

向服務器發送大量數據（POST 沒有數據量限制）

發送包含未知字符的用戶輸入時，POST比 GET更穩定也更可靠

GET請求是最常見的請求類型，常用于向服務器查詢某些信息。必要時，可以將查詢字符串參數追加到URL的末尾，以便提交給服務器。

xhr.open("get", "xzavier?name=" + name + "&sex="+ sex , true);

通過URL 后的問號給服務器傳遞鍵值對數據，服務器接收到返回響應數據。特殊字符傳參產生的問題可以使用encodeURIComponent()進行編碼處理，中文字符的返回及傳參，可以講頁面保存和設置為utf-8 格式即可。

xhr.open("get", "xzavier?name=" + encodeURIComponent(name) + "&sex="+ encodeURIComponent(sex) , true);

POST 請求可以包含非常多的數據，我們在使用表單提交的時候，很多就是使用的POST傳輸方式。
發送POST請求的數據，不會跟在URL后面，而是通過send()方法向服務器提交數據。向服務器發送POST請求由于解析機制的原因，需要進行請求頭部的處理。

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

jquery的ajax方法非常好用，不用寫很多代碼去區別get還是post，異步還是同步。當然了，自己用的話jquery已經很完美了，用著比自己封裝的好用多了，當然，全球互聯網有大部分都用著jquery插件。這兒就不說jquery的ajax，我們自己來封裝一個，封裝一個東西也是對基礎知識的鞏固和提升。

//名值對轉換為字符串
function params(data) {
    var arr = [];
    for (var i in data) {
        arr.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));
    }
    return arr.join("&");
}
function ajax(obj) {
    var xhr = createXHR();
    obj.data = params(obj.data);
    if (obj.async === true) {
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                callback();
            }
        };
    }
    if (obj.method === "get"){
        obj.url += obj.url.indexOf("?") == -1 ? "?" + obj.data : "&" + obj.data;
    }
    xhr.open(obj.method, obj.url, obj.async);
    if (obj.method === "post") {
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(obj.data);    
    } else {
        xhr.send(null);
    }
    if (obj.async === false) {
        callback();
    }
    function callback() {
        if (xhr.status == 200) {
            obj.success(xhr.responseText);
        } else {
            console.log("error status:" + xhr.status + "info:" + xhr.statusText);
        }    
    }
}

使用：

var oButton = document.getElementById("myButton");
oButton.onclick = function() {
    ajax({
        method : "post",
        url : "xzavier",
        data : {
            "name" : "xzavier",
            "sex" : "man"
        },
        success : function (result) {
            console.log(result);
        },
        async : true
    });
}

學習使用，要用于別處需要封裝的還有很多。

可以自學一點后端知識，便于學習。比如php，當然，現在node在前端這么火，怎么能不用呢。這里不多講node安裝、搭建項目等知識了，等之后自己再熟一點再寫。

var oButton = document.getElementById("myButton");
var sName = document.getElementById("isName").value;
oButton.onclick = function() {
    ajax({
        method : "post",
        url : "isuser",
        data : sName,
        success : function () {
            console.log("useable name");
        },
        async : false
    });
}

node端：node學習（樸靈的書： 深入淺出nodeJs）
//用戶注冊時判斷用戶名是否已存在

app.post("/isuser", function(req, res) {
  var username = req.body.username;
  User.isUser(username, function(status){  //查詢數據庫，牽扯知識點多，不詳述    
    if(status == "OK"){
      res.send(200);          
    }else{
      res.send(404);
    }
  });
});

Ajax帶來的好處：
1、通過異步模式，實現動態不刷新，提升了用戶體驗
2、優化了瀏覽器和服務器之間的傳輸，減少不必要的數據往返，減少了帶寬占用
3、Ajax在客戶端運行，承擔了一部分本來由服務器承擔的工作，減少了大用戶量下的服務器負載

Ajax的缺點：
1、Ajax不支持瀏覽器back按鈕
2、安全問題,Ajax暴露了與服務器交互的細節
3、對搜索引擎的支持比較弱
4、破壞了程序的異常機制
5、不容易調試
雖然優缺點，但是研發人員就是克服并完善技術缺點，發揚技術優點的存在O(∩_∩)O~