摘要：接收響應(yīng)當(dāng)請(qǐng)求發(fā)送到服務(wù)器端，收到響應(yīng)后，響應(yīng)的數(shù)據(jù)會(huì)自動(dòng)填充對(duì)象的屬性。一般而已狀態(tài)代碼為作為成功的標(biāo)志。必要時(shí)，可以將查詢字符串參數(shù)追加到的末尾，以便提交給服務(wù)器。后端實(shí)現(xiàn)可以自學(xué)一點(diǎn)后端知識(shí)，便于學(xué)習(xí)。

前端學(xué)習(xí)：教程&開(kāi)發(fā)模塊化/規(guī)范化/工程化/優(yōu)化&工具/調(diào)試&值得關(guān)注的博客/Git&面試-前端資源匯總

歡迎提issues斧正：Ajax

2005年Jesse James Garrett 發(fā)表了一篇文章，標(biāo)題為：“Ajax：A new Approach to Web Applications”。他在這篇文章里介紹了一種技術(shù)叫：Ajax，即Asynchronous JavaScript And XML。這種技術(shù)能夠向服務(wù)器請(qǐng)求數(shù)據(jù)而不須刷新整個(gè)頁(yè)面，會(huì)帶來(lái)更好的用戶體驗(yàn)。

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

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

雖然說(shuō)現(xiàn)在基本不用去兼容IE6了，有句話叫啥：你不用為了一點(diǎn)用戶去提高開(kāi)發(fā)成本。不過(guò)，學(xué)習(xí)的時(shí)候還是要摸清楚。IE6 及以下，那么我們必須還需要使用ActiveX 對(duì)象通過(guò)MSXML 庫(kù)來(lái)實(shí)現(xiàn)。兼容一下：

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

var xhr = new CreateXHR();

在使用XHR 對(duì)象時(shí)，必須先調(diào)用open()方法，它接受三個(gè)參數(shù)：要發(fā)送的請(qǐng)求類型(get、post)、請(qǐng)求的URL 和表示是否異步，true 為異步，false 為同步。

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

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

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

當(dāng)open()方法準(zhǔn)備好之后，通過(guò)send()方法進(jìn)行發(fā)送請(qǐng)求，send()方法接受一個(gè)參數(shù)，作為請(qǐng)求主體發(fā)送的數(shù)據(jù)。如果不需要?jiǎng)t，必須填null。

xhr.send(null); 

執(zhí)行send()方法之后，請(qǐng)求就會(huì)發(fā)送到服務(wù)器上。

當(dāng)請(qǐng)求發(fā)送到服務(wù)器端，收到響應(yīng)后，響應(yīng)的數(shù)據(jù)會(huì)自動(dòng)填充XHR 對(duì)象的屬性。一共有四個(gè)屬性，常用前面三個(gè)：

    屬性                       說(shuō)明
responseText    作為響應(yīng)主體被返回的文本
status          響應(yīng)的HTTP 狀態(tài)
statusText      HTTP 狀態(tài)的說(shuō)明
responseXML     如果響應(yīng)主體內(nèi)容類型是"text/xml"或"application/xml"，則返回包含響應(yīng)數(shù)據(jù)的XML DOM 文檔

接受響應(yīng)之后，第一步檢查status 屬性，以確定響應(yīng)已經(jīng)成功返回。一般而已HTTP狀態(tài)代碼為200作為成功的標(biāo)志。HTTP狀態(tài)代碼：

HTTP      狀態(tài)碼                  說(shuō)明
200   OK                    服務(wù)器成功返回
400   Bad Request           語(yǔ)法錯(cuò)誤導(dǎo)致服務(wù)器無(wú)法識(shí)別
404   Not found             URL不存在
500   Internal Server Error 服務(wù)器遇到意外錯(cuò)誤無(wú)法完成請(qǐng)求
503   ServiceUnavailable    服務(wù)器過(guò)載導(dǎo)致無(wú)法完成請(qǐng)求

列幾個(gè)比較常用的狀態(tài)碼，詳見(jiàn)：狀態(tài)碼
同步方式：

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);
    }
}

同步只是這項(xiàng)技術(shù)的一種使用方式，但是很少用，使用異步調(diào)用才是常用的。使用異步調(diào)用的時(shí)候，需要觸發(fā)readystatechange事件，然后檢測(cè)readyState屬性，屬性值：

屬性值    狀態(tài)         說(shuō)明
  0     未初始化    未調(diào)用open()方法
  1     啟動(dòng)       已經(jīng)調(diào)用open()方法，未調(diào)用send()方法
  2     發(fā)送       已經(jīng)調(diào)用send()方法，未接受響應(yīng)
  3     接受       已經(jīng)接受到部分響應(yīng)數(shù)據(jù)
  4     完成       已經(jīng)接受到全部響應(yīng)數(shù)據(jù)

異步方式：

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);
}

整個(gè)ajax異步可以總結(jié)為：

創(chuàng)建XMLHttpRequest對(duì)象,即創(chuàng)建一個(gè)異步調(diào)用對(duì)象

創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定該HTTP請(qǐng)求的方法、URL及是否異步

設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù)

發(fā)送HTTP請(qǐng)求

獲取異步調(diào)用返回的數(shù)據(jù)

使用JavaScript和DOM實(shí)現(xiàn)局部刷新

在提供服務(wù)器請(qǐng)求的過(guò)程中，有兩種方式，分別是：GET和POST。
GET： 一般用于信息獲取，用URL傳遞參數(shù)，對(duì)發(fā)送信息數(shù)量有限制，一般2000個(gè)字符
POST：一般用于修改服務(wù)器上的資源，對(duì)所發(fā)送的信息沒(méi)有限制
GET： 是通過(guò)地址欄來(lái)傳值
POST：是通過(guò)提交表單來(lái)傳值
在以下情況中，請(qǐng)使用 POST 請(qǐng)求：

無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）

向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒(méi)有數(shù)據(jù)量限制）

發(fā)送包含未知字符的用戶輸入時(shí)，POST比 GET更穩(wěn)定也更可靠

GET請(qǐng)求是最常見(jiàn)的請(qǐng)求類型，常用于向服務(wù)器查詢某些信息。必要時(shí)，可以將查詢字符串參數(shù)追加到URL的末尾，以便提交給服務(wù)器。

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

通過(guò)URL 后的問(wèn)號(hào)給服務(wù)器傳遞鍵值對(duì)數(shù)據(jù)，服務(wù)器接收到返回響應(yīng)數(shù)據(jù)。特殊字符傳參產(chǎn)生的問(wèn)題可以使用encodeURIComponent()進(jìn)行編碼處理，中文字符的返回及傳參，可以講頁(yè)面保存和設(shè)置為utf-8 格式即可。

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

POST 請(qǐng)求可以包含非常多的數(shù)據(jù)，我們?cè)谑褂帽韱翁峤坏臅r(shí)候，很多就是使用的POST傳輸方式。
發(fā)送POST請(qǐng)求的數(shù)據(jù)，不會(huì)跟在URL后面，而是通過(guò)send()方法向服務(wù)器提交數(shù)據(jù)。向服務(wù)器發(fā)送POST請(qǐng)求由于解析機(jī)制的原因，需要進(jìn)行請(qǐng)求頭部的處理。

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

jquery的ajax方法非常好用，不用寫(xiě)很多代碼去區(qū)別get還是post，異步還是同步。當(dāng)然了，自己用的話jquery已經(jīng)很完美了，用著比自己封裝的好用多了，當(dāng)然，全球互聯(lián)網(wǎng)有大部分都用著jquery插件。這兒就不說(shuō)jquery的ajax，我們自己來(lái)封裝一個(gè)，封裝一個(gè)東西也是對(duì)基礎(chǔ)知識(shí)的鞏固和提升。

//名值對(duì)轉(zhuǎn)換為字符串
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
    });
}

學(xué)習(xí)使用，要用于別處需要封裝的還有很多。

可以自學(xué)一點(diǎn)后端知識(shí)，便于學(xué)習(xí)。比如php，當(dāng)然，現(xiàn)在node在前端這么火，怎么能不用呢。這里不多講node安裝、搭建項(xiàng)目等知識(shí)了，等之后自己再熟一點(diǎn)再寫(xiě)。

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學(xué)習(xí)（樸靈的書(shū)： 深入淺出nodeJs）
//用戶注冊(cè)時(shí)判斷用戶名是否已存在

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

Ajax帶來(lái)的好處：
1、通過(guò)異步模式，實(shí)現(xiàn)動(dòng)態(tài)不刷新，提升了用戶體驗(yàn)
2、優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用
3、Ajax在客戶端運(yùn)行，承擔(dān)了一部分本來(lái)由服務(wù)器承擔(dān)的工作，減少了大用戶量下的服務(wù)器負(fù)載

Ajax的缺點(diǎn)：
1、Ajax不支持瀏覽器back按鈕
2、安全問(wèn)題,Ajax暴露了與服務(wù)器交互的細(xì)節(jié)
3、對(duì)搜索引擎的支持比較弱
4、破壞了程序的異常機(jī)制
5、不容易調(diào)試
雖然優(yōu)缺點(diǎn)，但是研發(fā)人員就是克服并完善技術(shù)缺點(diǎn)，發(fā)揚(yáng)技術(shù)優(yōu)點(diǎn)的存在O(∩_∩)O~