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,其值就是由服务器端返回的数据。





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

我对现在正在作的项目的一起疑问和建议

    一、开发和部署方式是否需要改变        二期的开发和部署是各个webmoudle和ejbmoudle分别打包部署,这样使的各个不同功能模块的应用比较独立,公用的jar包引入,不同的应用单...
  • zhijie435
  • zhijie435
  • 2006年12月27日 19:31
  • 598

Drupal 的核心模板以及建议

在核心文件中包含了大量的模板文件,为了覆写这些文件,你所需要做的就是复制特定的文件到你的主题目录中,并清除这些主题的记录。还可以用一些指定的方式去覆写这些文件,这里列了一些默认的核心文件,并解释了如何...
  • w_yunlong
  • w_yunlong
  • 2015年12月29日 11:59
  • 1651

AJax验证

struts2用response怎么将json值返回到页面javascript解析,这里介绍一个struts2与json整合后包的用法。 1.准备工作 ①ajax使用Jquery:jquer...
  • qq_35286826
  • qq_35286826
  • 2017年05月25日 23:20
  • 70

Ajax验证

这是一个比较简单的验证,分为两部分,界面层用jsp,请求转发层用到的是ServletJSP部分代码如下 // 首先创建一个xmlHttpReq对象,非IE浏览器使用new XMLHttpRequest...
  • javayang2010
  • javayang2010
  • 2010年12月09日 14:13
  • 181

ajax验证

表單資料的驗證可以分為客戶端驗證與伺服端驗證,為了安全起見,避免客戶端驗證被跳過,伺服端驗證往往是必須的。當使用者在表單中輸入資料時,在過去往往只能靠使用者完成資料輸入,再按下「送出」按鈕,才可以進行...
  • wqhzxy87812389
  • wqhzxy87812389
  • 2007年08月23日 22:35
  • 665

表单ajax验证

validateform.html:JavaScript代码"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/...
  • twosecond
  • twosecond
  • 2009年07月03日 11:19
  • 253

yii中AJAX验证和客户端验证不能使用的原因

最近做了一个项目,想使用AJAX
  • u013718071
  • u013718071
  • 2014年04月14日 10:04
  • 603

ajax验证用户唯一性

Ajax 验证用户名 body { font-size:12px; } username:  password: var = userText...
  • swjieyi
  • swjieyi
  • 2016年05月30日 09:50
  • 444

用Ajax完成一个简单的验证

业务逻辑:一个标准的输入框,要求输入日期格式的文本,符合要求用绿字显示信息,否则用红字提示。    页面:Validation.html   使用ajax进行验证 //xmlHttpRequest对象...
  • Ingenuus
  • Ingenuus
  • 2007年12月17日 10:54
  • 526

Ajax验证登陆

Ajax实现无跳转验证登陆。
  • yep321
  • yep321
  • 2016年08月14日 20:21
  • 114
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax验证建议模版
举报原因:
原因补充:

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