【第22期】观点:IT 行业加班,到底有没有价值?

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





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

相关文章推荐

Struts+ajax验证用户名是否存在

Struts+ajax验证用户名是否存在ActionForm:public class TestForm extends ActionForm {    private String uname;  ...

Re: 给Ajax技术初学者的一些建议

我对AJAX不是很熟悉,在此也发表一点自己的看法,有误论请指正。 在上面jindw把ajax当作是DHTML的延伸,从技术上来看,这种看法应该是正确的,然而我认为并不能将ajax仅仅当作一种技术来看待,在很多人的概念里面,ajax就是XMLHttpRequest,这更是谬误,没有XMLHttp...

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

给Ajax技术初学者的一些建议

给Ajax技术初学者的一些建议:[url]http://www.iteye.com/topic/78360#281517[/url]

struts2+ajax验证

今天闲着无聊就开始翻看struts2,虽然现在公司还是使用的struts1可是在时代潮流面前恐怕很快就会struts2取代;所以就开始自学一下。按照老习惯开始编写登陆程序。基本上算是顺利完成,心血来潮...

Silverlight实例教程 - 自定义扩展Validation类,验证框架的总结和建议

Silverlight Validation验证实例教程系列已经写了<a href="
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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