Ajax技術總結__Ajax

1、簡介：
   Ajax:Asynchronous(非同步) JavaScript And XML。Ajax技術使我們可以通過JavaScript發送請求到伺服器，並獲得返回結果，這就讓我們可以在不要的時候只更新頁面的一小部分，而不用整個頁面都重新整理，這稱為“無重新整理”技術。其實Ajax並不是一種全新的技術，而是整合了幾種現有的技術：JavaScript、XML和CSS。其核心是JavaScript，我們可以通過JavaScript的XmlHttpRequest對象完成發送請求到伺服器並返迴響應結果的任務，然後使用JavaScript更新局部頁面。非同步指的是：JavaScript發送請求後，並不是一直等著伺服器響應，而是發送請求後繼續做別的事，請求響應的處理是非同步完成的。XML一般用於請求資料和響應資料的封裝。CSS用於美化頁面樣式。

 

2、以下列出標準XmlHttpRequest操作:
abort():  停止當前請求
getAllResponseHeaders():  把HTTP請求的所有響應首部作為鍵/值對返回
getResponseHeader("header"):  返回指定首部的串值
open("method","url"):  建立對伺服器的調用 
send(content):  向伺服器發送請求
setRequestHeader("header","value"):  把指定首部設定為所提供的值。

標準XmlHttpRequest操作說明：
重點講解open()方法,此方法的具體參數和說明如下:
   1、void open(String method,String url,booleab asynch,String username,String password):這是初始化一個請求的純指令碼方法。其中前兩個參數是必須的，後三個是選擇性參數。要提供調用特定方法(GET,POST或PUT)和提供電泳資源的URL，另外還可以傳遞一個Boolean值，指示這個調用是非同步還是同步的。預設為true，表示請求本質上時非同步。如果這個參數為false，處理就會等待，直到從伺服器返迴響應為止。最後兩個參數不說自明，允許你指定一個特定的使用者名稱和密碼。

   2、void send(content):這個方法具體向伺服器發送請求，如果請求聲明為非同步，這個方法就會立刻返回，否則它就會等待直到接收到響應為止。選擇性參數是DOM對象的執行個體、輸入資料流或者串。傳入這個方法的內容會作為請求體的一部分發送。
  
   3、void setRequestHeader(String header,String value): 把指定首部設定為所提供的值。這個方法必須在調用open()之後才能調用。

 

3、以下列出標準XmlHttpRequest屬性：
onreadystatechange:  每個狀態改變時都會觸發這個處理器，通常會調用一個JavaScript函數
readyState:  請求的狀態。有5個可取值：0(未初始化)，1(正在載入)，2(已載入)，3(互動中)，4(完      成)
responseText:  伺服器的響應，表示一個串
responseXML:   伺服器的響應，表示為 XML。這個對象可以解析為一個DOM對象
status:  伺服器的HTTP狀態代碼(200對應ok，404對應Not Found(未找到),等等)
statusText:  HTTP狀態代碼的相應文本(ok或not found等等)

 

4、Ajax的互動過程：
   1、一個用戶端觸發一個Ajax事件。如：
      <input type="text" name="username" id="username" onchange="vaildation();" />
   2、建立XmlHttpRequest對象的一個執行個體。使用open()方法建立調用，並設定URL以及所希望的HTTP方法(通常是GET或POST)。請求實際上通過一個send()方法調用觸發。如：
        var xmlHttp;
 
        //建立XmlHttpRequest對象
        //注意： 建立XmlHttpRequest對象時，要根據不同的瀏覽器建立不同的XmlHttpRequest對象
 function createXMLHttpRequest() {
  if(window.ActiveXObject) {   //IE瀏覽器
   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
  } else if(window.XMLHttpRequest) {  //非IE瀏覽器
   xmlHttp = new XMLHttpRequest();
  } 
 }
 
 function vaildation() {
  createXMLHttpRequest();
  var username = document.getElementById("username");
  xmlHttp.onreadystatechange = callback;
  var url = "servlet/ValidationServlet?username=" + escape(username.value);
  xmlHttp.open("GET",url,false);
  xmlHttp.send(null);
 }

 

   3、向伺服器做出請求。可能是servlet、CGI指令碼等等
   4、伺服器做你想做的事情。如訪問資料庫，甚至訪問另一個系統
   5、請求返回到瀏覽器。
   6、XmlHttpRequest對象配置為處理返回時要調用callback()函數。如:
       function callback() {
  if(xmlHttp.readyState == 4) {
   if(xmlHttp.status == 200) {
    //do something interesting her
   }
  }
 }