jquery中的ajax（非同步xml和javascript通訊）

jquery是對javascript的一種封裝，把程式員從繁瑣的javascript代碼中解救了一把。

jquery有2種常用用法，一種是ajax，一種是介面特效。

      jquery中ajax是通過xmlhttprequest對象與服務端進行通訊，服務端通常為servlet，由於struts2的action是返回頁面，所以不能做到不重新整理頁面而更新資料。servlet則可以返迴文本，xml，json等資料格式。所以瀏覽器中的xmlhttprequest對象和服務端的servlet進行資料交換從而達到不重新整理頁面而更新資料的效果。

 

     jquery提供了ajax（），get（），post（）方法與服務端進行互動資料，如果要用javascript實現這些效果，則代碼比較複雜。

例如：用jquery的post（）方法與服務端進行資料的非同步互動。（注意：在jquery中，$是jquery的別名，當其它js檔案中有$別名時，注意衝突的解決。）

 

//this is the valify code
function valify(){
 //alert("ok");
 //擷取文字框中的內容
 //document.getElementById("userName");擷取dom節點
 /*jquery尋找節點的方式如下；參數由#+id
  * 得到的是，一個jquery對象，它封裝了dom節點對象
  */
 var jqueryObj=$("#userName")
 var userName=jqueryObj.val();
   //將文字框中的內容發給服務端servlet
 $.get("ajaxServer?userName="+userName,null,callback);
}
//回呼函數
function callback(data){
 //接收服務端返回的資料
 var getRespObj=$("#getResp");
 //將接收到內容顯示在頁面上
 getRespObj.html(data);
}

 

上面代碼的簡寫：

function valify(){
   $.get("ajaxServer?userName="+$("#userName").val(),null,function(data){$("#getResp").html(data);});
   $.get("ajaxServer?passwd="+$("#passwd").val(),null,function(data){$("#getResp").html(data);});
}

自己用javascript代碼實現非同步通訊代碼如下：

//使用者校正的方法
//這個方法使用xmlhttprequest對象進行Ajax非同步資料互動
var xmlhttp=null;
function valify(){
 //使用dom方式獲得對應元素的值
 var userName=document.getElementById("userName").value;
 //1.建立xmlhttprequest對象
 //這是使用xhr最複雜的一步
 //需要針對不同的瀏覽器寫不同的代碼
 
 if(window.XMLHttpRequest){
  xmlhttp=new XMLHttpRequest();
  //針對某些特定的瀏覽器進行修正
  if(xmlhttp.overrideMimeType){
   xmlhttp.overrideMimeType("text/xml");
  }
 }else if(window.ActiveXObject){
  //針對ie5，ie5.5，ie6
  var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
  for(var i=0;i<activexName.length;i++){
   try{
    xmlhttp=new ActiveXObject(activexName[i]);
    break;
   }catch (e) {}
  }
 }
//確認xmlhttp對象建立成功
 if(!xmlhttp){
  alert("xmlhttprequest 建立失敗！");
 }else{
  alert(xmlhttp);
 }
 
 //2.註冊回呼函數
 //註冊回呼函數時，只要函數名，不要括弧，如果加括弧就是調用函數，把返回結果進行註冊。
     xmlhttp.onreadystatechange=callback;
     //設定串連資訊
     /**
      * 第一個參數表示請求方式，支援所有的http請求方式，主要用get和post
      * 第二個參數表示請求的url地址，get方式的請求參數也在其中
      * 第三個參數表示採用非同步還是同步方式，true表示非同步
      */
     xmlhttp.open("GET", "ajaxServer?userName="+userName, true);
    
     //發送資料，開始和伺服器互動
     /**
      * 同步方式執行到這兒需要等待，而非同步互動執行到這兒不需要等待。
      */
     xmlhttp.send(null);
}
function callback(){
 //判斷與伺服器是否互動完成
     if(xmlhttp.readyState==4){
      //判斷與伺服器是否互動成功
      if(xmlhttp.status==200){
    //擷取伺服器端返回的資料
    //擷取伺服器端的純文字資料
       var resText=xmlhttp.responseText;
       var divNode=document.getElementById("getResp");
       //將資料顯示在頁面上。
         divNode.innerHTML=resText;
      }
    
     }
}

 

jquery也提供了許多用於做出絢麗頁面的函數：

下面是myeclipse8.5下寫的5個例子程式：

http://download.csdn.net/source/3027419