睫晉姬

          AJAX和XMLHTTP原理

            Ajax的原理簡單來說通過XmlHttpRequest對象來向服務(wù)器發(fā)異步請求,從服務(wù)器獲得數(shù)據(jù),然后用javascript來操作DOM而更新頁面。這其中最關(guān)鍵的一步就是從服務(wù)器獲得請求數(shù)據(jù)。要清楚這個過程和原理,我們必須對 XMLHttpRequest有所了解。

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

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

            首先,我們先來看看XMLHttpRequest這個對象的屬性。

            它的屬性有:

            onreadystatechange 每次狀態(tài)改變所觸發(fā)事件的事件處理程序。

            responseText     從服務(wù)器進程返回數(shù)據(jù)的字符串形式。

            responseXML    從服務(wù)器進程返回的DOM兼容的文檔數(shù)據(jù)對象。

            status           從服務(wù)器返回的數(shù)字代碼,比如常見的404(未找到)和200(已就緒)

            status Text       伴隨狀態(tài)碼的字符串信息

            readyState       對象狀態(tài)值

            0 (未初始化) 對象已建立,但是尚未初始化(尚未調(diào)用open方法)

            1 (初始化) 對象已建立,尚未調(diào)用send方法

            2 (發(fā)送數(shù)據(jù)) send方法已調(diào)用,但是當前的狀態(tài)及http頭未知

            3 (數(shù)據(jù)傳送中) 已接收部分數(shù)據(jù),因為響應(yīng)及http頭不全,這時通過responseBody和responseText獲取部分數(shù)據(jù)會出現(xiàn)錯誤,

            4 (完成) 數(shù)據(jù)接收完畢,此時可以通過通過responseXml和responseText獲取完整的回應(yīng)數(shù)據(jù)

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

            function CreateXmlHttp()

            {

            //非IE瀏覽器創(chuàng)建XmlHttpRequest對象

            if(window.XmlHttpRequest)

            {

            xmlhttp=new XmlHttpRequest();

            }

            //IE瀏覽器創(chuàng)建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("創(chuàng)建xmlhttp對象異常!");

            return false;

            }

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

            xmlhttp.onreadystatechange=function()

            {

            if(xmlhttp.readyState==4)

            {

            document.getElementById("user1").innerHTML="數(shù)據(jù)正在加載...";

            if(xmlhttp.status==200)

            {

            document.write(xmlhttp.responseText);

            }

            }

            }

            xmlhttp.send();

            }

            如上所示,函數(shù)首先檢查XMLHttpRequest的整體狀態(tài)并且保證它已經(jīng)完成(readyStatus=4),即數(shù)據(jù)已經(jīng)發(fā)送完畢。然后根據(jù)服務(wù)器的設(shè)定詢問請求狀態(tài),如果一切已經(jīng)就緒(status=200),那么就執(zhí)行下面需要的操作。

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

            a、向服務(wù)器提交數(shù)據(jù)的類型,即post還是get。

            b、請求的url地址和傳遞的參數(shù)。

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

            Send方法用來發(fā)送請求。

            知道了XMLHttpRequest的工作流程,我們可以看出,XMLHttpRequest是完全用來向服務(wù)器發(fā)出一個請求的,它的作用也局限于此,但它的作用是整個ajax實現(xiàn)的關(guān)鍵,因為ajax無非是兩個過程,發(fā)出請求和響應(yīng)請求。并且它完全是一種客戶端的技術(shù)。而XMLHttpRequest正是處理了服務(wù)器端和客戶端通信的問題所以才會如此的重要。

            現(xiàn)在,我們對ajax的原理大概可以有一個了解了。我們可以把服務(wù)器端看成一個數(shù)據(jù)接口,它返回的是一個純文本流,當然,這個文本流可以是XML格式,可以是Html,可以是Javascript代碼,也可以只是一個字符串。這時候,XMLHttpRequest向服務(wù)器端請求這個頁面,服務(wù)器端將文本的結(jié)果寫入頁面,這和普通的web開發(fā)流程是一樣的,不同的是,客戶端在異步獲取這個結(jié)果后,不是直接顯示在頁面,而是先由javascript來處理,然后再顯示在頁面。至于現(xiàn)在流行的很多ajax控件,比如magicajax等,可以返回DataSet等其它數(shù)據(jù)類型,只是將這個過程封裝了的結(jié)果,本質(zhì)上他們并沒有什么太大的區(qū)別。

          posted on 2009-12-05 15:54 睫晉姬 閱讀(124) 評論(0)  編輯  收藏


          只有注冊用戶登錄后才能發(fā)表評論。


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 山西省| 昌都县| 呈贡县| 望江县| 射阳县| 襄垣县| 塔城市| 东兰县| 沛县| 菏泽市| 蓝田县| 库尔勒市| 宁乡县| 高雄县| 吉木乃县| 龙游县| 宾阳县| 双辽市| 胶州市| 峡江县| 乐清市| 临汾市| 巴林左旗| 东城区| 陕西省| 许昌县| 长治市| 视频| 潜江市| 抚远县| 崇州市| 闵行区| 华蓥市| 紫云| 大竹县| 重庆市| 曲周县| 青神县| 晋宁县| 元朗区| 怀仁县|