DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> ajax的原理和運行機制
ajax的原理和運行機制
編輯: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等其它數據類型,只是將這個過程封裝了的結果,本質上他們並沒有什麼太大的區別。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved