//處理ajax，參考 http://web.nchu.edu.tw/~jlu/classes/xml/ajax/ajax.shtml

          <input type="button" class=button value="檢查帳號" onClick="makeRequest()">
         
       <div id="mesg1" class="off"></div>

<script type="text/javascript" language="javascript">
 //處理ajax，參考 http://web.nchu.edu.tw/~jlu/classes/xml/ajax/ajax.shtml
 function makeRequest() {
  var http_request = false;
  var url = "";
  var errormsg="";   //錯誤訊息

  //檢查帳號，且是否含中文字
  if(document.all("ACCOUNT").value==""){
   flag="false";
     errormsg += "帳號不可為空值\n";
   alert(errormsg);  
   document.all("ACCOUNT").focus();
   return false;
  }
  url = "CheckAccount?ACCOUNT=" + document.all("ACCOUNT").value;
  
  //判斷使用何瀏覽器
  if(window.XMLHttpRequest) { // Mozilla, Safari, ....
   http_request = new XMLHttpRequest();
  }else if(window.ActiveXObject) { // IE
   try {
    http_request = new ActiveXObject("Msxml2.XMLHTTP");
   }catch(e){
    try {
     http_request = new ActiveXObject("Microsoft.XMLHTTP");
    }catch(e){}
   }
  }
  //無法判斷使用何瀏覽器
  if (!http_request) {
   alert('Giving up :( Cannot create an XMLHTTP instance');
   return false;
  }
  
  // 定義事件處理函數為 alterContents()
  http_request.onreadystatechange = function() {
                                    alertContents(http_request);
                                   };
  http_request.open('GET', url, true);
  http_request.send(null);
  /* 
   http://web.nchu.edu.tw/~jlu/classes/xml/ajax/example1.shtml
   open() 的第一個參數是 HTTP 的方法，看你的需要，以及 web server 支援的情形，你可以使用 GET、POST、或者 HEAD。建議使用大寫以符合 HTTP 的標準。
   open() 的第二個參數是你希望取得的資源的 URL。由於安全的機制，你只能從同一個 web server 上取得資源。
   open() 的第三個參數是代表這個呼叫是不是非同步（即 AJAX 的第一個 A）。因此，在大部分的情形下都是設為 true 代表在跟遠端取得資源的同時，browser 可以繼續執行 Javascript 的內容。這個時候其實有兩件事情同時在進行，一個是從遠端取得資料，另一個是繼續執行 JavaScript 的內容，或者使用者可以繼續處理網頁上的資料，這也就是非同步的定義。
   如果使用 GET 的方式，send() 的參數為 null。如果使用 POST 的方式，我們除了要設定 MIME 的類型（如下）之外，
   http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  */
 }

 function alertContents(http_request) {
  if (http_request.readyState == 4) {
   if (http_request.status == 200) {
    var mesg = http_request.responseText;
    
    if (mesg=="yes"){
     alert("很抱歉，帳號重覆，請重新輸入...");
     //修改div標籤
     document.getElementById("mesg1").innerHTML = 很抱歉，帳號重覆，請重新輸入...";
     document.getElementById("mesg1").className = "on";
    } else {
     alert("恭喜您，可以使用此帳號...");
     document.getElementById("mesg1").innerHTML = "恭喜您，可以使用此帳號...";
     document.getElementById("mesg1").className = "on";
    }
   }else if (http_request.status == 404) {
    alert("找不到網頁!!");
   }else{
    alert("系統錯誤!!");
   }
  }
  /*
   http://web.nchu.edu.tw/~jlu/classes/xml/ajax/example1.shtml
   一般來說，事件處理函數首先要檢查的是目前 web server 對於我們之前送出去的 http_request 的處理狀態為何。處理狀態的屬性名稱為 readyState，它所有可能的值為
   0 (尚未初始化; 還沒呼叫 open())
   1 (載入中; http_request 已經設定好了，但是還沒呼叫 send())
   2 (載入完成; http_request 已經送給 server 了，server 已經開始 處理了，你可以取得 content header 了。)
   3 (可以互動的; http_request 已經部份完成了，所以有可能取得 部份處理完的資料)
   4 (完成的; compelte)
  */
 }
</script>

<style type="text/css">
  .off { display: none }
  .on  { display: inline }
</style>