最火下载站首页
手机版
最火下载站
关注公众号
最火下载站

当前位置:首页 > 网络知识 > Web前端 > Ajax/JavaScript> ajax实例:XMLHttpRequest打造注册页

ajax实例:XMLHttpRequest打造注册页

文章作者:网友投稿 发布时间:2008-12-16 来源:网络

 烈火建站学院(LieHuo.Net)文档 看了好久的ajax,自己动手做的例子却很少,今天决定自己动手写一个,功能很简单,实现一个简单的用户名注册功能,同时对用户输入在服务器端进行简单校验,没有用数据库保存用户名,这里利用application·对象模拟。做了好久才弄好,遇到了很多问题,最后得以解决,比较有意思的地方是当我写完例子后,在firefox下运行正常,但是在ie下有点问题,注册过的用户名还是显示注册成功,查了好久没有搞出原因,最后又复习了以前看过的一个视频教程,才知道是IE的缓存造成的,用了一个小技巧欺骗ie一下,就可以轻松搞定!感觉收获挺大的!

 下面是代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用户注册页 - 烈火建站学院(veryhuo.com)</title>
<script type="text/javascript"> 
function createXmlHttpReq() { 
                if(window.XMLHttpRequest) { 
                    xmlHttpReq = new XMLHttpRequest(); 
                 
                } else { 
                 
                    xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP"); 
                 
                } 
                return xmlHttpReq; 
             
            } 
            function processResponse() { 
                if(xmlHttpReq.readyState == 4) { 
                    if(xmlHttpReq.status == 200) { 
                        var res = xmlHttpReq.responseText; 
                        document.getElementById("message").innerHTML=res;                
                     
                    } 
                 
                } 
             
            } 
            function sendRequest(url) { 
                url = convertUrl(url); 
                createXmlHttpReq(); 
                xmlHttpReq.open("get",url,true); 
                xmlHttpReq.onreadystatechange=processResponse; 
                xmlHttpReq.send(null); 
                 
            } 
            function convertUrl(url) { 
                var timestamp = (new Date()).valueOf(); 
                if(url.indexOf("?") >= 0) { 
                    urlurl = url + "t=" + timestamp; 


                } else { 
                    urlurl = url +"?t=" + timestamp; 
                } 
                return url; 

            } 
            function checkUsername() { 
                var url = "check.jsp?type=username&username="+document.getElementById("username").value; 
                sendRequest(url); 
             
             
            } 
            function checkPassword() { 
                var url = "check.jsp?type=password&password="+document.getElementById("password").value; 
                sendRequest(url);            
             
            } 
             
            function checkPassword2() { 
                var url = "check.jsp?type=password2&password2="+document.getElementById

("password2").value+"passwordpassword="+document.getElementById("password").value; 
                sendRequest(url);    
             
            } 
             
            function doSubmit() { 
                 
                var url = "check.jsp?type=submit&username="+document.getElementById

("username").value+"password="+document.getElementById("password").value+"password2password2="+document.getElementById

("password2").value; 
                sendRequest(url); 
            } 
         
         
        </script>
</head>
<body>
<h3>
用户注册
</h3>
<img src="img/ico_loading3.gif" _fcksavedurl="img/ico_loading3.gif" _fcksavedurl="img/ico_loading3.gif" id="loading" style="display:none;"></img>
<div id="message" style="color:red;">
</div>
用户名称:
<input id="username" name="username" type="text" size="12" onblur="checkUsername()"/>
<br />
用户密码:
<input id="password" name="password" type="password" size="12" onblur="checkPassword()" />
<br />
再输一次:
<input id="password2" name="password" type="password" size="12" onblur="checkPassword2()" />
<br />
<button id="submit" onclick="doSubmit()">
提交注册
</button>
</body>
</html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 

<% 
String type = request.getParameter("type"); 
if (type.equals("username")) { 
String username = request.getParameter("username"); 

if (username != null && username.length() > 0) { 
if (application.getAttribute(username) != null) { 

out.println("Username is exist!"); 
} else { 
out.println("Username is OK!"); 
} 


} else { 
out.println("Username is need!"); 
} 

} else if(type.equals("password")) { 
String password = request.getParameter("password"); 
if(password != null && password.length() > 0) { 
out.println("password is ok"); 

} else { 
out.println("Password is need!"); 

} 

} else if (type.equals("password2")) { 
String password2 = request.getParameter("password2"); 
if(password2 != null && password2.length() > 0) { 
String password = request.getParameter("password"); 
if( password2.equals(password)) { 
out.println("Password2 is OK!"); 
} else { 

out.println("Password2 is not equal Password!"); 
} 

} else { 
out.println("Password2 is need!"); 

} 

} else if (type.equals("submit")) { 

boolean regFlag = true; 

String username = request.getParameter("username"); 
String password = request.getParameter("password"); 
String password2 = request.getParameter("password2"); 

if (username != null && username.length() > 0) { 

if (username != null && username.length() > 0) { 
if (application.getAttribute(username) != null) { 
regFlag = false; 
out.println("username is exist!"); 
} 
} 

} else { 
out.println("Username is needed!
"); 
regFlag = false; 
} 

if(password != null && password.length() > 0) { 

} else { 
out.println("Password is need!
"); 
regFlag = false; 

} 
if(password2 != null && password2.length() > 0) { 

if( password2.equals(password)) { 

} else { 

out.println("Password2 is not equal Password!
"); 
regFlag = false; 
} 

} else { 
out.println("Password2 is need!
"); 
regFlag = false; 

} 
if (regFlag == true) { 
application.setAttribute(username,username); 

out.println("Register is successful!"); 

} 

} 
%>


上一篇: 实例代码:利用javascript获取网页文档高度

下一篇: javascript选取XML节点以及xslt变形-IE篇

共有0条评论网友评论

游戏排行榜