烈火建站学院（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!");
}
}
%>
