一、javascript 方式

<script type="text/javascript">

function createXMLHttpReq(){

  if (window.XMLHttpRequest) {

    return new XMLHttpRequest();

    // XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

  } else if (window.ActiveXObject) {

    var aVersions = ["MSXML2.XMLHttp.6.0",

      "MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0",

      "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp","Microsoft.XMLHttp"];

    for (var i = 0; i < aVersions.length; i++) {

      try {

        var oXmlHttpReq = new ActiveXObject(aVersions[i]);

        return oXmlHttpReq;

      }catch(oError){

        // 忽略引发的错误

      }

    }

  }

  throw new Error ("不能创建XMLHttpRequest对象。");

}

var oXmlHttpReq = createXMLHttpReq();

function sendRequest(){

  if (oXmlHttpReq) {

    try {

      var sUsername = document.form1.txtUserName.value;

 var sData = "username=" + escape(sUsername);

      if (sUsername == "") {

        document.getElementById("msg1").innerHTML = "用户名不能为空！";

        document.getElementById("msg1").style.color = "red";

        return;

      }

      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) {

      alert("无法连接服务器：" + oErr.toString());

   }

 }

}

function callback() {

  if (oXmlHttpReq.readyState == 4) {

    if (oXmlHttpReq.status == 200) {

      // 在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

      // 当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

      var sResponse=oXmlHttpReq.responseText;

      // responseText 属性返回字符串形式的响应，因此您可以这样使用：

      // 通过td元素显示服务器响应的数据，以实现页面局部刷新

      document.getElementById("msg1").innerHTML = sResponse;

      document.getElementById("msg1").style.color = "gray";

    } else {

      alert("访问服务器出现错误：" + oXmlHttpReq.statusText + "(" + oXmlHttpReq.status + ")");

    }

  }

}

function checkData() {

  var username = document.form1.txtUserName.value;

  var password = document.form1.txtPassword.value;

  var status = true;

  if (password == "") {

      document.getElementById("msg2").innerHTML = "密码不能为空！";

      document.getElementById("msg2").style.color = "red";

      document.form1.txtPassword.focus();

      status = false;

  } else {

 document.getElementById("msg2").innerHTML = "";

  }

  if (username == "") {

      document.getElementById("msg1").innerHTML = "用户名不能为空！";

      document.getElementById("msg1").style.color = "red";

      document.form1.txtUserName.focus();

      status = false;

  } else {

 document.getElementById("msg1").innerHTML = "";

  }

  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",{username: $(this).val()}).css("color", "gray");
 
  调用load方法可加载远程HTML文件代码并插入DOM中，其中第1个参数指定要加载的HTML网页网址,
  第2个参数是可选的,用于指定要发送到服务器的key/value数据。
  如果指定了第2个参数，则自动使用post方法向服务器放松数据。