什麼都不說，直接上兩段程式碼，解開ajax的面紗，來看看原生js的ajax是如何工作的。

//ajax傳送GET請求
function ajaxGet(url,callback){
	//第一步：建立XMLHttpRequest物件
	var request = new XMLHttpRequest();
	//第二步：指定請求路徑和方式
	request.open("GET",url);
	//第三步：繫結請求狀態發生改變時的處理函式
	request.onreadystatechange = function(){
		//第四步：指定請求成功時執行內容
		if(request.readyState === 4 && request.status === 200){
			var type = request.getRsponseHeader("Content-Type");
			if(type.indexof("xml") !== -1 && request.responseXML){
				callback(request.responseXML);
			}else if(type === "application/json"){
				callback(JSON.parse(request.responseText));
			}else{
				callback(request.responseText);
			}
		}
	}
	//正式傳送ajax請求主體(備註：沒有請求主體，即請求引數，可傳null或者省略)
	request.send(null);
}
 

在ajax非同步請求中，get和post請求用的比較多，所以本文就以這兩種請求方式進行歸納。如上面一段程式碼所示，一個完整的原生JavaScript非同步請求也就這麼幾步。只是在請求和響應時的各種資料編碼格式的處理也就是請求頭的處理要留心一些。其實在大部分的ajax請求時，你只需重點關注一下“Content-Type”這一項就行。上面給的是一個Get請求方式的例子

下面再附上一個POST方式的非同步請求，方便比較。

//使用JSON編碼主體傳送一個http post請求
function ajaxJson(url,data,callback){
	//第一步：建立XMLHttpRequest物件
	var request = new XMLHttpRequest();
	//第二步：指定請求路徑和方式
	request.open("POST",url);
	//第三步：繫結請求狀態發生改變時的處理函式
	request.onreadystatechange = function(){
		//第四步：指定請求成功時執行內容
		if(request.readyState === 4 && request.status === 200){
			var type = request.getRsponseHeader("Content-Type");
			if(type.indexof("xml") !== -1 && request.responseXML){
				callback(request.responseXML);
			}else if(type === "application/json"){
				callback(JSON.parse(request.responseText));
			}else{
				callback(request.responseText);
			}
		}
	};
	//第五步：設定請求頭資訊，指定請求主體的編碼
	request.setRequestHeader("Content-Type","applicaton/json");
	//第六步：正式傳送ajax請求主體
	request.send(JSON.stringify(data));
}
 

仔細觀察兩種方式，可以發現，POST方式指定多了兩點操作：1.設定請求頭資訊。2.傳送的請求主體不再是null值。
現在兩種方式的請求都給了一個還不錯的例子。

那麼接下來就正式總結一下我所理解的ajax吧。

ajax是一種非同步請求資料的方式，在與伺服器進行資料互動時不會導致頁面過載，只是區域性重新整理。

ajax請求資料的第一步就是例項化XMLHttpRequest物件(以下簡稱XHR)，這點非常簡單，只是需要注意一點，在IE7之前有點不相容（解決辦法請自行查詢）。

建立完XHR之後，就是呼叫XHR的open()方法指定請求方法(如：GET，POST等)和請求地址。

如果請求需要設定相關頭資訊

接下來我會再總結一下在ajax中的一些注意點，當做筆記以備檢視。

1.open()方法的第一個引數指定HTTP請求方式，不區分大小寫，但通常大家用大寫字母來匹配HTTP協議。

2.GET請求絕對沒有主體，所以應該傳遞null或省略這個引數。

3.POST請求通常是有請求主體的，同時由於請求引數的格式不同，所以應該匹配使用setRequestHeader()指定“Content-type”頭資訊。(這一點非常重要，因為當我們用不同的格式，比如：json，XML，純文字，表單等，提交請求資料時伺服器會根據我們指定的頭資訊去解析請求資料。常用的json和表單應該設定的頭資訊上文提到過，請自行查詢。)

4.用表單提交請求時，我們應該序列化一下表單資料。序列化的方法有很多，比如formData()方法不過IE對的的相容性不好，jQuery的serialize()方法等。

5.無論伺服器響應的內容型別是什麼，響應主體的內容都會儲存到XHR物件的responseText和responseXML屬性中，對於非XML格式的資料而言，responseXML的屬性值將會是null。

6.最好在open方法之前指定onreadystatechange事件處理程式，這樣能保證更好的瀏覽器相容性(當然只是建議，我自己就不喜歡這條)。

7.在onreadystatechange事件處理函式中，不建議使用this去指代XHR物件，而是儘量直接使用XHR物件。
 

就這麼多吧，如果看官有更好的關於原生JavaScript的ajax總結請不吝留言。