我們通過前兩篇文章的學習，已經大致掌握了Ajax的實現方法，同時也可以對比出兩種方式的優劣。但是我們還是沒有搞清楚真正的ajax的實現原理，以及最原始的，未經過封裝的ajax是什么樣的，今天我們一起來探索這些之前不了解的地方。
首先在上一篇也提到過，Ajax是異步的Javascript和XML，那么聰明的你應該已經猜到，js腳本是必不可少的。我們在這里先引入一個瀏覽器對象：XMLHttpRequest，可能大家對這個對象比較陌生，那么我們就先從它的屬性開始了解。它主要有三個屬性：onreadystatechange 屬性、readyState 屬性和responseText 屬性，從名字上我們大致可以看出，第一個屬性，也就是onreadystatechange 是用來在狀態變更的時候處理服務器響應的函數，第二個屬性是保存服務請求的狀態（這里可能的值為0-4之間），第三個屬性是獲取服務器響應后的信息。
介紹完三個屬性之后，我們開始進入正題，和所有的過程一樣，我們需要先初始化XMLHttpRequest這個對象，但是由於瀏覽器的問題，在不同的瀏覽器初始化時，需要進行不同的方式：
<script type="text/javascript">
var xmlhttp;
function checkUser() {
xmlhttp = null;
var Name = document.getElementById("txtId").value;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}//這里適用於火狐，谷歌還有高版本IE瀏覽器
else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHttp");
}//這里適用於低版本IE，如IE4，IE5等等
xmlhttp.open("GET", "Handler1.ashx?name=" + Name, true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
document.getElementById("lblShow").innerHTML = xmlhttp.responseText;
}
}
}
xmlhttp.send(null);
}
</script>
從代碼中我們再一次驗證了微軟當年的“不走尋常路”，說句題外話，做了這么久的B/S，發現兼容性真是個頭疼的問題，尤其是IE，每個版本之間兼容性都不一致，寫Js的時候苦不堪言，推薦使用JQuery，它的兼容性非！常！好！在初始化對象之后，我們便開始了發送請求之旅，這次我們依然是向ashx提交並進行處理。xmlhttp.open("GET", "Handler1.ashx?name=" + Name, true);這句代碼中有3個參數，第一個參數用於指定get提交或是post提交，這里需要注意大寫；第二個參數是要提交的url，第三個參數指定是否為異步模式。接下來我們需要處理服務端狀態改變后的函數，先判斷服務器響應的狀態信息：0為請求未初始化（在調用 open() 之前），1為請求已提出（調用 send() 之前），2為請求已發送（這里通常可以從響應得到內容頭部），3為請求處理中（響應中通常有部分數據可用，但是服務器還沒有完成響應），4為請求已完成（可以訪問服務器響應並使用它）。
我們知道服務器是個大忙人，它要處理很多東西，如果打斷了可不好，所以我們必須等待它的狀態為4，才能進行下一步的處理，於是乎，在4之后判斷響應是否為200（這里屬於Http協議，不再詳細闡述，有興趣可以找下資料），然后再處理服務器的響應文本。好的，介紹完原理之后呢，我們就開始運行：
依然輸入我們親愛的豆豆。。。由前兩篇的數據庫我們“已經知道”豆豆這個昵稱是存在的，所以我們沒猜到過程，就已經猜到了結果，嘿嘿。接下來我們看看服務器端：
我們發現已經成功進入了斷點，表明我們之前的請求已經成功！偶也，因為這次的方法比前兩次都要復雜，所以我也是嘗試了好幾次，比較興奮一些。注釋掉的部分是上一篇中處理的方法，我記得ajax配合ashx使用時，貌似一次請求就要對應一個ashx文件（這里不確定，歡迎大家指正），真正的干貨是下面沒被注釋掉的部分，獲取傳進來的參數，然后去對比。
因為我們已經“預知”了結果，所以出現這個情況也是意料之中，不過也表明我們今天的ajax實現方法已經成功，再來一個沒注冊的圖：
好了，我們今天的教程到此為止，Ajax其實就是這樣的原理，發送請求-等待響應-響應完成-后續處理，只是它可以在整個頁面不回發的情況下單獨進行處理，所以受到了人民的青睞。Ajax系列已經完結，不知道各位是否有收獲呢？如果還有什么疑問或者想法，還可以在評論區中提出來，大家一起討論。最后再給大家一個建議，實現的時候最好使用第二種jQuery+ashx的方式實現，簡單暴力流！希望大家喜歡，謝謝！