Ajax工做原理以及經常使用的Ajax框架

1，關於同步和異步

異步傳輸是面向字符的傳輸，它的單位是字符；而同步傳輸是面向比特的傳輸，它的單位是楨，它傳輸的時候要求接受方和發送方的時鐘是保持一致的。

ajax能夠提高用戶體驗，它是利用異步請求方式的。打個比方，若是如今你家裏所在的小區因 某種狀況而面臨停水，如今有關部門公佈了兩種方案，一是徹底停水8個小時，在這8個小時內徹底停水，8個小時後恢復正常。二是不徹底停水10 個小時，在這10個小時內水沒有徹底斷，只是流量比原來小了不少，在10個小時後恢復正常流量，那麼，若是是你你會選擇哪一種方式呢？顯然是後者。

 

二、Ajax所包含的技術 

   1.使用CSS和XHTML來表示。

   2.使用DOM模型來交互和動態顯示。

   3.使用XMLHttpRequest來和服務器進行異步通訊。

   4.使用javascript來綁定和調用。

 

3、Ajax原理和XmlHttpRequest對象

  Ajax原理:經過XmlHttpRequest對象來向服務器發異步請求得到數據，而後用javascript來操做DOM而更新頁面。這其中最關鍵的一步就是從服務器得到請求數據。

  XMLHttpRequest是Ajax的核心機制.是一種支持異步請求的技術。簡單的說，也就是javascript能夠及時向服務器提出請求和處理響應，而不阻塞用戶。達到無刷新的效果。

  XMLHttpRequest屬性:

 onreadystatechange  每次狀態改變所觸發事件的事件處理程序。

  responseText    從服務器進程返回數據的字符串形式。

   responseXML    從服務器進程返回的DOM兼容的文檔數據對象。

  status          從服務器返回的數字代碼，好比常見的404（未找到）和200（已就緒）

  readyState      對象狀態值

　　　　0 (未初始化) 對象已創建，可是還沒有初始化（還沒有調用open方法）

　　　　1 (初始化) 對象已創建，還沒有調用send方法

　　　　2 (發送數據) send方法已調用，可是當前的狀態及http頭未知

　　　　3 (數據傳送中) 已接收部分數據，由於響應及http頭不全，這時經過responseBody和responseText獲取部分數據會出現錯誤

　　　　4 (完成) 數據接收完畢,此時能夠經過經過responseXml和responseText獲取完整的迴應數據

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

  如上所示，函數首先檢查XMLHttpRequest的總體狀態而且保證它已經完成（readyStatus=4），即數據已經發送完畢。而後根據服務器的設定詢問請求狀態，若是一切已經就緒（status=200），那麼就執行下面須要的操做。

對於XmlHttpRequest的兩個方法，open和send，其中open方法指定了：

a、向服務器提交數據的類型，即post仍是get。

b、請求的url地址和傳遞的參數。

c、傳輸方式，false爲同步，true爲異步。默認爲true。若是是異步通訊方式(true)，客戶機就不等待服務器的響應；若是是同步方式(false)，客戶機就要等到服務器返回消息後纔去執行其餘操做。咱們須要根據實際須要來指定同步方式，在某些頁面中，可能會發出多個請求，甚至是有組織有計劃有隊形大規模的高強度的request，然後一個是會覆蓋前一個的，這個時候固然要指定同步方式。

    Send方法用來發送請求。

 

　　知道了XMLHttpRequest的工做流程，咱們能夠看出，XMLHttpRequest是徹底用來向服務器發出一個請求的，它的做用也侷限於此，但它的做用是整個ajax實現的關鍵，由於ajax無非是兩個過程，發出請求和響應請求。而且它徹底是一種客戶端的技術。而XMLHttpRequest正是處理了服務器端和客戶端通訊的問題因此纔會如此的重要。

　　如今，咱們對ajax的原理大概能夠有一個瞭解了。咱們能夠把服務器端當作一個數據接口，它返回的是一個純文本流，固然，這個文本流能夠是XML格式，能夠是Html，能夠是Javascript代碼，也能夠只是一個字符串。這時候，XMLHttpRequest向服務器端請求這個頁面，服務器端將文本的結果寫入頁面，這和普通的web開發流程是同樣的，不一樣的是，客戶端在異步獲取這個結果後，不是直接顯示在頁面，而是先由javascript來處理，而後再顯示在頁面。至於如今流行的不少ajax控件，好比magicajax等，能夠返回DataSet等其它數據類型，只是將這個過程封裝了的結果，本質上他們並無什麼太大的區別。

 

四、ajax的優勢

    一、頁面無刷新，提高用戶體驗。

　 二、異步通訊，不須要打斷用戶的操做，迅速的響應能力。

　 三、ajax的原則是「按需取數據」，能夠最大程度的減小冗餘請求和響應對服務器形成的負擔。

    四、基於標準化的並被普遍支持的技術，不須要下載插件或者小程序。

 

五、ajax的缺點

　　下面所闡述的ajax的缺陷都是它先天所產生的。

   　一、ajax幹掉了back按鈕，即對瀏覽器後退機制的破壞。後退按鈕是一個標準的web站點的重要功能，可是它無法和js進行很好的合做。這是ajax所帶來的一個比較嚴重的問題，由於用戶每每是但願可以經過後退來取消前一次操做的。那麼對於這個問題有沒有辦法？答案是確定的，用過Gmail的知道，Gmail下面採用的ajax技術解決了這個問題，在Gmail下面是能夠後退的，可是，它也並不能改變ajax的機制，它只是採用的一個比較笨可是有效的辦法，即用戶單擊後退按鈕訪問歷史記錄時，經過建立或使用一個隱藏的IFRAME來重現頁面上的變動。（例如，當用戶在Google Maps中單擊後退時，它在一個隱藏的IFRAME中進行搜索，而後將搜索結果反映到Ajax元素上，以便將應用程序狀態恢復到當時的狀態。）

可是，雖說這個問題是能夠解決的，可是它所帶來的開發成本是很是高的，和ajax框架所要求的快速開發是相背離的。這是ajax所帶來的一個很是嚴重的問題。

     二、安全問題

技術同時也對IT企業帶來了新的安全威脅，ajax技術就如同對企業數據創建了一個直接通道。這使得開發者在不經意間會暴露比之前更多的數據和服務器邏輯。ajax的邏輯能夠對客戶端的安全掃描技術隱藏起來，容許黑客從遠端服務器上創建新的攻擊。還有ajax也難以免一些已知的安全弱點，諸如跨站點腳步攻擊、SQL注入攻擊和基於credentials的安全漏洞等。

     三、對搜索引擎的支持比較弱。

     四、破壞了程序的異常機制。至少從目前看來，像ajax.dll，ajaxpro.dll這些ajax框架是會破壞程序的異常機制的。關於這個問題，我曾經在開發過程當中遇到過，可是查了一下網上幾乎沒有相關的介紹。後來我本身作了一次試驗，分別採用ajax和傳統的form提交的模式來刪除一條數據……給咱們的調試帶來了很大的困難。

     五、另外，像其餘方面的一些問題，好比說違背了url和資源定位的初衷。例如，我給你一個url地址，若是採用了ajax技術，也許你在該url地址下面看到的和我在這個url地址下看到的內容是不一樣的。這個和資源定位的初衷是相背離的。

     六、一些手持設備（如手機、PDA等）如今還不能很好的支持ajax，好比說咱們在手機的瀏覽器上打開採用ajax技術的網站時，它目前是不支持的，固然，這個問題和咱們沒太多關係。

 

 

六、ajax的幾種框架 

　　目前咱們採用的比較多的ajax框架主要有ajax.dll,ajaxpro.dll,magicajax.dll 以及微軟的atlas框架。Ajax.dll和Ajaxpro.dll這兩個框架差異不大，而magicajax.dll只是封裝得更厲害一些，好比說它能夠直接返回DataSet數據集，前面咱們已經說過，ajax返回的都是字符串，magicajax只是對它進行了封裝而已。可是它的這個特色能夠給咱們帶來很大的方便，好比說咱們的頁面有一個列表，而列表的數據是不斷變化的，那麼咱們能夠採用magicajax來處理，操做很簡單，添加magicajax以後，將要更新的列表控件放在magicajax的控件以內，而後在pageload裏面定義更新間隔的時間就ok了，atlas的原理和magicajax差很少。可是，須要注意的一個問題是，這幾種框架都只支持IE，沒有進行瀏覽器兼容方面的處理，用反編譯工具察看他們的代碼就能夠知道。

 除了這幾種框架以外，咱們平時用到的比較多的方式是本身建立xmlHttpRequest對象，這種方式和前面的幾種框架相比更具備靈活性。另外，在這裏還提一下aspnet2.0自帶的異步回調接口，它和ajax同樣也能夠實現局部的無刷新，但它的實現實際上也是基於xmlhttprequest對象的，另外也是隻支持IE，固然這是微軟的一個競爭策略。