1. 程式人生 > >ajax優缺點 工作原理

ajax優缺點 工作原理

優點:

1.無重新整理更新資料

Ajax最大的優點就是能在不重新整理整個頁面的情況下維持與伺服器通訊

2.非同步與伺服器通訊

使用非同步的方式與伺服器通訊,不打斷使用者的操作

缺點:

1.Ajax幹掉了Back與History功能,即對瀏覽器機制的破壞

在動態更新頁面的情況下,使用者無法回到前一頁的頁面狀態,因為瀏覽器僅能記憶歷史紀錄中的靜態頁面

2.安全問題

AJAX技術給使用者帶來很好的使用者體驗的同時也對IT企業帶來了新的安全威脅,Ajax技術就如同對企業資料建立了一個直接通道。這使得開發者在不經意間會暴露比以前更多的資料和伺服器邏輯。

3.對搜尋引擎支援較弱

4.破壞程式的異常處理機制

5.違背URL與資源定位的初衷

6.不能很好地支援移動裝置

7.客戶端肥大,太多客戶段程式碼造成開發上的成本

工作原理:

Ajax的原理簡單來說通過XmlHttpRequest物件來向伺服器發非同步請求,從伺服器獲得資料,然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從伺服器獲得請求資料。要清楚這個過程和原理,我們必須對 XMLHttpRequest有所瞭解。

XMLHttpRequest是ajax的核心機制,它是在IE5中首先引入的,是一種支援非同步請求的技術。簡單的說,也就是javascript可以及時向伺服器提出請求和處理響應,而不阻塞使用者。達到無重新整理的效果。

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

   首先,我們先來看看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獲取完整的迴應資料

 

  但是,由於各瀏覽器之間存在差異,所以建立一個XMLHttpRequest物件可能需要不同的方法。這個差異主要體現在IE和其它瀏覽器之間。下面是一個比較標準的建立XMLHttpRequest物件的方法。

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

function Ustbwuyi() {

    var data = document.getElementById("username").value;
    CreateXmlHttp();
    if (!xmlhttp) {
        alert("建立xmlhttp物件異常!");
        return false;
    }

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

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
            document.getElementById("user1").innerHTML = "資料正在載入...";
            if (xmlhttp.status == 200) {
                document.write(xmlhttp.responseText);
            }
        }
    }
    xmlhttp.send();
}