Ajax實現註冊用戶名驗證

ajax技術的實現流程：

 

1.xmlHttp = new XMLHttpRequest();            //創建XMLHttpRequest對象。

 

2.xmlHttp.open("GET",url,true);                   //註冊處理事件的url
3.xmlHttp.onreadystatechange = callback;  //註冊回傳函數
4.xmlHttp.send(null);                                   //發送請求

 

5.function callback(){                                   //在回調方法中進行請求狀態碼判斷。
 if(xmlHttp.readyState == 4){
  if(xmlHttp.status == 200){
    showResult();//回傳處理                           //請求迴應順利，就執行回傳處理。
  }
 }
}

 

6.function showResult() {                           //讀取請求得到的信息。進行分支處理。
 var message = xmlHttp.responseXML.getElementsByTagName("message")[0];
 var msg = message.firstChild.data;
 if(msg=="0"){
  nameEnable = true;
  checkUserNameMsg.innerHTML = "<font color='green'><b>用戶名可以使用</b></font>";
  return true;
 }else if(msg=="1"){
  nameEnable = false;
  checkUserNameMsg.innerHTML = "<font color='red'><B>&nbsp;用戶名已存在,請重新輸入</B></font>";
  
  return false;
 }
 
}//end function

以下是一個完整的例子：

jsp頁面。在用戶名字段失去焦點時，進行ajax驗證用戶名

本實例使用的是Mysql 數據庫。user_info數據表。

字段：

id        int自增長，主鍵

user_name varchar(20) null

user_pwd varchar(16) null

 

使用Hibernate框架反向數據表爲實體Bean

reg.jsp

<textarea cols="68" rows="15" name="code" class="java:firstline[1]">&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %&gt; &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;base href="&lt;%=basePath%&gt;"&gt; &lt;title&gt;My JSP 'reg.jsp' starting page&lt;/title&gt; &lt;meta http-equiv="pragma" content="no-cache"&gt; &lt;meta http-equiv="cache-control" content="no-cache"&gt; &lt;meta http-equiv="expires" content="0"&gt; &lt;meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&gt; &lt;meta http-equiv="description" content="This is my page"&gt; &lt;!-- &lt;link rel="stylesheet" type="text/css" href="styles.css" mce_href="styles.css"&gt; --&gt; &lt;mce:script type="text/javascript"&gt;&lt;!-- var xmlHttp; //創建ajax請求對象 function createXml(){ if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); }else if(window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } //驗證用戶名方法 function checkUserNameAction(){ var nameField = document.regForm.userName.value; if(nameField.length==0) return false; var url ="check?name=" + escape(nameField).replace(//+/g,"%2B").replace(/%/g,"%25"); checkUserNameMsg.innerHTML = "檢測中,請等待..."; createXml(); if(xmlHttp){ xmlHttp.open("GET",url,true); //註冊處理事件的url xmlHttp.onreadystatechange = callback; //註冊回傳函數 xmlHttp.send(null); //發送請求 } }//end checkUserNameAction(); //回傳方法 function callback(){ if(xmlHttp.readyState == 4){ if(xmlHttp.status == 200){ showResult();//回傳處理 } } } //顯示檢測結果 function showResult() { var message = xmlHttp.responseXML.getElementsByTagName("message")[0]; var msg = message.firstChild.data; if(msg=="0"){ nameEnable = true; checkUserNameMsg.innerHTML = "&lt;font color='green'&gt;&lt;b&gt;用戶名可以使用&lt;/b&gt;&lt;/font&gt;"; return true; }else if(msg=="1"){ nameEnable = false; checkUserNameMsg.innerHTML = "&lt;font color='red'&gt;&lt;B&gt;&amp;nbsp;用戶名已存在,請重新輸入&lt;/B&gt;&lt;/font&gt;"; return false; } }//end function //密碼框失焦時,顯示驗證結果 function upm(){ var len = document.regForm.password.value.length; var pm = document.getElementById("pass"); if(eval(len)&lt;4||(len)&gt;16){ pm.innerHTML = "&lt;font color=red&gt;&amp;nbsp;&lt;b&gt;密碼長度不對&lt;/b&gt;&lt;/font&gt;"; }else{ pm.innerHTML = "&lt;font color=green&gt;&amp;nbsp;&lt;b&gt;密碼格式正確&lt;/b&gt;&lt;/font&gt;"; } } //密碼框得到焦點時顯示的提示信息 function gpm(){ var pm = document.getElementById("pass"); pm.innerHTML = "&amp;nbsp;&lt;b&gt;設置您的登陸密碼4-16位&lt;/b&gt;"; document.regForm.password.select(); } // --&gt;&lt;/mce:script&gt; &lt;/head&gt; &lt;body&gt; &lt;form name="regForm" action="" method="post"&gt; &lt;table&gt; &lt;tr&gt; &lt;td height="30" align="right" bgcolor="FFF3D3" class="font_black"&gt; 用 戶 名： &lt;/td&gt; &lt;td width="490" align="left" valign="middle" bgcolor="#F8F8F8"&gt; &lt;input type="text" name="userName" tabindex="2" onblur="checkUserNameAction()" size="18" maxlength="20" /&gt; &lt;font color=red&gt;*&lt;/font&gt; &lt;span id="checkUserNameMsg"&gt; &lt;font color='blue'&gt;&lt;B&gt;您的用戶名必須是唯一的&lt;/B&gt;&lt;/font&gt; &lt;/span&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="30" align="right" bgcolor="FFF3D3" class="font_black"&gt; 密 碼： &lt;/td&gt; &lt;td align="left" bgcolor="F8F8F8"&gt; &lt;input type="password" tabindex=3 onfocus = "gpm()" onblur="upm()" name="password" size="20" maxlength="16"/&gt; &lt;span style="color:red" mce_style="color:red"&gt;*&lt;/span&gt;&lt;span id = "pass" style="color:blue" mce_style="color:blue"&gt;&lt;b&gt; 設置您的登陸密碼4-16位&lt;/b&gt;&lt;/span&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </textarea>

Servlet文件Check.java

package com.ajax1.servlets; import java.io.IOException; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.ajax1.hbm.UserInfoDAO; /** * @author hanson * @created Jul 24, 2009 5:01:16 PM * @version V1.0.0 */ public class Check extends HttpServlet { /** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //Serverlet根據請求的參數，驗證完成後，以xml格式寫下驗證信息。 //供JSP頁面的XMLHttpRequest對象讀取。 response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); //取得前臺參數。 String username=request.getParameter("name"); //參數解密 username = EscapeUnescape.unescape(username);//將字符串反編碼，得到Unicode數據 UserInfoDAO dao = new UserInfoDAO(); //驗證用戶名 List list = dao.findByProperty("userName", username); //根據DB返回的結果,寫下相應的XML信息。 if (list!=null&&list.size()>0){ response.getWriter().write("<message>1</message>"); }else{ response.getWriter().write("<message>0</message>"); } } }

URL解碼類EscapeUnescape.java

 /** * */ package com.ajax1.servlets; /** * @author hanson * @created Jul 24, 2009 5:12:50 PM * @version V1.0.0 */ public class EscapeUnescape { /** * 對字符串進行編碼的,使之成爲url格式的數據 * @param src 要編碼的字符串 * @return 返回編碼後的字符串 */ public static String escape(String src) { int i; char j; StringBuffer tmp = new StringBuffer(); tmp.ensureCapacity(src.length() * 6); for (i = 0; i < src.length(); i++) { j = src.charAt(i); if (Character.isDigit(j) || Character.isLowerCase(j) || Character.isUpperCase(j)) tmp.append(j); else if (j < 256) { tmp.append("%"); if (j < 16) tmp.append("0"); tmp.append(Integer.toString(j, 16)); } else { tmp.append("%u"); tmp.append(Integer.toString(j, 16)); } } return tmp.toString(); } /** * 對url格式的數據進行解碼，使之成爲可用的Unicode數據 * @param src 需要解碼的字符串,通常是在jsp頁面使用escape()方法進行編碼得到 * @return 返回解碼後的數據 */ public static String unescape(String src) { StringBuffer tmp = new StringBuffer(); tmp.ensureCapacity(src.length()); int lastPos = 0, pos = 0; char ch; while (lastPos < src.length()) { pos = src.indexOf("%", lastPos); if (pos == lastPos) { if (src.charAt(pos + 1) == 'u') { ch = (char) Integer.parseInt(src .substring(pos + 2, pos + 6), 16); tmp.append(ch); lastPos = pos + 6; } else { ch = (char) Integer.parseInt(src .substring(pos + 1, pos + 3), 16); tmp.append(ch); lastPos = pos + 3; } } else { if (pos == -1) { tmp.append(src.substring(lastPos)); lastPos = src.length(); } else { tmp.append(src.substring(lastPos, pos)); lastPos = pos; } } } return tmp.toString(); } }