JavaScript實現Ajax總結_AJAX相關

ajax應用非常普及，ajax的優點大家都知道，具體就不多說了，其缺點還真不少，比如破壞瀏覽器的back功能，同一個url開啟的介面並不是完全相同，還有安全效能等方面，至於有這麼多的缺點，也阻止不了大家使用ajax的步伐~~~

這裡以表單為例說一下實現Ajax的步驟：

1.先從表單中擷取我們需要的資料

2.然後建立相應的URL

3.設定onreadystatechange函數

4.開啟串連

5.發送請求

以上就是Ajax的實現步驟，接下來簡單分步總結下。

首先是關於xrh對象的建立。

function creatXhr(){ var xhr=null; if(window.XMLHttpRequest){  xhr=new XMLHttpRequest(); }else{  xhr=new ActiveXObject("Microsoft.xhr"); }}

稍完整的可以這樣寫：

function creatXhr(){ var xhr=null; try{  xhr=new ActiveXObject("Msxml2.XMLHTTP"); }catch (e){  try {   xhr=new ActiveXObject("Microsoft.XMLHTTP");  }catch (e2){   xhr=false;  } } if(!xmlHttp && typeof XMLHttpRequest != 'undefined') {  xhr=new XMLHttpRequest(); }}

以上對ie和非ie瀏覽器多做了相容處理。

然後就該發送Ajax請求了，下面以一個表單項country為例：

function callReqest(){ var country=document.getElementById('country').value; if((country==null)||(country==''))  return; var url='example.php?country='+encodeURIComponent(country); xhr.onreadystatechange=update; xhr.open('GET',url,true); xhr.send(null);}

以上擷取了一個country表單項， onreadystatechange 函數是readystate發生變化時觸發的事件，可以以此來判斷是否需要發生動作。

onreadystatechange 函數如下：

function onreadystatechange(){ if((xhr.onreadystatechange==4)&&((xhr.state==200)||((xhr.state>200)&&(xhr.state<300)))){  document.getElementById('countryCode').value=xhr.responseText; }}

在 onreadystatechange 等於4的時候，說明資源已然完全下載到用戶端了，可以使用了，同時查看狀態代碼，在200到300之間，左閉右開，即可進行重新整理，這裡只是簡單的將responseText給了一個表單項，當然也可以返回XML等相關資料，相關內容可查看其他相關介紹。

最後，至於觸發Ajax，可以在表單的country裡面添加onChange事件，這樣使用者在輸入表單時就會觸發Ajax了。

ps：javascript ajax小結

1.建立XHR對象

方法	說明
new ActiveXObject(“Microsoft.XMLHTTP”)	適用於i支援window.ActiveXObject的ie5和ie6等
new XMLHttpRequest()	適用於ie7+/ff/chrome/safari/opera等

2、XHR對象的屬性和方法

屬性或方法	說明
readyState	通訊狀態，取值0~4，見後文
onreadystatechange	readyState改變時觸發此事件
responseText	伺服器返回的文字格式設定文檔
respon**ML	伺服器返回的XML格式文檔
status	狀態代碼，如100，200,404,500等
statusText	狀態代碼對應的文本（OK/Not Found)
abort()	中止當前請求
open(method,url)	開啟一個請求
send(args)	發送請求
setRequestHeader(key,value)	佈建要求的頭部
getResponseHeader(key)	擷取響應的頭部值
getAllResponseHeaders()	以索引值對形式返回所有頭部資訊

3、readyState屬性

代碼	說明
0	代表一個未初始化的狀態。以建立未初始化的XHR對象
1	代表串連狀態。已經調用了open方法，準備發送請求
2	代表發送狀態。已經調用了send方法，尚未得到響應資料
3	代表正在接收狀態，已經接收了HTTP響應的頭部資訊，正在接收響應內容
4	代表已經載入狀態，此時響應內容已經被完全接收