關於ajax的實現方法與原理機制

關於ajax的實現方法與原理機制

ajax這個名字據說是asynchronous 網頁特效 + 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對象。

下面是面對不同瀏覽器分別建立的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），那麼就執行下面需要的操作。