DIV CSS 佈局教程網

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 代表已經加載狀態，此時響應內容已經被完全接收