Ajax是Asynchronous JavaScript and XML的縮寫客年，這一技術能夠向服務器請求額外的數(shù)據(jù)而無需卸載整個頁面龙填，會帶來良好的用戶體驗漾抬。傳統(tǒng)的HTTP請求流程大概是這樣的潮饱，
1谍婉、瀏覽器向服務器發(fā)送請求
2更啄、服務器根據(jù)瀏覽器傳來數(shù)據(jù)生成response
3稚疹、服務器把response返回給瀏覽器
4、瀏覽器刷新整個頁面顯示最新數(shù)據(jù)
5祭务、這個過程是同步的内狗，順序執(zhí)行
一個簡單的AJAX：
var request = new XMLHttpRequest();
request.onload = function(){
console.log(this.responseText);
}
request.open("GET","/xxx");
request.send();
AJAX 在瀏覽器與 Web 服務器之間使用異步數(shù)據(jù)傳輸（HTTP 請求）從服務器獲取數(shù)據(jù)
這里的異步是指脫離當前瀏覽器頁面的請求、加載等單獨執(zhí)行义锥，這意味著可以在不重新加載整個網(wǎng)頁的情況下柳沙，通過JavaScript發(fā)送請求、接受服務器傳來的數(shù)據(jù)拌倍，然后操作DOM將新數(shù)據(jù)對網(wǎng)頁的某部分進行更新赂鲤，使用Ajax最直觀的感受是向服務器獲取新數(shù)據(jù)不需要刷新頁面等待了
XMLHttpRequest 對象
Ajax的核心是JavaScript對象XmlHttpRequest噪径，這個對象為向服務器發(fā)送請求和解析服務器響應提供了流暢的接口。XmlHttpRequest可以使用JavaScript向服務器提出請求并處理響應数初，而不阻塞用戶找爱。
XHR對象由IE5率先引入，在IE5中XHR對象是通過MSXML庫中一個ActiveX對象實現(xiàn)的泡孩，根據(jù)IE版本不同可能會遇到不同版本XHR對象车摄，而IE7+與其它現(xiàn)代瀏覽器均支持原生的XHR對象，在這些瀏覽器中我們只需使用XMLHttpRequest構造函數(shù)就可以構造XHR對象仑鸥，因此一個瀏覽器兼容的創(chuàng)建XHR對象的函數(shù)寫法大概是這個樣子
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對象時要調(diào)用的第一個方法是open方法
xhr.open('get', 'default.html', true)
這段代碼會針對default.html頁面發(fā)送get請求，關于這段代碼有三點需要注意：
1锈候、URL是相對于當前頁面的路徑薄料，也可以使用絕對路徑
2、調(diào)用open方法并不會真正的發(fā)送請求泵琳，而是初始化一個請求準備發(fā)送
3摄职、只能向同一個域中使用相同協(xié)議和端口的URL發(fā)送請求，否則會因為安全原因報錯（同源策略）
要想把請求發(fā)往服務器需要調(diào)用send方法获列，send方法接受一個參數(shù)谷市，參數(shù)是請求主體要發(fā)送的數(shù)據(jù)，如果不需要發(fā)送數(shù)據(jù)則傳入null击孩，在調(diào)用send方法之后請求被發(fā)往服務器迫悠，如下
xhr.send(null);
請求發(fā)往服務器，服務器根據(jù)請求生成響應（Response）巩梢，傳回給XHR對象创泄，在收到響應后相應數(shù)據(jù)會填充到XHR對象的屬性，有四個相關屬性會被填充：
1括蝠、responseText：作為響應主體被返回的文本
2鞠抑、responseXML：如果響應內(nèi)容的類型是”text/xml”或”application/xml”，這個屬性將保存包含著相應數(shù)據(jù)的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
事件
我們可以利用這個事件檢查每次readyState變化的值募谎，當為4的時候表示所有數(shù)據(jù)準備就緒，有一點我們需要注意：必須在open方法之前指定onreadtstatechange事件處理程序
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();
我們可以在接受響應之前調(diào)用abort方法取消異步請求：
xhr.abort();
HTTP Header
每個HTTP請求都會帶有Header信息阴汇，XHR對象也提供了操作這請求Header和響應Header信息的方法数冬，在默認情況下，發(fā)送HTTP請求還會發(fā)送下列頭部信息
1搀庶、Accept：瀏覽器能夠處理的內(nèi)容類型
2拐纱、Accept-Charset：瀏覽器能夠處理的字符集
3、Accept-Encoding：瀏覽器能夠處理的壓縮編碼
4哥倔、Accept-Language：瀏覽器當前設置的語言
5秸架、Connection：瀏覽器與服務器的連接類型
6、Cookie：當前頁面的cookie
7咆蒿、Referer:發(fā)送請求的頁面的URI
可以使用setRequestHeader方法設置自定義的請求Header信息东抹，這個方法接受兩個參數(shù)：
1、頭部字段的名稱
2沃测、頭部字段的值
要想成功發(fā)送頭部信息缭黔，必須在調(diào)用open方法之后，調(diào)用send方法之前調(diào)用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ā)送額外的數(shù)據(jù)，在沒有自定義信息的情況下我們可以得到默認response header
1附迷、Date：響應時間
2惧互、Server：服務器類型
3、Very：驗證Encoding類型
4喇伯、X-Power-By：語言
GET和POST請求
GET請求是最常見的請求類型喊儡，用于向服務器查詢信息，必要時可以將查詢字符串參數(shù)放在URL尾部發(fā)送給服務器艘刚，如果參數(shù)有特殊字符必須正確編碼管宵。我們上面使用的例子都是使用GET請求，非常簡單攀甚，向服務器詢問數(shù)據(jù)箩朴，然后處理數(shù)據(jù)。
POST請求用于把數(shù)據(jù)作為主體向服務器提交秋度，POST請求主體可以包含多種格式數(shù)據(jù)炸庞，在open方法第一個參數(shù)傳入”POST”就可以初始化一個POST請求。發(fā)送POST請求第二步就是向send方法傳輸數(shù)據(jù)參數(shù)荚斯，參數(shù)可以是xml或者字符串埠居，json等查牌。
相關知識可以看看ASP.NET中使用Ajax
