轻云流火 chitry

你永远不知道未来的你有多强

Ajax验证建议模版




整个注册过程在 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,其值就是由服务器端返回的数据。





阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_29025139/article/details/46795845
文章标签: Ajax Web前端 互联网
个人分类: Web启示录 [基础篇]
想对作者说点什么? 我来说一句

很实用的ajax验证效果

2011年08月03日 35KB 下载

ajax验证登录无刷新

2008年11月03日 98KB 下载

bootstrap比较新颖全面的样式模板

2018年02月02日 2.4MB 下载

比较简单实用HTML模板

2009年02月10日 1.22MB 下载

验证用户、邮箱ajaxform

2011年07月12日 10KB 下载

ajax验证用户登录

2013年04月02日 496KB 下载

ajax验证代码

2012年07月21日 124KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭