ajax工作原理詳解

     Ajax的原理就是:通過javascript的方式,將前臺數據通過xmlhttp對象傳遞到後臺,後臺在接收到請求後,將需要的結果,再傳回到前臺,這樣就可以實現不需要頁面的回發,頁是數據實現來回傳遞,從頁實現無刷新。 
     Ajax的原理簡單來說,實際上就是通過XmlHttpRequest對象來向服務器發異步請求,從服務器獲得數據,然後用javascript來操作DOM而更新頁面。 
這其中最關鍵的一步就是從服務器獲得請求數據。要清楚這個過程和原理,我們必須對 XMLHttpRequest有所瞭解。 

     我們可以看出,XMLHttpRequest對象完全用來向服務器發出一個請求的,它的作用也侷限於此,但它的作用是整個ajax實現的關鍵,我們可以把服務器端看成一個數據接口,它返回的是一個純文本流,當然,這個文本流可以是XML格式,可以是Html,可以是Javascript代碼,也可以只是一個字符串。這時候,XMLHttpRequest向服務器端請求這個頁面,服務器端將文本的結果寫入頁面,這和普通的web開發流程是一樣的,不同的是,客戶端在異步獲取這個結果後,不是直接顯示在頁面,而是先由javascript來處理,然後再顯示在頁面。


XMLHttpRequestajax的核心機制,它是在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對象異常!");
return false;
}

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代碼,也可以只是一個字符串。這時候,XMLHttpRequest向服務器端請求這個頁面,服務器端將文本的結果寫入頁面,這和普通的web開發流程是一樣的,不同的是,客戶端在異步獲取這個結果後,不是直接顯示在頁面,而是先由javascript來處理,然後再顯示在頁面。至於現在流行的很多ajax控件,比如magicajax等,可以返回DataSet等其它數據類型,只是將這個過程封裝了的結果,本質上他們並沒有什麼太大的區別。


優點:

Ajax的給我們帶來的好處大家基本上都深有體會,在這裏我只簡單的講幾點:

    1、最大的一點是頁面無刷新,在頁面內與服務器通信,給用戶的體驗非常好。

   2、使用異步方式與服務器通信,不需要打斷用戶的操作,具有更加迅速的響應能力。

   3、可以把以前一些服務器負擔的工作轉嫁到客戶端,利用客戶端閒置的能力來處理,減輕服務器和帶寬的負擔,節約空間和寬帶租用成本。並且減輕服務器的負擔,ajax的原則是“按需取數據”,可以最大程度的減少冗餘請求,和響應對服務器造成的負擔。

    4、基於標準化的並被廣泛支持的技術,不需要下載插件或者小程序。

缺點:

    1、ajax幹掉了back按鈕,即對瀏覽器後退機制的破壞。後退按鈕是一個標準的web站點的重要功能,但是它沒法和js進行很好的合作。這是ajax所帶來的一個比較嚴重的問題,因爲用戶往往是希望能夠通過後退來取消前一次操作的。那麼對於這個問題有沒有辦法?答案是肯定的,用過Gmail的知道,Gmail下面採用的ajax技術解決了這個問題,在Gmail下面是可以後退的,但是,它也並不能改變ajax的機制,它只是採用的一個比較笨但是有效的辦法,即用戶單擊後退按鈕訪問歷史記錄時,通過創建或使用一個隱藏的IFRAME來重現頁面上的變更。(例如,當用戶在Google Maps中單擊後退時,它在一個隱藏的IFRAME中進行搜索,然後將搜索結果反映到Ajax元素上,以便將應用程序狀態恢復到當時的狀態。)

但是,雖然說這個問題是可以解決的,但是它所帶來的開發成本是非常高的,和ajax框架所要求的快速開發是相背離的。這是ajax所帶來的一個非常嚴重的問題。

     2、安全問題

技術同時也對IT企業帶來了新的安全威脅,ajax技術就如同對企業數據建立了一個直接通道。這使得開發者在不經意間會暴露比以前更多的數據和服務器邏輯。ajax的邏輯可以對客戶端的安全掃描技術隱藏起來,允許黑客從遠端服務器上建立新的攻擊。還有ajax也難以避免一些已知的安全弱點,諸如跨站點腳步攻擊、SQL注入攻擊和基於credentials的安全漏洞等。

     3、對搜索引擎的支持比較弱。

     4、破壞了程序的異常機制。至少從目前看來,像ajax.dll,ajaxpro.dll這些ajax框架是會破壞程序的異常機制的。關於這個問題,我曾經在開發過程中遇到過,但是查了一下網上幾乎沒有相關的介紹。後來我自己做了一次試驗,分別採用ajax和傳統的form提交的模式來刪除一條數據……給我們的調試帶來了很大的困難。

     5、另外,像其他方面的一些問題,比如說違背了url和資源定位的初衷。例如,我給你一個url地址,如果採用了ajax技術,也許你在該url地址下面看到的和我在這個url地址下看到的內容是不同的。這個和資源定位的初衷是相背離的。

     6、一些手持設備(如手機、PDA等)現在還不能很好的支持ajax,比如說我們在手機的瀏覽器上打開採用ajax技術的網站時,它目前是不支持的,當然,這個問題和我們沒太多關係。



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章