现在的位置: 首页 > 综合 > 正文

AJAX实例应用-1(注册时判断用户名是否存在)

2013年09月08日 ⁄ 综合 ⁄ 共 4391字 ⁄ 字号 评论关闭

1.首先附上我的注册页面源码。(这其中的User类没有很好的封装及分层,大家凑合着看,我会在最后贴上User的源码,中间的那段JavaScript是重中之重):

 

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%@ page import="com.ycringfinger.shopping.*" %>
<%
    request.setCharacterEncoding(
"GB18030");
    
String action = request.getParameter("action");
    
if(action!=null && action.equals("register")){
        
String username = request.getParameter("username");
        
String password = request.getParameter("password");
        
String phone = request.getParameter("phone");
        
String addr = request.getParameter("addr");
        User u 
= new User();
        u.setUsername(username);
        u.setPassword(password);
        u.setPhone(phone);
        u.setAddr(addr);
        u.setRdate(
new Date(System.currentTimeMillis()));
        u.save();
%>
        
<center>注册成功,谢谢</center>
<%
        return;
    }
%>
<html>
    
<head>
        
<title>用户注册</title>
        
<script language=JavaScript src="script/regcheckdata.js"></script>
        
<script type="text/javascript">
            
var req;
            
function validate() {
                
var idField = document.getElementById("username");
                
var url = "validate.jsp?username=" + escape(idField.value);
                
if(window.XMLHttpRequest) {
                    req 
= new XMLHttpRequest();
                }
 else if (window.ActiveXObject) {
                    req 
= new ActiveXObject("Microsoft.XMLHTTP");
                }

                req.open(
"GET", url, true);
                req.onreadystatechange 
= callback;
                req.send(
null);
            }

            
            
function callback() {
                
if(req.readyState == 4{
                    
if(req.status == 200{
                        
var msg = req.responseXML.getElementsByTagName("msg")[0];
                        setMsg(msg.childNodes[
0].nodeValue)
                    }

                }

            }

            
            
function setMsg(msg) {
                
if(msg == "valid"{
                    document.getElementById(
"usermsg").innerHTML = "<font color='green'>恭喜你,该用户名尚未注册</font>"
                }
 else if(msg == "invalid"{
                    document.getElementById(
"usermsg").innerHTML = "<font color='red'>该用户名已注册</font>"
                }

            }

        
</script>
    
</head>

    
<body>
        
<form name="form" action="register.jsp" method="post"
            onSubmit
="return checkdata()"> 
            
<input type="hidden"name="action" value="register">
            
<table width="750" align="center" border="2">
                
<tr>
                    
<td>
                        用户名:
                    
</td>
                    
<td>
                        
<input type="text" name="username" size="30" maxlength="10" onblur="validate()"><div id="usermsg"></div>
                    
</td>
                
</tr>
                
<tr>
                    
<td>
                        密码:
                    
</td>
                    
<td>
                        
<input type="password" name="password" size="15" maxlength="12">
                    
</td>
                
</tr>
                
<tr>
                    
<td>
                        密码确认:
                    
</td>
                    
<td>
                        
<input type="password" name="password2" size="15" maxlength="12">
                    
</td>
                
</tr>
                
<tr>
                    
<td>
                        电话:
                    
</td>
                    
<td>
                        
<input type="text" name="phone" size="15" maxlength="12">
                    
</td>
                
</tr>
                
<tr>
                    
<td>
                        地址:
                    
</td>
                    
<td>
                        
<textarea rows="12" cols="80" name="addr"></textarea>
                    
</td>
                
</tr>
                
<tr>
                    
<td>
                        
<input type="submit" value="提交">
                        
<input type="reset" value="重置">
                    
</td>
                
</tr>
            
</table>
        
</form>
    
</body>
</html>

 

2.validate.jsp的源码如下(注意前面那几个设置属性如setContentType,setHeader等是必需的):

 

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%@ page import="com.ycringfinger.shopping.*" %>
<%
    response.setContentType(
"text/xml");
    response.setHeader(
"Cache-Control""no-store");
    response.s

抱歉!评论已关闭.