继上次的用户注册登录案例之后，对其中的部分功能再做进一步改进。上一版中用户提交表单后才对用户名进行校验，虽然做了回显，但还是感觉功能弱了些。为了能有更好用户体验，不是在用户提交表单后才给提示，而是在用户输入用户名后就立即对该用户名进行数据库校验，经过晚上的测试现在可以使用纯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文档，看来还是得多看文档哪。