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验证代码

  • 2012-07-21 22:14
  • 124KB
  • 下载

ajax验证登陆

  • 2013-12-24 20:49
  • 30KB
  • 下载

AJAX验证是否重复

AJAX验证用户代码重复 当焦点一离开就去检查 1.input对象的onblur事件 onblur="validate(this)" 2. 创建XMLHttprequest对象 fu...

基于jsp+Servlet实现注册页面Ajax验证码

去年在学校做课设时用到表单验证时遇到有需要用到验证码的地方,于是做了一个小demo。最近记性越来越不好,所以记录一下。用到三个文件,分别为:vercode.jsp,AuthImg.java,Check...

阿贾克斯ajax验证

  • 2012-12-14 21:58
  • 36KB
  • 下载

JavaScript通用AJAX验证技术

  • 2015-01-06 16:57
  • 242KB
  • 下载

使用ajax验证用户名是否重复

ajaxTest.jsp JSP Page 输入用户名:光标移除检查是否重复 显示结果 ...

简单登陆AJAX验证

  • 2014-12-09 17:27
  • 14KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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