1.js文件validate.js
var xmlhttp;
function verify(){
//获取页面上id为accountname的文本框的值
var username=document.getElementByIdx_x("accountname").value;
//创建XMLHttpRequest对象
if(window.XMLHttpRequest){
//针对FireFox,Mozillar,Opera,Safari,IE7,IE8
xmlhttp = new XMLHttpRequest();
//对某些特定版本的mozillar浏览器的bug进行修正
if(xmlhttp.overrideMineType){
xmlhttp.overrideMineType("text/xml");
}
}else if(window.ActiveXObject){
//针对IE5,IE5.5,IE6
//两个可以用于创建XMLHTTPRequest对象的控件名称。保存在一个JS数组中。
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i = 0; i<activeName.length; i++){
//取出一个控件名进行创建,如果成功就终止循环
try{
xmlhttp = new ActiveXObject(activexName[i]);
break;
}catch(e){}
}
}
if(xmlhttp){
// alert("XMLHttpRequest对象创建成功!");
// return;
}else{
// alert("XMLHttpRequest对象创建失败!");
}
//注册回调函数,只写函数名,不能写括号,写括号表示调用函数。
xmlhttp.onreadystatechange = callback;
//设置连接信息(请求方式,请求的url,true表示异步方式交互,这里的checkaccountname.do就是用来检测用户名是否可用的servlet类,没这句话就无法出来效果)
xmlhttp.open("GET","checkaccountname.do?name=" + username, true);
//发送数据,开始和服务器进行交互。
xmlhttp.send();
// alert(xmlhttp.responseText);
// alert(xmlhttp.status);
// alert(xmlhttp.readyState);
//使用POST方式请求,需要手动设置http的请求头
//xmlhttp.setRequestHeader("Content-Type","aplication/x-www-form-urlencoded");
//xmlhttp.send("name=" + username);
}
//回调函数
function callback(){
//判断对象的状态是否交互完成
if(xmlhttp.readyState == 4){
//判断http的交互是否成功
if(xmlhttp.status == 200){
//获取服务器端返回的数据(文本)
var resbonseText = xmlhttp.responseText;
//将数据显示在页面上
var divNode = document.getElementByIdx_x("result");
//设置元素节点中的html内容
divNode.innerHTML = xmlhttp.responseText;
}
}
}
2.register.jsp
在页面<head></head>之间加入js的导入链接
<head><script type="text/javascript" src="js/validate.js"></script></head>
在<body></body>之间加入
<form name="registerform" action="RegisterAccount" method="post" οnsubmit="return defaultagree(this)">
<div class="updateaccount_frmreg2">
<table>
<tr><td style="text-align:center">账 号:</td>
<td style="text-align:left"><input type="text" οnblur="verify()" id="accountname" name="accountname"/>*<font color="gray" size="2">账号只能由字母,数字或下划线构成,并且必须以字母开头</font></td><td></td></tr>
<tr><td style="text-align:center"></td>
<td style="text-align:left"><font color="red" size="2">
<!-- id=result的div负责显示信息 -->
<div id="result"></div></font></td>
<td></td></tr>
</table>
</form>
3.checkaccountname.java 验证用户名是否可用的servlet类
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.szallway.phr2.portal.factory.ServiceFactory;
import com.szallway.phr2.portal.service.AccountService;
public class checkaccountname extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException,IOException{
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException,IOException{
try{
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
PrintWriter out = response.getWriter();
String old = request.getParameter("name");
// if(old == null || old.length() == 0){
// out.println("账号不能为空!");
//
// }else{
AccountService accser = ServiceFactory.getAccountServiceInstance();
String name = old;
if(accser.isaccountname(name)==false){
out.println("账号已存在");
//out.print("<script>alert('账号已存在!')</script>");
}else{
// out.println("用户名未存在,可以使用!");
}
// }
}catch(Exception e){
e.printStackTrace();
}
}
}
4.web.xml里加入
<servlet>
<servlet-name>checkaccountname</servlet-name>
<servlet-class>com.szallway.phr2.portal.servlet.checkaccountname</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>checkaccountname</servlet-name>
<url-pattern>/checkaccountname.do</url-pattern>
</servlet-mapping>
如此4步,验证用户名是否可有就大功告成了!
2011-08-09 10:21:33