原生AJAX入門講解（含實例）

   相對於jQuery、YUI以及其餘一些類庫的AJAX封裝，原生JS的AJAX顯得那麼的尷尬，兼容性很差，要記不少的方法屬性，調用不便捷，代碼臃腫...但我仍是想說，原生JS纔是最根本最底層的知識（雖然實際項目中我也是以jQuery AJAX爲主，爲何？高效！），求木之長者，必固其根本。 什麼是AJAX? 它的優勢劣勢是什麼？ Asynchronous JavaScript and XML（異步JavaScript和XML），是一種建立交互式網頁應用的網頁開發技術。簡單的說它是多種技術的組合，目的就是讓前臺的數據交互變得更快捷，不用刷新頁面就能夠完成數據的更新。關於它的概念，止於此。ajax 優勢很明顯，利於用戶體驗，不會打斷用戶的操做，在不刷新頁面的狀況下更新內容，減少服務器壓力也是它很硬性的一個優勢；而缺點，除了倍受追捧的SEO問題，安全問題、前進後退（這個雖然能夠用其餘方法解決，但AJAX自己的機制仍是沒變）、破壞程序的異常機制以及對新興手持設備支持不完美的問題都是它現存的一些缺點。人無完人，AJAX也是如此，咱們並不能由於它有缺點而摒棄它。 什麼地方須要AJAX? 其實這是一個太寬泛的問題，各人各項目都有不一樣的用處，依個人經驗與理解，AJAX應該用於小面積更新數據而不但願整個頁面刷新的狀況下使用。好比對用戶名或者註冊郵箱等數據判斷、內容選項卡內容、彈出的登陸註冊窗口以及用戶提交信息後的反饋信息等等。 實踐出真知！ 崇尚思考加實踐，我堅信這是深刻任何一門技術的必備法寶。下面，我就以一個經常使用的驗證用戶是否使用的實例，淺嘗輒止的講解一下基礎的AJAX。 驗證用戶名這種數據判斷，不用多說了，會一點點前端的人都知道是必須的。最傳統的模式多是輸入信息，而後用戶點提交後alert出一個窗口，告訴用戶XXX用戶名已被註冊，請從新輸入！我討厭極醜的alert框！我想大多用戶也是同樣。此時，AJAX就能夠華麗登場了。當用戶輸入完名字後，在表單外任何地方點一下（失去焦點），AJAX就迅速把用戶輸入的信息反饋到服務器端判斷，並迅速返回一個信息告知用戶輸入的暱稱是否可用。如此，咱們須要一個前臺的輸入表單，代碼以下：

1 2 3

< form  name="iform" method="post" action="#"> < p >< label  for="nickname">用戶名：</ label >< input  placeholder="在這裏輸入用戶名" id="nickname" name="nickname" type="text">< span  id="tips"></ span ></ p > </ form >

另外，咱們還須要一個判斷輸入暱稱是否存在的後端頁面（本文以PHP爲例，這部分不用細究）:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

... 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')對象，這樣就簡單了：

1 2 3 4 5 6 7 8 9 10

//兼容的XMLHttpRequest對象 IXHR: function (){      if (window.ActiveXObject){              XHR= new  ActiveXObject( 'Microsoft.XMLHTTP' );          } else  if (window.XMLHttpRequest){              XHR= new  XMLHttpRequest();          } else {              return  null ;          } }

兼容的XMLHttpRequest對象實現了，接下來寫一個簡單的onblur事件，即當輸入值後，表單失去焦點後開始判斷並迅速回饋一個信息到前臺。代碼以下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

//觸發焦點時執行 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。先看代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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