最近想实现以下ajax检测用户名,无奈发现网上很多例子讲的都不清不楚的,最后终于在一个项目发现了一个自己认为写得比较简单易懂的例子,我讲它简化整理了以下。
本例子中将不会详细描述ajax的一些基本概念(如XMLHttpRequest,readyState),这些可以参考http://www.w3school.com.cn/ajax/,里面讲的慢好的。
下面开始将这个检测用户名的小例子,只要新建两个jsp页面即可完成本实验。为了方便起见,本例验证用户名没用去查询数据库,而是当提交的用户名是admin时提示用户名已存在,否则的话提示用户名可用。
ajax.jsp源码:
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Ajax检测用户名实验</title> <script type="text/javascript"> var req; function validate() { var idField = document.getElementById("userid"); var url = "Validate.jsp?userid=" + idField.value; if(window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } req.open("GET", url, true); req.onreadystatechange = callback; req.send(null); } function callback() { if(req.readyState == 4) { if(req.status == 200) { //alert(req.responseText); var msg = req.responseXML.getElementsByTagName("msg")[0]; //alert(msg); setMsg(msg.childNodes[0].nodeValue); } } } function setMsg(msg) { //alert(msg); mdiv = document.getElementById("usermsg"); if(msg == "invalid") { mdiv.innerHTML = "<font color='red'>username exists</font>"; } else { mdiv.innerHTML = "<font color='green'>congratulations! you can use this username!</font>"; } } </script> </head> <body> <form method="post" action="###" onSubmit="###"> <table align="center" cellpadding="4" cellspacing="1"> <tr> <td colspan="2" >注册 - 必填内容</td> </tr> <tr> <td colspan="2" ><span id="usermsg"></span></td> </tr> <tr> <td>用户名:</td> <td><input id="userid" name="userid" type="text" onblur="validate()"></td> </tr> <tr> <td>密码:</td> <td ><input name="password" type="password"></td> </tr> <tr> <td >确认密码:</td> <td ><input name="password2" type="password"></td> </tr> <tr> <td colspan="2" align="center"><input value="提 交" type="submit"></td> </tr> </table> </form> </body> </html>
Validate.jsp源码:
<% String userid=request.getParameter("userid"); userid=new String(userid.getBytes("ISO8859_1"),"gb2312"); response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-store"); //HTTP1.1 response.setHeader("Pragma", "no-cache"); //HTTP1.0 response.setDateHeader("Expires", 0); //prevents catching at proxy server if(userid.equals("admin")){ response.getWriter().write("<msg>invalid</msg>"); }else{ response.getWriter().write("<msg>valid</msg>"); } %>