struts,jsp ajax异步处理,ajax验证用户名是否重复,XMLHTTP
NewUser.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>
<html>
<head>
< http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
< language='java'>
var reg = /^[\da-zA-Z][\w\.]{2,30}[\da-zA-Z]$/;
var regEmail = /^[a-zA-Z\d][\w_-]{2,14}[a-zA-Z\d]@[a-zA-Z\d]{3,5}([\.][a-zA-Z]{3}|[\.][a-zA-Z]{2}|[\.][a-zA-Z]{3}[\.][a-zA-Z]{2})$/;
newUserValidate(loginUName,loginUPwd,loginUPwdAgain,loginEmail)
{
var loginUName=loginUName.value;
var loginUPwd =loginUPwd.value;
var loginUPwdAgain = loginUPwdAgain.value;
var loginEmail = loginEmail.value;
if(loginUPwd == loginUPwdAgain)
{
alert("一致");
}
else
{
slert("两次密码输入的不一致");
return false;
}
if(reg.test(loginUName) && reg.test(loginUPwd))
{
}
else
{
alert("用户名和密码只能是a-z、A-Z、0-9、下划线的字符");
return false;
}
if(regEmail.test(loginEmail))
{
alert("正确");
}
else
{
alert("Email输入不正确");
return false;
}
}
</>
< language="java" type="text/java">
var syj={};
//发送ajax请求的方法
syj.Ajax=(url,obj){
var httpRequest;
if (ActiveXObject)try{httpRequest = new ActiveXObject("Microsoft.XMLHTTP");}catch (e){try{httpRequest = new ActiveXObject("Msxml2.XMLHTTP");}catch (e){}}
if (!httpRequest){alert('不能创建XMLHTTP实例');obj.onComplete();}
httpRequest.onreadystatechange = (){if (httpRequest.readyState == 4){obj['onComplete'](httpRequest);}}
if(url.indexOf('machineDate')==-1) url+=(url.indexOf('?')==-1?"?":"&")+("machineDate="+new Date().getTime());
url+=(url.indexOf('?')==-1?"?":"&")+obj.parameters;
if(obj.asynchronous==true) httpRequest.open(obj.method, url); else httpRequest.open(obj.method, url,false);
httpRequest.send(null);
return httpRequest;
};
test(){
var loginUName=forms[0].loginUName.value;//获得用户名
var url="test.jsp?loginUName="+encodeURI(loginUName);//传用户名
var usernameMsg=getElementById("usernameMsg");//获得将要显示在jsp里的span标签的名字
if(loginUName==""){
usernameMsg.innerHTML="<font color='red'>× 请填写用户名</font>";//用户名为空
return false;//用户名为空停止在这
}else{
usernameMsg.innerHTML="<image src='process.gif'/> 正在登陆…"
}
syj.Ajax(url,{
method : "GET",
parameters : "s?wd=csdn",
asynchronous : true,
onFailure : (httpRequest){
alert("出错了!");
},
onComplete : (httpRequest){
if(httpRequest.status==200){
usernameMsg.innerHTML=httpRequest.responseText;//输出test.jsp里的值
}
}
}
);
}
</>
</head>
<body>
<html:form action="/newUser.do" method="post" onsubmit="return newUserValidate(loginUName,loginUPwd,loginUPwdAgain,loginEmail)">
<tr>
<td>用户名 :</td><td><html:text property="loginUName" style="ime-mode:disabled" down="if(event.keyCode==13)event.keyCode=9"/></td>
<span id="usernameMsg"></span>
</tr>
<br></br>
<tr>
<td>密 码 :</td><td><html:password property="loginUPwd" style="ime-mode:disabled;width: 130 px; "/></td>
</tr>
<br></br>
<tr>
<td>重复密码:</td><td><html:password property="loginUPwdAgain" style="ime-mode:disabled;width: 130 px; "/></td>
</tr>
<br></br>
<tr>
<td>Email :</td><td><html:text property="loginEmail" style="ime-mode:disabled;width: 130 px; "/></td>
</tr>
<br></br>
<tr>
<td>
请输入验证码:<html:text property="loginCode" style="ime-mode:disabled;width: 130 px; "/>
</td>
</tr>
<tr>
<td>
<html:img page="/code.do" border="0" ="this.src='/lookctrl/code.do'" alt="请输入此验证码，如看不清请点击刷新。" style="cursor:pointer" />
</td>
</tr>
<br></br>
<tr>
<td colspan="2" align="center">
<html:submit value="注册"/>
</td>
</tr>
<input type="button" ="test()" value="测试" />
</html:form>
</body>
</html>
test.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
String loginUName=request.getParameter("loginUName");
if(loginUName.equals("tom")){ out.print("<font color='green'>√ 用户名可用</font>");//用户名可用
}else{
out.print("<font color='red'>× 用户名重复</font>");//用户名重复
}
%>