Ajax技術(shù)有哪些優(yōu)缺點

這篇文章主要講解了“Ajax技術(shù)有哪些優(yōu)缺點”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Ajax技術(shù)有哪些優(yōu)缺點”吧！

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引擎在客戶端運(yùn)行，承擔(dān)了一部分本來由服務(wù)器承擔(dān)的共組，從而減少了大用戶量下的服務(wù)器負(fù)載。

2.0 工作原理

       Ajax核心是Javascript對象XmlHttpRequest。該對象在 IE5中首次引用，它是一種支持異步請求的技術(shù)。XmlHttpRequest使您可以使用Javascript向服務(wù)器提出請求并處理響應(yīng)，而不是阻塞用戶，達(dá)到無刷新的效果。
       由于瀏覽器之間存在差異，創(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ù)器進(jìn)程返回數(shù)據(jù)的字符串形式。

　　　　responseXML                從服務(wù)器進(jìn)程返回的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ù)傳送中) 已接收部分?jǐn)?shù)據(jù)，因為響應(yīng)及http頭不全，這時通過responseBody和responseText獲取部分?jǐn)?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的兼容性并不是很好。

感謝各位的閱讀，以上就是“Ajax技術(shù)有哪些優(yōu)缺點”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Ajax技術(shù)有哪些優(yōu)缺點這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！