您當前位置：首頁 > web前端 > jscript > ajax實例：XMLHttpRequest打造注冊頁

ajax實例：XMLHttpRequest打造注冊頁

來源：程序員人生發布時間：2014-02-26 22:34:25 閱讀次數：3731次

　建站學院（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關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

ajax實例：XMLHttpRequest打造注冊頁