Ajax是Asynchronous JavaScript and XML的縮寫，這一技術能夠向服務器請求額外的數據而無需卸載整個頁面，會帶來良好的用戶體驗。傳統(tǒng)的HTTP請求流程大概是這樣的，

1、瀏覽器向服務器發(fā)送請求
2、服務器根據瀏覽器傳來數據生成response
3、服務器把response返回給瀏覽器
4、瀏覽器刷新整個頁面顯示最新數據
5、這個過程是同步的，順序執(zhí)行

一個簡單的AJAX：

var request = new XMLHttpRequest();
request.onload = function(){
  console.log(this.responseText);
}
request.open("GET","/xxx");
request.send();

AJAX 在瀏覽器與 Web 服務器之間使用異步數據傳輸（HTTP 請求）從服務器獲取數據

這里的異步是指脫離當前瀏覽器頁面的請求、加載等單獨執(zhí)行，這意味著可以在不重新加載整個網頁的情況下，通過JavaScript發(fā)送請求、接受服務器傳來的數據，然后操作DOM將新數據對網頁的某部分進行更新，使用Ajax最直觀的感受是向服務器獲取新數據不需要刷新頁面等待了

XMLHttpRequest 對象

Ajax的核心是JavaScript對象XmlHttpRequest，這個對象為向服務器發(fā)送請求和解析服務器響應提供了流暢的接口。XmlHttpRequest可以使用JavaScript向服務器提出請求并處理響應，而不阻塞用戶。

XHR對象由IE5率先引入，在IE5中XHR對象是通過MSXML庫中一個ActiveX對象實現的，根據IE版本不同可能會遇到不同版本XHR對象，而IE7+與其它現代瀏覽器均支持原生的XHR對象，在這些瀏覽器中我們只需使用XMLHttpRequest構造函數就可以構造XHR對象，因此一個瀏覽器兼容的創(chuàng)建XHR對象的函數寫法大概是這個樣子

function createXHR(){
var xhr = null;
try {
    // Firefox, Opera 8.0+, Safari，IE7+
    xhr = new XMLHttpRequest();
}
catch (e) {
    // Internet Explorer
    try {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
        try {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e) {
            xhr = null;
        }
    }
}
return xhr;
}

XHR對象用法

XHR對象有兩個重要方法 open與send

在使用XHR對象時要調用的第一個方法是open方法

xhr.open('get', 'default.html', true)

這段代碼會針對default.html頁面發(fā)送get請求，關于這段代碼有三點需要注意：

1、URL是相對于當前頁面的路徑，也可以使用絕對路徑
2、調用open方法并不會真正的發(fā)送請求，而是初始化一個請求準備發(fā)送
3、只能向同一個域中使用相同協(xié)議和端口的URL發(fā)送請求，否則會因為安全原因報錯（同源策略）

要想把請求發(fā)往服務器需要調用send方法，send方法接受一個參數，參數是請求主體要發(fā)送的數據，如果不需要發(fā)送數據則傳入null，在調用send方法之后請求被發(fā)往服務器，如下

xhr.send(null);

請求發(fā)往服務器，服務器根據請求生成響應（Response），傳回給XHR對象，在收到響應后相應數據會填充到XHR對象的屬性，有四個相關屬性會被填充：

1、responseText：作為響應主體被返回的文本
2、responseXML：如果響應內容的類型是”text/xml”或”application/xml”，這個屬性將保存包含著相應數據的XML文檔
3、status：響應的HTTP狀態(tài)（200,404,500等）
4、statusText：HTTP狀態(tài)說明

在收到響應后第一步是檢查響應狀態(tài)，確保響應是否成功返回（狀態(tài)為200），如果成功responseText和responseXML可以被訪問，為了確保響應有效，我們可以這樣檢查狀態(tài)碼

xhr.open('get', 'default.html, false'); //準備同步請求
xhr.send();
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ 
    //do something
}else{ 
    //error handler
}

上面代碼在發(fā)送同步請求的時候沒問題，只有得到響應后才會執(zhí)行檢查status語句
但是在異步請求時，JavaScript會繼續(xù)執(zhí)行，不等生成響應就檢查狀態(tài)碼，這樣我們不能保證檢查狀態(tài)碼語句是在得到響應后執(zhí)行（實際上也幾乎不可能，服務器再快一個HTTP請求也不會快過一條JavaScript執(zhí)行速度）
這時候我們可以檢查XHR對象的readyState
屬性，該屬性表示請求/響應過程中的當前活動階段，每當readyState值改變的時候都會觸發(fā)一次onreadystatechange
事件

var xhr =createXHR();
xhr.onreadystatechange = function () {
     if (xhr.readyState == 4 && xhr.status == 200) { 
        setContainer('Original Ajax: ' + xhr.responseText);
     }
}
xhr.open('get', 'ajax.aspx?action=getTime', true);
xhr.send();

我們可以在接受響應之前調用abort方法取消異步請求：

xhr.abort();

HTTP Header

每個HTTP請求都會帶有Header信息，XHR對象也提供了操作這請求Header和響應Header信息的方法，在默認情況下，發(fā)送HTTP請求還會發(fā)送下列頭部信息

1、Accept：瀏覽器能夠處理的內容類型
2、Accept-Charset：瀏覽器能夠處理的字符集
3、Accept-Encoding：瀏覽器能夠處理的壓縮編碼
4、Accept-Language：瀏覽器當前設置的語言
5、Connection：瀏覽器與服務器的連接類型
6、Cookie：當前頁面的cookie
7、Referer:發(fā)送請求的頁面的URI

可以使用setRequestHeader方法設置自定義的請求Header信息，這個方法接受兩個參數：

1、頭部字段的名稱
2、頭部字段的值

要想成功發(fā)送頭部信息，必須在調用open方法之后，調用send方法之前調用setRequestHeader方法。

function getTime() {
    var xhr = createXHR();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            setContainer('Original Ajax: ' + xhr.responseText);
        }
    }
    xhr.open('get', 'ajax.aspx?action=getTime', true);
    xhr.setRequestHeader(myHeader,myValue)
    xhr.send();
}

我們可以在服務器端接收自定義Header然后做響應操作。同時在服務器端也可以向瀏覽器發(fā)送額外的數據，在沒有自定義信息的情況下我們可以得到默認response header

1、Date：響應時間
2、Server：服務器類型
3、Very：驗證Encoding類型
4、X-Power-By：語言

GET和POST請求

GET請求是最常見的請求類型，用于向服務器查詢信息，必要時可以將查詢字符串參數放在URL尾部發(fā)送給服務器，如果參數有特殊字符必須正確編碼。我們上面使用的例子都是使用GET請求，非常簡單，向服務器詢問數據，然后處理數據。

POST請求用于把數據作為主體向服務器提交，POST請求主體可以包含多種格式數據，在open方法第一個參數傳入”POST”就可以初始化一個POST請求。發(fā)送POST請求第二步就是向send方法傳輸數據參數，參數可以是xml或者字符串，json等。

相關知識可以看看ASP.NET中使用Ajax