ajax的原理和運行機制

關於ajax，是最近炒得非常火的一種技術，並且時下它也是非常流行。當然，它並不是什麼新技術，而是在各種已有的技術和支援機制下的一個統一。在我的項目中，偶爾也會用到ajax，用來給使用者一些無重新整理的體驗。用過幾次之後，我個人決定對它的原理和運行機製做一個總結。
    ajax這個名字據說是Asynchronous JavaScript + XML的簡寫，實際上，它由下列幾種技術組合而成。

   1.使用CSS和XHTML來表示。
   2. 使用DOM模型來互動和動態顯示。
   3.使用XMLHttpRequest來和伺服器進行非同步通訊。
   4.使用javascript來綁定和調用。

ajax的原理
  XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支援非同步請求的技術。簡單的說，也就是javascript可以及時向伺服器提出請求和處理響應，而不阻塞使用者。達到無重新整理的效果。
  所以我們先從XMLHttpRequest講起，來看看它的工作原理。
  首先，我們先來看看XMLHttpRequest這個對象的屬性。
  它的屬性有：
  onreadystatechange  每次狀態改變所觸發事件的事件處理常式。
  responseText     從伺服器處理序返回資料的字串形式。
  responseXML   從伺服器處理序返回的DOM相容的文檔資料對象。
  status                 從伺服器返回的數字代碼，比如常見的404（未找到）和200（已就緒）
  status Text         伴隨狀態代碼的字串資訊
  readyState         對象狀態值，0—未初始化 1—正在載入  2—載入完畢 3—互動 4—完成。
  
  但是，由於各瀏覽器之間存在差異，所以建立一個XMLHttpRequest對象可能需要不同的方法。這個差異主要體現在IE和其它瀏覽器之間。
下面是面對不同瀏覽器分別建立的XMLHttpRequest對象。

<script language="javascript" type="text/javascript">
var xmlHttp = false;
//建立面向IE的XMLHttpRequest對象
try {
//使用Msxml的一個版本來建立
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
//使用它的另外一個對象來建立
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
//建立面向其它非微軟瀏覽器的XMLHttpRequest對象
xmlHttp = new XMLHttpRequest();
}
</script>

這個過程分為三步，首先我們定義一個xmlHttp來引用建立的XMLHttpRequest。然後，我們嘗試在微軟的瀏覽器中建立該對象，先用Msxml.XMLHTTP對象來建立，如果失敗再嘗試用macrosoft.XMLHTTP來建立它．最後，我們面向非微軟瀏覽器來建立該對象．
　這樣，我們建立了一個XMLHttpRequest對象，下面我們來看如何發出一個XMLHttpRequest請求。

function executeXMLHttpRequest(callback,url)
{
//處理非微軟瀏覽器的情況
 if(window.XMLHttpRequest)  
 {
  xhr=new XMLHttpRequest();
  xhr.onreadystatechange = callback;
  xhr.open("Get",url,true); 
  xhr.send(null); 
 }
//處理微軟瀏覽器的情況
 else if(window.ActiveXObject)
 {
  xhr=new ActiveXObject("macrosoft.XMLHttp");
  if(xhr)
{ 
  xhr.onreadystatechage=callback;
  xhr.open("Get",url,true);
  xhr.send();  
}
}

由上面可見，執行XMLHttpRequest實際上大多數代碼還是用在處理瀏覽器的區別上面，針對不同的瀏覽器它還是要做出不同的處理，但是這樣看上去也非常的直觀。
 在上面的代碼中，最關鍵的是：
xhr.onreadystatechage=callback   它定義了回呼函數，一旦響應它就會自動執行。
xhr.open(""Get",url,true);   true表示您想要非同步執行該請求。

對於callback來說，我們有：

function processAjaxResponse() {
//狀態標識為已完成
  if (xhr.readyState == 4) {
//已就緒
    if (xhr.status == 200) {
      502 502'votes').innerHTML = xhr.responseText;
    } else {
      alert("There was a problem retrieving the XML data:
" +
      xhr.statusText);
    }
  }
} 

 就是說，一旦伺服器處理完XMLHttpRequest並返回給瀏覽器，用xhr.onreadystatechange指派的回調方法將自動調用。

上面差不多就是XMLHttpRequest的整個工作流程，它首先檢查XMLHttpRequest的整體狀態並且保證它已經完成（readyStatus=4），然後根據伺服器的設定詢問請求狀態，如果一切已經就緒（status=200），那麼就執行下面需要的操作。

  知道了XMLHttpRequest的工作流程，我們可以看出，XMLHttpRequest是完全用來向伺服器發出一個請求的，它的作用也局限於此，但它的作用是整個ajax實現的關鍵，因為ajax無非是兩個過程，發出請求和響應請求。並且它完全是一種用戶端的技術。而XMLHttpRequest正是處理了伺服器端和用戶端通訊的問題所以才會如此的重要。
  現在，我們對ajax的原理大概可以有一個瞭解了。我們可以把伺服器端看成一個資料介面，它返回的是一個純文字流，當然，這個文字資料流可以是XML格式，可以是Html，可以是Javascript代碼，也可以只是一個字串。這時候，XMLHttpRequest向伺服器端請求這個頁面，伺服器端將文本的結果寫入頁面，這和普通的web開發流程是一樣的，不同的是，用戶端在非同步擷取這個結果後，不是直接顯示在頁面，而是先由javascript來處理，然後再顯示在頁面。至於現在流行的很多ajax控制項，比如magicajax等，可以返回DataSet等其它資料類型，只是將這個過程封裝了的結果，本質上他們並沒有什麼太大的區別。