當前位置:學問君>人在職場>電腦培訓>

關於Ajax技術原理的幾點總結

學問君 人氣:1.69W

ajax:Asynchronous Javascript and XML   異步Javascript 和XML。是一種創建交互式網頁應用的網頁開發技術。那麼下面我們來談談關乎Ajax技術原理的幾點總結。想了解更多相關資訊請持續關注我們應屆畢業生培訓網。

關於Ajax技術原理的幾點總結

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 (ttpRequest) {

xmlhttp = new XmlHttpRequest();

}

//IE瀏覽器創建XmlHttpRequest對象的方法

if (veXObject) {

try {

xmlhttp = new ActiveXObject("TTP");

}

catch (e) {

try {

xmlhttp = new ActiveXObject("TTP");

}

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 = lementById("XXId")e;

CreateXmlHttp();  //創建XmlHttpRequest對象

if (!xmlhttp) {         //判斷對象是否創建成功

alert("創建xmlhttp對象異常!");

return false;

}

("POST", url, false);   //開始發送異步請求

adystatechange = function () {

if (yState == 4 && us == 200 ) {

lementById("XXShowId")rHTML = onseText;   //數據接收完畢

}

}

();

}

3.0 缺點:

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

2.使用Javascript作爲Ajax的基礎引擎,Javascript的相容性並不是很好。(當然現在流行的Jquery等javascript類庫大大改善了這些問題,對Ajax的調用也方便了很多,本文只是簡述了Ajax的基本實現原理)。

TAGS:技術 Ajax