ajax实例：XMLHttpRequest打造注册页

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

　下面是代码：

　注册页面html代码：

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN><html><head><title>用户注册页 - 建站学院</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!);

}

}
%>

ajax实例：XMLHttpRequest打造注册页

相关文章