主頁 > 知識庫 > 關(guān)于Ajax技術(shù)原理的3點總結(jié)

關(guān)于Ajax技術(shù)原理的3點總結(jié)

熱門標(biāo)簽:銀行業(yè)務(wù) 服務(wù)器配置 Linux服務(wù)器 阿里云 科大訊飛語音識別系統(tǒng) 電子圍欄 Mysql連接數(shù)設(shè)置 團購網(wǎng)站

ajax:Asynchronous Javascript and XML   異步Javascript 和XML。

是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。

1.0 優(yōu)勢:
        1.1 通過異步模式,提升了用戶體驗。
        1.2 優(yōu)化了瀏覽器與服務(wù)器之間的傳輸,減少了不必要的數(shù)據(jù)往返,減少了帶寬占用。
        1.3 Ajax引擎在客戶端運行,承擔(dān)了一部分本來由服務(wù)器承擔(dān)的共組,從而減少了大用戶量下的服務(wù)器負載。

2.0 工作原理

       Ajax核心是Javascript對象XmlHttpRequest。該對象在 IE5中首次引用,它是一種支持異步請求的技術(shù)。XmlHttpRequest使您可以使用Javascript向服務(wù)器提出請求并處理響應(yīng),而不是阻塞用戶,達到無刷新的效果。
       由于瀏覽器之間存在差異,創(chuàng)建XmlHttpRequest對象的方式也有差異(主要是IE和其他瀏覽器之間的差異)。
 
  2.1 比較通用型的創(chuàng)建異步請求的方法:

復(fù)制代碼 代碼如下:

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

  2.2 XmlHttpRequest相關(guān)屬性:

    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)用,但是當(dāng)前的狀態(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ù)

  2.3 簡單的Demo示例:

復(fù)制代碼 代碼如下:

function SendAsyncRequest() {
var data = document.getElementById("XXId").value;
    CreateXmlHttp();  //創(chuàng)建XmlHttpRequest對象
if (!xmlhttp) {         //判斷對象是否創(chuàng)建成功
       alert("創(chuàng)建xmlhttp對象異常!");
    return false;
    }
    xmlhttp.open("POST", url, false);   //開始發(fā)送異步請求
    xmlhttp.onreadystatechange = function () {
  if (xmlhttp.readyState == 4 xmlhttp.status == 200 ) {
            document.getElementById("XXShowId").innerHTML = xmlhttp.ResponseText;   //數(shù)據(jù)接收完畢
        }
    }
    xmlhttp.send();  
}

3.0 缺點:

    1.破壞了瀏覽器后退按鈕的正常行為,動態(tài)更新頁面后,無法回到前一個頁面的狀態(tài)。
    2.使用Javascript作為Ajax的基礎(chǔ)引擎,Javascript的兼容性并不是很好。(當(dāng)然現(xiàn)在流行的Jquery等javascript類庫大大改善了這些問題,對Ajax的調(diào)用也方便了很多,本文只是簡述了Ajax的基本實現(xiàn)原理)。

您可能感興趣的文章:
  • ajax中文亂碼的各種解決辦法總結(jié)
  • ajax問題總結(jié) 比較全
  • Ajax與JSON的一些學(xué)習(xí)總結(jié)
  • ajax請求get與post的區(qū)別總結(jié)
  • ajax 入門基礎(chǔ)之 XMLHttpRequest對象總結(jié)
  • 關(guān)于ajax對象一些常用屬性、事件和方法大小寫比較常見的問題總結(jié)
  • ajax原理總結(jié)附簡單實例及其優(yōu)點
  • 總結(jié)AJAX相關(guān)JS代碼片段和瀏覽器模型
  • 使用ajax異步提交表單的幾種方法總結(jié)
  • 初學(xué)者必看的Ajax總結(jié)篇

標(biāo)簽:棗莊 衢州 衡水 江蘇 蚌埠 萍鄉(xiāng) 廣元 大理

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《關(guān)于Ajax技術(shù)原理的3點總結(jié)》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266