昕竹軒網站設計-專注網站建設

一、javascript 方式

<script type="text/javascript">

function createXMLHttpReq() else if (window.ActiveXObject) catch(oError)

    }

  }

  throw new Error ("不能創建XMLHttpRequest對象。");

}

var oXmlHttpReq = createXMLHttpReq();

function sendRequest()

      oXmlHttpReq.open("POST", "checkusername.asp", true);

      // 如需將請求發送到服務器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：

 oXmlHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

      oXmlHttpReq.onreadystatechange = callback;

      oXmlHttpReq.send(sData);

      // 如果需要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。然后在 send() 方法中規定您希望發送的數據

    } catch(oErr)

 }

}

function callback()  else 

  }

}

function checkData()  else 

  if (username == "")  else 

  return status;

}

</script>

<form  method="post" name="form1" id="form1" action="javascript:alert('用戶名：'+document.form1.txtUserName.value);" onsubmit="return checkData()">

  <div id="caption">注冊新用戶</div>

  <table border="0">

    <tr>

      <td><label for="txtUserName">用戶名：</label></td>

      <td><input name="txtUserName" type="text" id="txtUserName"onblur="sendRequest();" />

        <span id="msg1"></span></td>

    </tr>

    <tr>

      <td><label for="txtPassword">密　碼：</label></td>

      <td><input type="password" name="txtPassword" id="txtPassword" />

        <span id="msg2"></span></td>

    </tr>

    <tr>

      <td>&nbsp;</td>

      <td><input type="submit" name="btnReg" id="btnReg" value="提交" /></td>

    </tr>

  </table>

說明：
上述JavaScript腳本塊中定義了4個函數:createXMLHttpReq、sendRequest、callback和checkData,
其中前3個與Ajax交互有關. 要檢查表單數據,可將checkData函數作為form1表單的submit事件處理程序;
要實現Ajax交互,應將sendRequest函數作為txtUserName文本框的blur事件處理程序。
 此外，還要設置form1表單的action屬性,以便對表單數據進行處理。為此，應當網頁中表單和表單域
 屬性進行設置。
 
二、Jquery 方式
 
  JQuery 對象 Ajax 交互操作進行了封裝。如果使用jQuery來實現Ajax交互過程，只需用對JQuery
  對象調用 load 方法(或其他方法)即可。在本例中，下面的語句通過AJax方式向ASP服務器頁面
  checkusername.asp 發送用戶名信息,然后將服務器返回的HTTP響應文本顯示在span元素中，并對
  span元素的文本顏色進行設置，真可謂畢其功于一役。
  
  $("#msg1").load("checkusername.asp",).css("color", "gray");
 
  調用load方法可加載遠程HTML文件代碼并插入DOM中，其中第1個參數指定要加載的HTML網頁網址,
  第2個參數是可選的,用于指定要發送到服務器的key/value數據。
  如果指定了第2個參數，則自動使用post方法向服務器放松數據。