原生AJAX入門講解（含執行個體）

相對於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的封裝。

原文發佈於Mr.Think的部落格：http://mrthink.net/ajax-starter-xmlhttpreq/ 轉載請註明