您当前位置：首页 > web前端 > jscript > ajax实例：XMLHttpRequest打造注册页

ajax实例：XMLHttpRequest打造注册页

来源：程序员人生发布时间：2014-02-26 22:34:25 阅读次数：3454次

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

　下面是代码：

　注册页面html代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>用户注册页 - 建站学院(liehuo.net)</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>
提示：可修改后代码再运行!

　服务器端asp代码：

以下为引用的内容：
<%@ 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!<br/>");
regFlag = false;
}

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

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

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

if( password2.equals(password)) {

} else {

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

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

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

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

}

}
%>

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 html5给文本框实现email域名自动完成效果

下一篇 Jquery获取网站Alexa排名的实例代码

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点