Ajax，jQuery實現頁面無跳轉與對比

第一種方法：

<script language="javascript" >

var xmlttp;

function verify() {
 //用DOM方式擷取文本的值
 var username = document.getElementById("username").value;
 //需要針對ie和其他瀏覽器建立這個對象不同方式寫不同的代碼
 if(window.XMLHttpRequest) {
 //針對ie7，8, Firefox, Opera, mozillar等
  xmlhttp = new XMLHttpRequest();
  //針對某些特定版本的mozillar的bug進行修正
  if(xmlhttp.overrideMimeType) {
   xmlhttp.overrideMimeType("text/html");
  }
 } else if(window.ActiveXObject){
 //針對ie6，ie5.5，ie5
 //兩個可以用於建立XMLHTTPRequest對象的控制項名稱，儲存在一個js數組中。
 //把版本較新的排在前面
  var activexName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
  for(var i=0; i<activexName.length; i++) {
   try {
   //取一個控制項進行建立，如果成功則終於迴圈
   //如果建立失敗，就拋出異常，繼續往一執行，斷續嘗試建立
    xmlhttp = new ActiveXObject(activexName[i]);
    break;
   }catch(e){}
  }
 }
 //判斷XMLHTTPRequest建立成功
 if(!xmlhttp) {
  alert("XMLHTTPRequest對象建立失敗");
 } else {
  alert(xmlhttp);
 }
 //註冊回呼函數
 xmlhttp.onreadystatechange = callback;
 //第一個參數佈建要求方式，get及post
 //第二個參數設定url
 //第三個參數true代表示採用同步方式互動，false為非同步
 xmlhttp.open("GET", "servlet/TestServlet?username=" + username, true);
 //發送資料
 //同步方式下，send在伺服器資料回來之後才執行完
 //非同步方式下，send立即執行
 xmlhttp.send(null);
}

function callback() {
 //接收響應資料
 //判斷狀態是否互動完成
 if(4 == xmlhttp.readyState) {
 //判斷互動是否成功
  if(200 == xmlhttp.status) {
   //擷取伺服器返回的資料
   //擷取伺服器輸出的純文資料
   var responseText = xmlhttp.responseText;
   
   var divNode = document.getElementById("result");
   divNode.innerHTML = responseText;
  }
 }
}

</script>

第二種方法，用jQuery實現

<script type="text/javascript" src="js/jquery-1.3.min.js"></script>

<script language="javascript" >

function verify() {
 $.get("servlet/TestServlet?username=" + $("#username").val(), null, function(data){
  $("#result").html(data);
 });
}

</script>

jQuery也許方便了許多，不過原理還是應該弄懂，不然換個架構，就頭大了，呵呵！