相對於jQuery、YUI以及其他一些類庫的AJAX封裝，原生JS的AJAX顯得那麼的尷尬，兼容性不好，要記很多的方法屬性，調用不便捷，代碼臃腫…但我還是想說，原生JS才是最根本最底層的知識（雖然實際項目中我也是以jQuery AJAX為主，為什麼？高效！），求木之長者，必固其根本。
什麼是AJAX? 它的優點劣勢是什麼？
Asynchronous JavaScript and XML（異步JavaScript和XML），是一種創建交互式網頁應用的網頁開發技術。簡單的說它是多種技術的組合，目的就是讓前台的數據交互變得更快捷，不用刷新頁面就可以完成數據的更新。關於它的概念，止於此。想瞭解更多，請前往：
http://zh.wikipedia.org/zh/AJAX
優點很明顯，利於用戶體驗，不會打斷用戶的操作，在不刷新頁面的情況下更新內容，減小服務器壓力也是它很硬性的一個優點；而缺點，除了倍受追捧的SEO問題，安全問題、前進後退（這個雖然可以用其他方法解決，但AJAX本身的機制還是沒變）、破壞程序的異常機制以及對新興手持設備支持不完美的問題都是它現存的一些缺點。人無完人，AJAX也是如此，我們並不能因為它有缺點而摒棄它。
什麼地方需要AJAX?
其實這是一個太寬泛的問題，各人各項目都有不同的用處，依我的經驗與理解，AJAX應該用於小面積更新數據而不希望整個頁面刷新的情況下使用。比如對用戶名或者註冊郵箱等數據判斷、內容選項卡內容、彈出的登錄註冊窗口以及用戶提交信息後的反饋信息等等。
實踐出真知！
崇尚思考加實踐，我堅信這是深入任何一門技術的必備法寶。下面，我就以一個常用的驗證用戶是否使用的實例，淺嘗輒止的講解一下基礎的AJAX。 查看樣例演示
驗證用戶名這種數據判斷，不用多說了，會一點點前端的人都知道是必須的。最傳統的模式可能是輸入信息，然後用戶點提交後alert出一個窗口，告訴用戶XXX用戶名已被註冊，請重新輸入！我討厭極醜的alert框！我想大多用戶也是一樣。此時，AJAX就可以華麗登場了。當用戶輸入完名字後，在表單外任何地方點一下（失去焦點），AJAX就迅速把用戶輸入的信息反饋到服務器端判斷，並迅速返回一個信息告知用戶輸入的暱稱是否可用。如此，我們需要一個前台的輸入表單，代碼如下：
另外，我們還需要一個判斷輸入暱稱是否存在的後端頁面（本文以PHP為例，這部分不用細究）:
...
if(isset($_GET['entryname'])){
$entryname=$_GET['entryname'];
}else{
$entryname='DATA NULL';
}
$sql=sprintf("select * from i_test_ajax where nickname='%s'",$entryname);
$res=$iajax->query($sql);
//sleep只是為了展示readState==1時的效果
sleep(1);
if(($res->num_rows)>0){
echo "抱歉！此暱稱已存在 :(";
}else{
echo "恭喜！此暱稱可註冊 :)";
}
...
如此，萬事俱備，只欠東風，剩下的就交給AJAX來處理了。
XMLHttpRequest，不得不提的一個對象，AJAX最核心也是最底層的對象。可悲哀的是，它是W3C的一個標準，但微軟IE一直很自我（微軟IE）。怎麼辦？當然是用一個方法和諧掉它們。微軟IE支持ActiveXObject(『Microsoft.XMLHTTP』)對象，這樣就簡單了：
//兼容的XMLHttpRequest對像
IXHR: function(){
if(window.ActiveXObject){
XHR=new ActiveXObject('Microsoft.XMLHTTP');
}else if(window.XMLHttpRequest){
XHR=new XMLHttpRequest();
}else{
return null;
}
}
兼容的XMLHttpRequest對像實現了，接下來寫一個簡單的onblur事件，即當輸入值後，表單失去焦點後開始判斷並迅速回饋一個信息到前台。代碼如下：
//觸發焦點時執行
document.forms['iform'].nickname.onblur = function(){
//輸入的值
var val=document.forms['iform'].nickname.value;
//對用戶名的判斷
if(!/^[a-zA-Z0-9_]{3,16}$/.test(val)){
alert('請輸入3~16位由英文、數字、下劃線組成的暱稱！');
return false;
}
//初始化一下XHR
iBase.IXHR();
//原來需要新打開的判斷頁面用GET使用異步
XHR.open('GET','/demo/ajax/iajax20110306_query.php?entryname='+val,true);
//與readyState屬性有關，當readyState改變時它才會觸發
XHR.onreadystatechange=returnFun;
//異步處理完成後發送數據出去（比如某些需要在焦點事件後再執行的）
XHR.send(null);
}
解釋一下AJAX部分的代碼。iBase.IXHR()，初始化XHR，以保證XMLHttpRequest對象的兼容。接下來，通過以GET的方式，異步發送到/demo/ajax/iajax20110306_query.php頁面進行驗證。有人會問什麼是GET，GET是從服務器上請求數據，GET方法就是把數據參數隊列加到一個URL上，值和表單是一一對應的，比如本文的entryname=val。這個概念可能屬於後台程序的範疇，不在此細說。然後，我們需要用到一個onreadystatechange事件屬性，這個屬性是用來存儲函數（或函數名），每當readyState屬性改變時，就會調用該函數，即本文中的returnFun；最後，我們還要發送一個數據到服務器，send屬性一般用於數據交換,而本文只是一個簡單的驗證判斷，所以，send一個空值。
基本的判斷與數據發送完成了，接下來還剩一個關鍵的信息獲取，即returnFun。先看代碼：
function returnFun(){
//當send()已調用，正在發送請求時，顯示Loading...
if(XHR.readyState==1){
iBase.Id('tips').innerHTML='Loding...';
}else if(XHR.readyState==4){
//當響應內容解析完成，可以調用時
//更縝密，再判斷一下status是否成功
if(XHR.status==200){
//responseText為返回的文本
iBase.Id('tips').innerHTML=XHR.responseText;
}
//使用完請銷毀，避免內存洩露
XHR=null;
}
}
此函數是用來通過判斷readyState及status狀態也及時反饋給用戶相應的提示信息。readyState有五種狀態：
0 (未初始化)： (XMLHttpRequest)對像已經創建，但還沒有調用open()方法；
1 (載入)：已經調用open() 方法，但尚未發送請求；
2 (載入完成)： 請求已經發送完成；
3 (交互)：可以接收到部分響應數據；
4 (完成)：已經接收到了全部數據，並且連接已經關閉。
如此一來，你應該就能明白readyState的功能，而status實際是一種輔狀態判斷，只是status更多是服務器方的狀態判斷。關於status，由於它的狀態有幾十種，我只列出平時常用的幾種：
100——客戶必須繼續發出請求
101——客戶要求服務器根據請求轉換HTTP協議版本
200——成功
201——提示知道新文件的URL
300——請求的資源可在多處得到
301——刪除請求數據
404——沒有發現文件、查詢或URl
500——服務器產生內部錯誤
至此，一個簡單的AJAX驗證實例就完成了： 查看樣例演示
關於AJAX的基礎介紹與實例就這麼多，關鍵還是在於自己的實踐與思考。其實這其中涉及知識並不複雜，若有後端程序的基礎，學起AJAX會更加容易，關鍵是要想明白其中的邏輯關係。有興趣的話，可以自己寫一個不刷新頁面加載新內容的AJAX，或者研究一下jQuery中關於AJAX的封裝。