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

這篇文章主要介紹了關於Ajax技術原理的3點總結,需要的朋友可以參考下

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                        從伺服器中回復「              伴隨狀態碼的字串資訊

　　　　readyState物件狀態值

　　　　　　0 (未初始化) 物件已建立，但是尚未初始化（尚未呼叫open方法）

　   　　　　1 (初始化) 物件已建立，尚未呼叫方法

#send物件

　　　　　　3 (資料傳送中) 已接收部分資料，因為回應及http頭不全，這透過回應時透過所有回應資料和httpresponse，這透過回應時透過相同資料來獲取部分數據會出現錯誤，

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

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

以上是關於Ajax技術原理的3點總結_AJAX相關的詳細內容。更多資訊請關注PHP中文網其他相關文章！