Ajax的使用

Ajax代表的是一種開源風格，使用Ajax的異步模式，瀏覽器無須重新加載整個頁面，就可以顯示新的數據。Ajax可以減輕服務器和帶寬的負擔，提供更好的服務響應。

頁面顯示如圖：

Ajax的例子：

<span style="font-size:18px;">/**
* 傳遞3個參數
  * 參數一：domId:表示表單中Form2的名稱
  * 參數二：action:訪問的URL地址
  * 參數三：sForm:表示表單中Form1的名稱
*/
Pub.submitActionWithForm=function(domId,action,sForm){
  //創建Ajax引擎
  var req = Pub.newXMLHttpRequest();
  //處理Ajax的事件處理函數，接收服務器響應的數據
  var handlerFunction = Pub.getReadyStateHandler(req, domId,Pub.handleResponse);
  req.onreadystatechange = handlerFunction;
  //打開連接，false：同步，必須等待值加載完成之後，才往後執行，使用POST方式，必須要設置請求頭部信息
  req.open("POST", action, false);
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
  //發送請求，向服務器發送數據(表單Form1中的數據)
  var str = Pub.getParams2Str(sForm); 
  req.send(str);
}</span>

<span style="font-size:18px;">
</span>

//創建Ajax引擎
Pub.newXMLHttpRequest=function newXMLHttpRequest() {
  var xmlreq = false;
  if (window.XMLHttpRequest) {
  
    xmlreq = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
     
    try {
      xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e1) {
      try {
        xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {   
        alert(e2);
      }
    }
  }
  return xmlreq;
}

/**
data:通過ajax的調用服務器響應的數據結果
eleid：表示表單Form2的名稱
*/
Pub.handleResponse= function handleResponse(data,eleid){

      var ele =document.getElementById(eleid);
      //alert(data);
      ele.innerHTML = data;
    
}

/**
req:表示Ajax引擎
eleid:表示表單Form2的名稱
responseXmlHandler:表示請求數據的方法體Pub.handleResponse
**/
Pub.getReadyStateHandler =function getReadyStateHandler(req, eleid,responseXmlHandler) {
  return function () {
    if (req.readyState == 4) {//readyState詳情，請查看如下
      if (req.status == 200) {
        responseXmlHandler(req.responseText,eleid);
      } else {
        alert("HTTP error: "+req.status);
        return false;
      }
    }
  }
}

請求的狀態（readyState）

變量，此屬性只讀，狀態用長度爲4的整型表示.定義如下：

0 （未初始化）	對象已建立，但是尚未初始化（尚未調用open方法）
1 （初始化）	對象已建立，尚未調用send方法
2 （發送數據）	send方法已調用，但是當前的狀態及http頭未知
3 （數據傳送中）	已接收部分數據，因爲響應及http頭不全，這時通過responseBody和responseText獲取部分數據會出現錯誤，
4 （完成）	數據接收完畢，此時可以通過通過responseBody和responseText獲取完整的迴應數據

//組織Form1表單中的數據
Pub.getParams2Str=function getParams2Str(sForm){
 var strDiv="";   
 try {
    var objForm=document.forms[sForm];
  if (!objForm)
    return strDiv;
  var elt,sName,sValue;
  for (var fld = 0; fld < objForm.elements.length; fld++) {
      elt = objForm.elements[fld];    
      sName=elt.name;
      sValue=""+elt.value;
      if(fld==objForm.elements.length-1)
          strDiv=strDiv + sName+"="+sValue+"";
       else   
          strDiv=strDiv + sName+"="+sValue+"&";
   }
  //alert(strDiv);
  }
  catch (ex) {
    return strDiv;
	}
 
   return strDiv;
}