繼上次的用戶注冊登錄案例之后，對其中的部分功能再做進一步改進。上一版中用戶提交表單后才對用戶名進行校驗，雖然做了回顯，但還是感覺功能弱了些。為了能有更好用戶體驗，不是在用戶提交表單后才給提示，而是在用戶輸入用戶名后就立即對該用戶名進行數據庫校驗，經過晚上的測試現在可以使用純js版和jquery版。
准備工作，先編寫好驗證用戶名重復的后台Servlet程序，然后在jsp或html中使用js對用戶名進行驗證，當用戶輸入用戶名文本框推動焦點時立即觸發驗證。
下面是jquery代碼。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <% out.clear(); %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>使用ajax進行異步驗證</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <style type="text/css"> body{ font-size:12px;} table{ font-size:12px;} table input{ width:120px;} table em{ color:#ff0000;} #body{ margin-left:200px; margin-top:220px;} </style> <script type="text/javascript" src="Jquery/jquery-1.7.2.min.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("#username").focus(); }); var hadoop = function(){ // 異步驗證用戶是否重復 if($.trim($("#username").val())==""){ $("#message").html("用戶名不能為空"); $("#username").focus(); }else{ $.ajax({ type: "post", url: "dumplicate.do", data: "username=" + $("#username").val(), success: function(message){ $("#message").html(message); } }); } }; </script> </head> <body> <div id="body"> <form action="#" method="post"> <table> <tr> <td>用戶名：</td><td><input type="text" id="username" name="username" onblur="hadoop()" /> </td> <td> <em id="message"></em> </td> </tr> <tr> <td>密碼：</td><td colspan="2"><input type="text" /></td> </tr> </table> </form> </div> </body> </html>
下面是js版代碼。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <% out.clear(); %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>使用ajax進行異步驗證</title> <meta http-equiv="content-type" content="text/xml;charset=utf-8" /> <style type="text/css"> body{ font-size:12px;} table{ font-size:12px;} table input{ width:120px;font-size:12px;} table em{ color:#ff0000;} .tips{ text-align:right;} #body{ margin-left:200px; margin-top:220px;} </style> <script language="javascript" type="text/javascript"> window.onload=function(){ document.getElementById("username").focus(); }; var xmlhttp; function hadoop() { // 1.創建XMLHttpRequest對象 if (window.XMLHttpRequest) { // IE7,IE8,FireFox,Mozilla,Safari,Opera xmlhttp = new XMLHttpRequest(); if (xmlhttp.overrideMimeType) { xmlhttp.overrideMimeType("text/xml"); } } else if (window.ActiveXObject) { // IE6,IE5.5,IE5 var activexName = [ "MSXML2.XMLHTTP", "Miscrosoft.XMLHTTP" ]; for ( var i = 0; i < activexName.length; i++) { try { xmlhttp = new ActiveXObject(activexName[i]); break; } catch (e) { } } } if (xmlhttp == undefined || xmlhttp == null) { alert('當前瀏覽器不支持創建XMLHttpRequest對象'); return; } //2.注冊回調函數 xmlhttp.onreadystatechange = callback; // 注意方法調用后面不加括號 //xmlhttp.onreadystatechange = callback(); // 獲取文本框中輸入的內容，經過兩次編碼防止中文亂碼 // 后台使用URLDecoder.decode(username,"utf-8")對username解碼 var userName = document.getElementById("username").value; if(userName==""){ document.getElementById("message").innerHTML="用戶名不能為空"; $("#username").focus(); return; } userName = encodeURI(encodeURI(userName)); // 3.設置和服務器端交互參數 xmlhttp.open("POST", "${pageContext.request.contextPath }/dumplicate.do?username=" + userName, true); // 4.設置向服務器端發送的數據，啟動和服務器端的交互 xmlhttp.send(null); } function callback() { // 5 .判斷和服務器端的交互是否完成，還要判斷服務器端是否正確返回了數據 if (xmlhttp.readyState == 4) { // 表示和服務器端的交互已經完成 if (xmlhttp.status == 200) { // 表示服務器的響應代碼是200，正確的返回了數據 // 純文本數據的接受方法 var message = xmlhttp.responseText; // XML數據對應的DOM對象的接受方法 // 使用的前提是，服務器端需要設置content-type為text/xml // var domXml = xmlhttp.responseXML; //向div標簽中填充文本內容的方法 var div = document.getElementById("message"); if(message=="用戶名已被注冊"){ document.getElementById("username").focus(); document.getElementById("username").select(); } div.innerHTML = message; } } } </script> </head> <body> <div id="body"> <form action="#" method="post"> <table> <tr> <td class="tips">用戶名：</td> <td> <input type="text" id="username" name="username" value="祁連山" onblur="hadoop()" /> </td> <td> <em id="message">*</em> </td> </tr> <tr> <td class="tips">密碼：</td><td colspan="2"><input type="text" /></td> </tr> </table> </form> </div> </body> </html>
從上面的代碼量就可以看出來jquery的強大之處了，所以有空沒空多看看jquery，自己會用才是王道。在這里也感謝一位網名叫牛腩的廣西南寧朋友提供js版本，jquery版本出自jquery文檔，看來還是得多看文檔哪。