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>");//用户名重复
}
%>

 

黑色头发  http://heisetoufa.iteye.com

你可能感兴趣的:(apache,html,Ajax,jsp,struts)