淺析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擷取完整的回應資料

代碼如下

複製代碼

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的基本實現原理）。