Ajax技術原理小結

ajax：Asynchronous Javascript and XML   異步Javascript 和XML。

          是一種建立交互式網頁應用的網頁開發技術。

 

1.0 優點：

        1.1 經過異步模式，提高了用戶體驗。

        1.2 優化了瀏覽器與服務器之間的傳輸，減小了沒必要要的數據往返，減小了帶寬佔用。

        1.3 Ajax引擎在客戶端運行，承擔了一部分原本由服務器承擔的共組，從而減小了大用戶量下的服務器負載。

 

2.0 工做原理

       Ajax核心是Javascript對象XmlHttpRequest。該對象在 IE5中首次引用，它是一種支持異步請求的技術。XmlHttpRequest使您可使用Javascript向服務器提出請求並處理響應，而不是阻塞用戶，達到無刷新的效果。

       因爲瀏覽器之間存在差別，建立XmlHttpRequest對象的方式也有差別（主要是IE和其餘瀏覽器之間的差別）。

 

　　2.1 比較通用型的建立異步請求的方法: 

function CreateXmlHttp() { //非IE瀏覽器建立XmlHttpRequest對象的方法
if (window.XmlHttpRequest) { xmlhttp = new XmlHttpRequest(); } //IE瀏覽器建立XmlHttpRequest對象的方法
if (window.ActiveXObject) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("msxml2.XMLHTTP"); } catch (ex) { } } } } 

 

　　2.2 XmlHttpRequest相關屬性：

　　　　onreadystatechange      每次狀態改變所觸發事件的事件處理程序。

　　　　responseText               從服務器進程返回數據的字符串形式。

　　　　responseXML                從服務器進程返回的DOM兼容的文檔數據對象。

　　　　status                         從服務器返回的數字代碼，好比常見的404（未找到）和200（已就緒）

　　　　status Text                  伴隨狀態碼的字符串信息

　　　　readyState                   對象狀態值

　　　　　　0 (未初始化) 對象已創建，可是還沒有初始化（還沒有調用open方法）

　   　　　　1 (初始化) 對象已創建，還沒有調用send方法

　　　　　　2 (發送數據) send方法已調用，可是當前的狀態及http頭未知

　　　　　　3 (數據傳送中) 已接收部分數據，由於響應及http頭不全，這時經過responseBody和responseText獲取部分數據會出現錯誤，

　　　　　　4 (完成) 數據接收完畢,此時能夠經過經過responseXml和responseText獲取完整的迴應數據

 

　　2.3 簡單的Demo示例：

function SendAsyncRequest() { var data = document.getElementById("XXId").value; CreateXmlHttp(); //建立XmlHttpRequest對象
if (!xmlhttp) {         //判斷對象是否建立成功
       alert("建立xmlhttp對象異常！"); return false; } xmlhttp.open("POST", url, false);   //開始發送異步請求
    xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) { document.getElementById("XXShowId").innerHTML = xmlhttp.ResponseText;   //數據接收完畢
 } } xmlhttp.send(); }

 

3.0 缺點：

    1.破壞了瀏覽器後退按鈕的正常行爲，動態更新頁面後，沒法回到前一個頁面的狀態。

    2.使用Javascript做爲Ajax的基礎引擎，Javascript的兼容性並非很好。（固然如今流行的Jquery等javascript類庫大大改善了這些問題,對Ajax的調用也方便了不少，本文只是簡述了Ajax的基本實現原理）。