1. 编写页面：
* register.jsp
> 给出注册表单页面
> 给用户名文本框添加onblur事件的监听
> 获取文本框的内容，通过ajax4步发送给服务器，得到响应结果
* 如果为1：在文本框后显示“用户名已被注册”
* 如果为0：什么都不做！
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 3 <html> 4 <head> 5 <title>ajax1</title> 6 <script type="text/javascript"> 7 // 创建异步对象 8 function createXMLHttpRequest() { 9 try { 10 return new XMLHttpRequest();//大多数浏览器 11 } catch (e) { 12 try { 13 return ActvieXObject("Msxml2.XMLHTTP");//IE6.0 14 } catch (e) { 15 try { 16 return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本 17 } catch (e) { 18 alert("哥们儿，您用的是什么浏览器啊？"); 19 throw e; 20 } 21 } 22 } 23 } 24 25 window.onload = function() {//文档加载完毕后执行 26 var userEle = document.getElementById("userEle"); 27 userEle.onblur = function() {//给按钮的点击事件注册监听 28 /* 29 ajax四步操作，得到服务器的响应 30 把响应结果显示到h1元素中 31 */ 32 /* 33 1. 得到异步对象 34 */ 35 var xmlHttp = createXMLHttpRequest(); 36 /* 37 2. 打开与服务器的连接 38 * 指定请求方式 39 * 指定请求的URL 40 * 指定是否为异步请求 41 */ 42 xmlHttp.open("post", "<c:url value='/BServlet'/>", true); 43 /*设置请求头*/ 44 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 45 /* 46 3. 发送请求 47 */ 48 xmlHttp.send("username="+userEle.value);//GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送！ 49 /* 50 4. 给异步对象的onreadystatechange事件注册监听器 51 */ 52 xmlHttp.onreadystatechange = function() {//当xmlHttp的状态发生变化时执行 53 // 双重判断：xmlHttp的状态为4（服务器响应结束），以及服务器响应的状态码为200（响应成功） 54 if(xmlHttp.readyState == 4 && xmlHttp.status == 200) { 55 // 获取服务器的响应结束 56 var text = xmlHttp.responseText; 57 // 获取h1元素 58 var error = document.getElementById("error"); 59 if(text == "1"){ 60 error.innerHTML="用户名已被注册"; 61 }else { 62 error.innerHTML=""; 63 } 64 } 65 }; 66 }; 67 }; 68 </script> 69 </head> 70 <body> 71 <h1>演示用户名是否被注册</h1> 72 <form action="" method="post"> 73 用户名：<input type="text" name="username" id="userEle"><span id="error"></span><br/> 74 密 码：<input type="text" name="password" id="pwdEle"><br/> 75 <input type="submit" value="提交"> 76 77 </form> 78 </body> 79 </html>
2. 编写Servlet
* ValidateUsernameServlet
> 获取客户端传递的用户名参数
> 判断是否为itcast
* 是：返回1
* 否：返回0
1 public class BServlet extends HttpServlet { 2 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 3 4 request.setCharacterEncoding("UTF-8"); 5 response.setContentType("text/html;charset=utf-8"); 6 String username = request.getParameter("username"); 7 8 if(username.equalsIgnoreCase("cuibin")) { 9 response.getWriter().print("0"); 10 }else { 11 response.getWriter().print("1"); 12 } 13 } 14 15 }