幾種常見的ajax實現方法

Ajax 資源中心

 

基本的實現方法

var xmlHttp = false;
//如果使用較新版本的 Internet Explorer，則需要使用對象 Msxml2.XMLHTTP，而較老版本的 Internet //Explorer 則使用 Microsoft.XMLHTTP。非IE則需要XMLHttpRequest。
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    try{
            xmlHttp = new XMLHttpRequest();
    catch(e3){
        alert("您的瀏覽器不支援AJAX技術");
    }
  }
}

function send(){
  var url = "/demo.action"
//注意下寫的順序，有時候順序寫錯了會出錯
  xmlHttp.open("GET", url, true);  //open函數說明見下方
  xmlHttp.onreadystatechange = callback; //調用回呼函數對伺服器進行響應
  xmlHttp.send(null);  //一般的內容用url發送資訊即可，特殊需求可用send發送資訊，這是url發送                        //資訊的寫法
}

//回呼函數 取得伺服器回傳的資訊
function callback{
if(xmlHttp.readystatechange
  if (xmlHttp.readyState == 4) {   //詳見HTTP就緒狀態
    if (request.status == 200){    //詳見HTTP狀態碼
      var response = xmlHttp.responseText;
    }
  }
}

open()參數
request-type：發送請求的類型。典型的值是 GET 或 POST，但也可以發送 HEAD 請求。
url：要串連的 URL。
asynch：如果希望使用非同步串連則為 true，否則為 false。該參數是可選的，預設為 true。
username：如果需要身分識別驗證，則可以在此指定使用者名稱。該選擇性參數沒有預設值。
password：如果需要身分識別驗證，則可以在此指定口令。該選擇性參數沒有預設值。
通常使用其中的前三個參數

HTTP就緒狀態
HTTP 就緒狀態表示請求的狀態或情形。它用於確定該請求是否已經開始、是否得到了響應或者請求/響應模型是否已經完成。它還可以協助確定讀取伺服器提供的響應文本或資料是否安全。在 Ajax 應用程式中需要瞭解五種就緒狀態：

    0：請求沒有發出（在調用 open() 之前）。
    1：請求已經建立但還沒有發出（調用 send() 之前）。
    2：請求已經發出正在處理之中（這裡通常可以從響應得到內容標題部）。
    3：請求已經處理，響應中通常有部分資料可用，但是伺服器還沒有完成響應。
    4：響應已完成，可以訪問伺服器響應並使用它。

與大多數跨瀏覽器問題一樣，這些就緒狀態的使用也不盡一致。您也許期望任務就緒狀態從 0 到 1、2、3 再到 4，但實際上很少是這種情況。一些瀏覽器從不報告 0 或 1 而直接從 2 開始，然後是 3 和 4。其他瀏覽器則報告所有的狀態。還有一些則多次報告就緒狀態 1。在上一節中看到，伺服器多次調用 updatePage()，每次調用都會彈出警告框 —— 可能和預期的不同。

HTTP狀態碼
404 該頁面不存在
403 和 401  所訪問資料受到保護或者禁止訪問
200 一切順利

更詳細的說明請訪問 http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/

 

prototype實現ajax

先看代碼

<script type="text/javascript" src="prototype.js"/>

function demo(){

     var url="demo.action";    //請求路徑

     var pars="";//請求參數  如完整請求路徑為http://www.demo.com/demo&d1=2,

                         //則url="http://www.demo.com/demo，pars="d1=2"
     var ajax=new Ajax.Request(url,{method:"post",parameters:pars,onComplete:callback});

                                                                                                                   //callback為回調方法

      //var ajax=new Ajax.Updater(div,url,{method:"post",parameters:pars,evalScripts:true});

       //evaldemo=function(){}

     //使用 Ajax.Request 類還有一些其它的屬性可以在這個對象裡面定義和設定，如 asynchronous，可以為 true 或 false 來決定 AJAX 對服務 器的調用是否是非同步（預設值是 true）。

    //還有另外兩個有用的選項用來處理結果。我們可以在 onSuccess 選項處傳入一個方法，當 AJAX 無誤的執行完後調 ，相反的，也可以在 onFailure 選項處傳入一個方法，當伺服器端出現錯誤時調用。

 

}

function callback(request){    //回調方法需有一個參數

   var s=request.responseText;      //得到伺服器返回資訊

}

 

更多使用方法參見prototype的協助文檔

 

dojo實現ajax

<script type="text/javascript" src="dojo.js"/>

function demo() {
    var pars={actionSign:'firstlogin',userid:dojo.byId('userid').value};  //請求參數 格式為 {參數名:值}
    dojo.xhrPost({          //使用post請求  對應get請求的方法為xhrGet
        url:"demo.action",
        content:pars,
        preventCatch:true,         //不使用瀏覽器緩衝  如果使用的話，兩個一樣的請求，瀏覽器會從緩衝中調用上次請求的結果

        handleAs:'text',           //返回的資料格式

        load:function(data){    //成功請求後的動作
            callback(data);
        },
        error:function(response,ioArgs){     //請求錯誤後的動作
             alert("HTTP status code: " + ioArgs.xhr.status);
        }    
    });
    
}

 

更多使用方法參見http://api.dojotoolkit.org/jsdoc/dijit/HEAD/dijit.layout.ContentPane

http://sitepen.com/labs/guides/?guide=DojoQuickStart

 

關於prototype與dojo在ajax使用上的一個小細節問題：

如果請求反回的是一個網頁，且此網頁中含有javascript方法，建議使用prototype，它可以保證這些JS方法的正確調用，但需要注意下方法格式demo=function(){}，不然JS方法會被直接執行，不會根據事件觸發執行。樣本如下：

function demo(){

     var url="demo.action";    //請求路徑

     var pars="";//請求參數  如完整請求路徑為http://www.demo.com/demo&d1=2,

                         //則url="http://www.demo.com/demo，pars="d1=2"

      var ajax=new Ajax.Updater(div,url,{method:"post",parameters:pars,evalScripts:true});

}