Ajax验证建议模版

原创 2015年07月07日 23:20:00



整个注册过程在 Ajax 技术的支持下,利用 JavaScript的 HTML 操纵能力,使得用户不需要进行额外的操作。用户体验的效果逼近 C/S 结构。而整个案例的改进,仅仅是改良了客户端的 register.html文件,添加了 JavaScript代码和 HTML元素。

 



首先还是编写一个 HTML 表单来接收用户输入。

源代码如下(register.html):

<H1>Demo 邮件系统 - 用户注册</H1>
<form name="regForm" id="regForm" action="DoRegister.jsp" method="post">
注册用户名:
<input type="text" name="userName" id="userName" onblur="checkUser();"/>
<label id="checkResult"></label>
<br/>
注册密码:
<input type="password" name="password" id="password"/><br/>
确认密码:
<input type="password" name="password2" id="password2"/><br/>
<input type="submit" value="提交"/>
</form>

在 HTML文件中对id 为 userName的文本框元素添加了 onblur 事件。这样,当这个文本框失去焦点,即用户填完了注册用户名,准备继续填写注册密码时,事件被触发。JavaScript方法checkUser()被调用。下面是checkUser()的定义:

var req;
function checkUser(){
var checkResult = document.getElementById("checkResult");
checkResult.innerHTML="正在检测用户名...";
var userName=document.getElementById("userName").value;
//得到浏览器中可以发送http请求的对象,本例只对IE5.5+有效
req=new ActiveXObject("Microsoft.XMLHttp");
req.open("get","http://localhost:8080/test1/CheckUserName.jsp? checkUserName="+userName);
//javascript特殊语法,表明req的状态改变将调用handleRequest方法
req.onreadystatechange=handleRequest;
req.send(null);
}

为了便于理解,JavaScript方法checkUser()被写得很简单。其中最关键的步骤就是方法将会生成一个XMLHttpRequest对象在IE浏览器中,这个对象以ActiveX控件的形式出现。有了XMLHttpRequest对象之后,JavaScript方法可以利用它直接发送异步请求到服务器端而不需要刷新当前浏览器页面。当服务器端返回处理结果时, XMLHttpRequest对象的状态将会发生改变,这样会触发相应的 JavaScript方法被调用。在案例中,handleRequest()方法就是用来处理服务器端返回的结果。

编写 handleRequest 方法:

function handleRequest(){
var checkResult = document.getElementById("checkResult");
//判断就绪状态
if(req.readyState==4){
if(req.status==200){
checkResult.innerHTML=req.responseText;
}
else{
alter("An error occurred:"+req.statusText);
}
}
}

HandlerRequest()方法的逻辑也比较简单,当服务器端有正常返回值时,就在 id 为 checkResult 的 label 元素中添加一段HTML,其值就是由服务器端返回的数据。






整个注册过程在 Ajax 技术的支持下,利用 JavaScript的 HTML 操纵能力,使得用户不需要进行额外的操作。用户体验的效果逼近 C/S 结构。而整个案例的改进,仅仅是改良了客户端的 register.html文件,添加了 JavaScript代码和 HTML元素。

 



首先还是编写一个 HTML 表单来接收用户输入。

源代码如下(register.html):

<H1>Demo 邮件系统 - 用户注册</H1>
<form name="regForm" id="regForm" action="DoRegister.jsp" method="post">
注册用户名:
<input type="text" name="userName" id="userName" onblur="checkUser();"/>
<label id="checkResult"></label>
<br/>
注册密码:
<input type="password" name="password" id="password"/><br/>
确认密码:
<input type="password" name="password2" id="password2"/><br/>
<input type="submit" value="提交"/>
</form>

在 HTML文件中对id 为 userName的文本框元素添加了 onblur 事件。这样,当这个文本框失去焦点,即用户填完了注册用户名,准备继续填写注册密码时,事件被触发。JavaScript方法checkUser()被调用。下面是checkUser()的定义:

var req;
function checkUser(){
var checkResult = document.getElementById("checkResult");
checkResult.innerHTML="正在检测用户名...";
var userName=document.getElementById("userName").value;
//得到浏览器中可以发送http请求的对象,本例只对IE5.5+有效
req=new ActiveXObject("Microsoft.XMLHttp");
req.open("get","http://localhost:8080/test1/CheckUserName.jsp? checkUserName="+userName);
//javascript特殊语法,表明req的状态改变将调用handleRequest方法
req.onreadystatechange=handleRequest;
req.send(null);
}

为了便于理解,JavaScript方法checkUser()被写得很简单。其中最关键的步骤就是方法将会生成一个XMLHttpRequest对象在IE浏览器中,这个对象以ActiveX控件的形式出现。有了XMLHttpRequest对象之后,JavaScript方法可以利用它直接发送异步请求到服务器端而不需要刷新当前浏览器页面。当服务器端返回处理结果时, XMLHttpRequest对象的状态将会发生改变,这样会触发相应的 JavaScript方法被调用。在案例中,handleRequest()方法就是用来处理服务器端返回的结果。

编写 handleRequest 方法:

function handleRequest(){
var checkResult = document.getElementById("checkResult");
//判断就绪状态
if(req.readyState==4){
if(req.status==200){
checkResult.innerHTML=req.responseText;
}
else{
alter("An error occurred:"+req.statusText);
}
}
}

HandlerRequest()方法的逻辑也比较简单,当服务器端有正常返回值时,就在 id 为 checkResult 的 label 元素中添加一段HTML,其值就是由服务器端返回的数据。





版权声明:本文为博主原创文章,未经博主允许不得转载。

Ajax验证用户名是否存在例

  • 2008年12月28日 16:39
  • 5KB
  • 下载

AJAX验证实例

  • 2008年06月26日 16:59
  • 1.29MB
  • 下载

jquery $.ajax验证用户名是否存在示例代码

jquery $.ajax验证用户名是否存在示例代码   AjaxXMLServer的Servlet代码如下: package com.web; import java.io....

ajax验证代码

  • 2012年07月21日 22:14
  • 124KB
  • 下载

简单的Ajax验证用户名

ajax

C# ASP.NET - AJAX验证会员注册信息

  • 2011年11月24日 10:31
  • 1.9MB
  • 下载

简单创建用户名密码ajax验证 jquery+ThinkPHP

添加用户                                                   用户账号:                               ...
  • fw1993
  • fw1993
  • 2014年08月20日 21:31
  • 506

阿贾克斯ajax验证

  • 2012年12月14日 21:58
  • 36KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax验证建议模版
举报原因:
原因补充:

(最多只允许输入30个字)