深入理解Ajax原理

1.  概念
 
 
ajax 的全稱是AsynchronousJavaScript and XML，其中，Asynchronous 是非同步意思，它有別於傳統web開發中採用的同步的方式。
 
2.  理解同步非同步
 
非同步傳輸是面向字元的傳輸，它的單位是字元；而同步傳輸是面向位元的傳輸，它的單位是楨，它傳輸的時候要求接受方和發送方的時鐘是保持一致的。
 
舉個例子來說同步和非同步，同步就好像我們買樓一次性支付，而非同步就是買樓分期付款。所以當我們把這種生活中的概念化解釋轉移到理解Ajax非同步上來就發現，它是通過這樣一種非同步方式來讓使用者更加收益，也就是說可以讓使用者的有更好的體驗性。其實這也是Ajax的意義所在。
 
 
 
3.  通過分析XmlHttpRequest來理解Ajax的原理
 
Ajax的原理簡單來說通過XmlHttpRequest對象來向伺服器發非同步請求，從伺服器獲得資料，然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從伺服器獲得請求資料。要清楚這個過程和原理，我們必須對XMLHttpRequest有所瞭解。
 
 
 
XMLHttpRequest是ajax的核心機制，是一種支援非同步請求的技術。簡單的說，也就是javascript可以及時向伺服器提出請求和處理響應，而不阻塞使用者。達到無重新整理的效果。
 
所以要想理解Ajax原理就要先理解XMLHttpRequest的工作原理。
 
  首先，我們先來看看XMLHttpRequest這個對象的屬性。
 
 
 
 
通過上面對XMLHttpRequest對象的理解，我們通過一個樣本來看它的工作原理：
 
 
 
 
這是一個驗證input標籤是不是為空白的一個Ajax的樣本：
 
 
function validate(field) { 
    if (trim(field.value).length != 0) { 
    var xmlHttp = null; 
    //表示當前瀏覽器不是ie,如ns,firefox  
    if(window.XMLHttpRequest) { 
        xmlHttp = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime(); 
             
    //佈建要求方式為GET，佈建要求的URL，設定為非同步提交  
    xmlHttp.open("GET", url, true); 
             
    //將方法地址複製給onreadystatechange屬性  
    //類似於電話號碼  
    xmlHttp.onreadystatechange=function() { 
    //Ajax引擎狀態為成功  
    if (xmlHttp.readyState == 4) { 
         //HTTP協議狀態為成功  
         if (xmlHttp.status == 200) { 
        if (trim(xmlHttp.responseText) != "") { 
             //alert(xmlHttp.responseText);  
             document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>" 
        }else { 
            document.getElementById("spanUserId").innerHTML = ""; 
            } 
         }else { 
            alert("請求失敗，錯誤碼=" + xmlHttp.status); 
         } 
         
        }; 
             
    //將設定資訊發送到Ajax引擎  
    xmlHttp.send(null); 
    } else { 
    document.getElementById("spanUserId").innerHTML = ""; 
    }    
} 
function validate(field) {
    if (trim(field.value).length != 0) {
       var xmlHttp = null;
       //表示當前瀏覽器不是ie,如ns,firefox
       if(window.XMLHttpRequest) {
           xmlHttp = new XMLHttpRequest();
       } else if (window.ActiveXObject) {
           xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
       }
       var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime();
                    
       //佈建要求方式為GET，佈建要求的URL，設定為非同步提交
       xmlHttp.open("GET", url, true);
                    
       //將方法地址複製給onreadystatechange屬性
       //類似於電話號碼
       xmlHttp.onreadystatechange=function() {
       //Ajax引擎狀態為成功
       if (xmlHttp.readyState == 4) {
            //HTTP協議狀態為成功
            if (xmlHttp.status == 200) {
              if (trim(xmlHttp.responseText) != "") {
                   //alert(xmlHttp.responseText);
                   document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>"
              }else {
                  document.getElementById("spanUserId").innerHTML = "";
               }
            }else {
               alert("請求失敗，錯誤碼=" + xmlHttp.status);
            }
       
        };
                    
       //將設定資訊發送到Ajax引擎
       xmlHttp.send(null);
    } else {
       document.getElementById("spanUserId").innerHTML = "";
    }    
}
 
 
 
 
 
首先建立一個XMLHttpRequest對象，之後javaspcript方法檢查XMLHttpRequest的整體狀態並且保證它已經完成（readyStatus=4），即資料已經發送完畢。然後根據伺服器的設定詢問請求狀態，如果一切已經就緒（status=200），那麼就執行下面需要的操作。
 
 
 
對於XmlHttpRequest的兩個方法，open和send，其中open方法指定了：
 
a、向伺服器提交資料的類型，即post還是get。
 
b、請求的url地址和傳遞的參數。
 
c、傳輸方式，false為同步，true為非同步。預設為true。如果是非同步通訊方式(true)，客戶機就不等待伺服器的響應；如果是同步方式(false)，客戶機就要等到伺服器返回訊息後才去執行其他動作。
 
之後調用Send方法用來發送請求。
 
 
 
  通過這個樣本我們看到Ajax 基本上就是把JavaScript 技術和XMLHttpRequest對象放在Web 表單和伺服器之間。當使用者向伺服器請求時，資料發送給一些JavaScript 代碼而不是直接發送給伺服器。JavaScript代碼在幕後發送非同步請求,然後伺服器將資料返回JavaScript 代碼，後者決定如何處理這些資料,它可以迅速更新表單資料。這就是Ajax的原理所在。
 
 
 
 
4.  用圖來理解Ajax原理



摘自 陳建秋