昕竹轩网站设计-专注网站建设

一、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方法向服务器放松数据。