標籤:

Ajax工作原理

一、Ajax的原理簡單:

通過XmlHttpRequest對象來向伺服器發非同步請求,從伺服器獲得數據,然後用javascript來操作DOM而更新頁面。

二、Ajax的應用的五個步驟:

1、建立XMLHttpRequest對象;

2、設置回調函數;

3、使用open方法與伺服器建立連接;

4、向伺服器端發送數據;

5、在回調函數針對不同響應狀態進行處理;

三、Ajax注意事項:

1、不同瀏覽器下XMLHttpRequest對象的有不同的建立方式;

2、設置回調函數時不要加括弧;

3、open方法三個參數含義,此外還需要注意GET方式和POST方式伺服器端地址的不同寫法;

4、GET方式和POST方式send的參數的不同之處,以及POST方式下send之前需要設置請求頭信息的工作;

5、如何判斷正確的響應數據以及返回,此外還要注意如何獲取響應數據內容;

三、Ajax講解:

XMLHttpRequest是ajax的核心機制,它是在IE5中首先引入的,是一種支持非同步請求的技術。簡單的說,也就是javascript可以及時向伺服器提出請求和處理響應,而不阻塞用戶。達到無刷新的效果。

所以我們先從XMLHttpRequest講起,來看看它的工作原理。

首先,我們先來看看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獲取完整的回應數據

但是,由於各瀏覽器之間存在差異,所以創建一個XMLHttpRequest對象可能需要不同的方法。這個差異主要體現在IE和其它瀏覽器之間。下面是一個比較標準的創建XMLHttpRequest對象的方法。

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){}

}

}

}

function Ustbwuyi()

{

var data=document.getElementById("username").value;

CreateXmlHttp();

if(!xmlhttp)

{

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

returnfalse;

}

xmlhttp.open("POST",url,false);

xmlhttp.onreadystatechange=function()

{

if(xmlhttp.readyState==4)

{

document.getElementById("user1").innerHTML="數據正在載入...";

if(xmlhttp.status==200)

{

document.write(xmlhttp.responseText);

}

}

}

xmlhttp.send();

}

如上所示,函數首先檢查XMLHttpRequest的整體狀態並且保證它已經完成(readyStatus=4),即數據已經發送完畢。然後根據伺服器的設定詢問請求狀態,如果一切已經就緒(status=200),那麼就執行下面需要的操作。

對於XmlHttpRequest的兩個方法,open和send,其中open方法指定了:

a、向伺服器提交數據的類型,即post還是get。

b、請求的url地址和傳遞的參數。

c、傳輸方式,false為同步,true為非同步。默認為true。如果是非同步通信方式(true),客戶機就不等待伺服器的響應;如果是同步方式(false),客戶機就要等到伺服器返回消息後才去執行其他操作。我們需要根據實際需要來指定同步方式,在某些頁面中,可能會發出多個請求,甚至是有組織有計劃有隊形大規模的高強度的request,而後一個是會覆蓋前一個的,這個時候當然要指定同步方式。

Send方法用來發送請求。

知道了XMLHttpRequest的工作流程,我們可以看出,XMLHttpRequest是完全用來向伺服器發出一個請求的,它的作用也局限於此,但它的作用是整個ajax實現的關鍵,因為ajax無非是兩個過程,發出請求和響應請求。並且它完全是一種客戶端的技術。而XMLHttpRequest正是處理了伺服器端和客戶端通信的問題所以才會如此的重要。

現在,我們對ajax的原理大概可以有一個了解了。我們可以把伺服器端看成一個數據介面,它返回的是一個純文本流,當然,這個文本流可以是XML格式,可以是Html,可以是Javascript代碼,也可以只是一個字。


推薦閱讀:

TAG:Ajax | 原理 | 科技 |