關於Ajax技術原理的3點總結_AJAX相關

來源:互聯網
上載者:User

ajax:Asynchronous Javascript and XML   非同步Javascript 和XML。

是一種建立互動式網頁應用的網頁開發技術。

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

  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 = document.getElementById("XXId").value;
    CreateXmlHttp();  //建立XmlHttpRequest對象
if (!xmlhttp) {         //判斷對象是否建立成功
       alert("建立xmlhttp對象異常!");
    return false;
    }
    xmlhttp.open("POST", url, false);   //開始發送非同步請求
    xmlhttp.onreadystatechange = function () {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
            document.getElementById("XXShowId").innerHTML = xmlhttp.ResponseText;   //資料接收完畢
        }
    }
    xmlhttp.send();  
}

3.0 缺點:

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.