夜光序言：
一个不在乎你的人 你卑微到尘埃里 他都不会多看你一眼
正文：
3 AJAX第三例（用户名是否已被注册）
3.1 功能介绍
在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回true或false，返回true表示这个用户名已经被注册过，返回false表示没有注册过。
客户端得到服务器返回的结果后，确定是否在用户名文本框后显示“用户名已被注册”的错误信息
3.2 案例分析
- regist.jsp页面中给出注册表单；
- 在username表单字段中添加onblur事件，调用send()方法；
- send()方法获取username表单字段的内容，向服务器发送异步请求，参数为username；
- RegistServlet：获取username参数，判断是否为“Genius”，如果是响应true，否则响应false；
3.3 代码
regist.jsp
| <script type="text/javascript"> function createXMLHttpRequest() { try { return new XMLHttpRequest(); } catch (e) { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { return new ActiveXObject("Microsoft.XMLHTTP"); } } }
function send() { var xmlHttp = createXMLHttpRequest(); xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == 4 && xmlHttp.status == 200) { if(xmlHttp.responseText == "true") { document.getElementById("error").innerHTML = "夜光：用户名已被注册"; } else { document.getElementById("error").innerHTML = ""; } } }; xmlHttp.open("POST", "/ajaxdemo1/BServlet", true); xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); var username = document.getElementById("username").value; xmlHttp.send("username=" + username); } </script> |
| <h1>注册</h1> <form action="" method="post"> 用户名：<input id="username" type="text" name="username" onblur="send()"/><span id="error"></span><br/> 密 码：<input type="text" name="password"/><br/> <input type="submit" value="注册"/> </form> |
RegistServlet.java
| public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
if("Genius".equals(username)) { response.getWriter().print(true); } else { response.getWriter().print(false); } } |