摘要：把提交的數(shù)據(jù)則放置在是包的包體中。異步請求發(fā)送器請求繼續(xù)還行后面的代碼響應(yīng)結(jié)果接收完畢了操作結(jié)果，這是同步請求的大致過程。但是有些情況下我們還是得用同步請求。

上一篇文章 我們大概知道了XHR對象是什么東東，也都了解了它的一些屬性和方法，那么現(xiàn)在具體來實現(xiàn)一下Ajax技術(shù) 和 了解下XHR2對象。

先來創(chuàng)建個XHR對象的實例：

var xhr = function(){
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    }else{
        return new ActiveObject("Micrsorf.XMLHttp");
    }
}();
console.log(xhr.readyState);

先來看個get請求

xhr.onreadystatechange = function(){
    switch(xhr.readyState){
        case 0 : 
            console.log(0,"未初始化....");
            break;
        case 1 : 
            console.log(1,"請求參數(shù)已準(zhǔn)備，尚未發(fā)送請求...");
            break;
        case 2 : 
            console.log(2,"已經(jīng)發(fā)送請求,尚未接收響應(yīng)");
            break;
        case 3 : 
            console.log(3,"正在接受部分響應(yīng).....");
            data.innerHTML = xhr.responseText;
            break;
        case 4 : 
            console.log(4,"響應(yīng)全部接受完畢");
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                document.write(xhr.responseText);
            }else{
                document.write("error:" + xhr.status);
            }
            break;
    }
}
xhr.open("get","/products/getProduct?id=1");
xhr.send(null);

這里發(fā)送了個簡單的get異步請求到我本地的web服務(wù)器中，然后我們在控制臺看下輸出：

可以看到剛創(chuàng)建完XHR對象后的readyState為0，當(dāng)readyState為1,2,3,4，時都觸發(fā)了onreadystatechange事件，而 readyState為0沒有觸發(fā)，readyState為3時觸發(fā)了兩次，為什么這樣呢？

為什么為0時沒有觸發(fā)，我們剛創(chuàng)建XHR對象后readyState為0，然后接著執(zhí)行后面的代碼，直到send()方法之前readyState的值都沒有發(fā)生改變，所以在onreadystatechange事件中檢測readyState為0是沒有意義的。

readyState為3是觸發(fā)了兩次，其實有些請求不止兩次，看你請求的數(shù)據(jù)量的大小而定，我們增大接收數(shù)據(jù)來看看：

這就好了，既然我們能在readystate為3時獲取數(shù)據(jù)的相關(guān)信息，那我們就可以利用這個特性在readystate為3時做一個數(shù)據(jù)加載進度條變化的效果了，這個講到XHR2對象的時候來試試。

還有一個就是在發(fā)送get請求時，get請求的數(shù)據(jù)會附在URL之后（就是把數(shù)據(jù)放置在HTTP協(xié)議頭中），以?分割URL和傳輸數(shù)據(jù)，參數(shù)之間以&相連，如："/products/getProduct?id=1"。如果數(shù)據(jù)是英文字母/數(shù)字，原樣發(fā)送，如果是空格，轉(zhuǎn)換為+，如果是中文/其他字符，則直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX為該符號以16進制表示的ASCII。

POST把提交的數(shù)據(jù)則放置在是HTTP包的包體中。

再來個post請求

1.先來個簡單的表單,注冊一個用戶

2.用Ajax提交數(shù)據(jù)到服務(wù)器

var btn = document.getElementById("add");
btn.onclick = function(){
    var tel = document.getElementById("tel").value.toString(),
        pwd = document.getElementById("pwd").value.toString();
    var data =encodeFormData({
        tel : tel,
        pwd : pwd
    }) ;
    xhr.onreadystatechange = function(){
        switch(xhr.readyState){
            case 0 : 
                console.log(0,"未初始化....");
                break;
            case 1 : 
                console.log(1,"請求參數(shù)已準(zhǔn)備，尚未發(fā)送請求...");
                break;
            case 2 : 
                console.log(2,"正在添加....");
                break;
            case 3 : 
                console.log(3,"已接收數(shù)據(jù)長度："+xhr.responseText.length );
                break;
            case 4 : 
                console.log(4,"響應(yīng)全部接受完畢");
                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                    databox.innerHTML = xhr.responseText;
                }else{
                    databox.innerHTML = "error:" + xhr.status;
                }
                break;
        }
    }
    xhr.open("post","/member/register");
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
    xhr.send(data);

};

那么post請求需要注意兩個地方：

第一：

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

表單數(shù)據(jù)編碼格式有一個正式的MIME類型：pplication/x-www-form-urlencoded
當(dāng)使用post方式提交這種順序表單時，必須設(shè)置Content-Type請求頭為這個值來模仿表單數(shù)據(jù)的提交。

第二：

var data =encodeFormData({
    tel : tel,
    pwd : pwd
}) ;

HTTP POST請求包含一個請求主體，它包含了客戶端發(fā)送給服務(wù)器的數(shù)據(jù)，比如：

這里為了簡單直接明文傳輸了。 這個數(shù)據(jù)比較少和簡單，我們也可以直接修改上面的send()方法發(fā)送數(shù)據(jù)的方式如下：

xhr.send("tel="+tel+"&pwd="+pwd);

但是當(dāng)這個表單數(shù)據(jù)的比叫多而復(fù)雜時，再以這種字符串拼接的方式傳遞的話比較容易出錯，不好維護，所以我們需要封裝一個這樣的方法幫助我們將我們的數(shù)據(jù)拼接成這樣的格式：

function encodeFormData(data){
    if(!data) return "";
    var pairs = [];
    for(var name in data){
        if(!data.hasOwnProperty(name)) continue;
        if(typeof data[name] === "function") continue;
        var value = data[name].toString();
        name = encodeURIComponent(name.replace("%20","+"));
        value = encodeURIComponent(value.replace("%20","+"));
        pairs.push(name+"="+value);
    }
    return pairs.join("&");
}

get還是post，其實這和ajax是沒有關(guān)系的了，主要還是取決于這兩個請求方式的特點：

通過上面的兩個ajax的實例，我們可以看出get請求和post請求的一些特點：

get請求：

GET 請求可被緩存

GET 請求保留在瀏覽器歷史記錄中

GET 請求可被收藏為書簽

GET 請求不應(yīng)在處理敏感數(shù)據(jù)時使用

GET 請求有長度限制

GET 請求只應(yīng)當(dāng)用于取回數(shù)據(jù)

post請求：

POST 請求不會被緩存

POST 請求不會保留在瀏覽器歷史記錄中

POST 不能被收藏為書簽

POST 請求對數(shù)據(jù)長度沒有要求

那，有了這個比較，你應(yīng)該知道什么時候用get什么時候用post了。

ajax默認(rèn)的都是異步的請求，我們上面的兩個實例也是用的異步請求，那沒什么不用同步呢？同步和異步有什么特點？

同步請求：

發(fā)送器請求-->等待結(jié)果-->操作結(jié)果-->繼續(xù)還行后面的代碼 ，這是同步請求的大致過程，由于客服端的javascript是單線程的，也就是說我們必須等待結(jié)果完全接收完畢之后才能繼續(xù)執(zhí)行后面的代碼，嚴(yán)格按照步驟一步一步來，它通常會導(dǎo)致整個瀏覽器的UI阻塞（白屏等），如果連接服務(wù)器響應(yīng)很慢，那么用戶瀏覽器將凍結(jié)，用不不能進行其他操作。
如果我們發(fā)起一個同步請求，chrome瀏覽器會給你這樣一個警告：Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user"s experience. For more help, check http://xhr.spec.whatwg.org/. 意思就是同步請求不利于用戶體驗。

異步請求：

發(fā)送器請求-->繼續(xù)還行后面的代碼-->響應(yīng)結(jié)果接收完畢了-->操作結(jié)果，這是同步請求的大致過程。
可以看到，異步請求在發(fā)送請求之后沒有等待結(jié)果的返回而是繼續(xù)執(zhí)行后面的代碼，也就是說在結(jié)果返回之前用戶可以操作其他東西或是看到其他UI，用戶體驗良好。但是有些情況下我們還是得用同步請求。