在用户名属性哪里设置
onblur = "validate()",即当用户名的文本框失去焦点时触发这个事件。
接下来就用js来实现validate()函数:
<script type="text/javascript"> var req; function validate() { var idField = document.getElementById("userid");//取得文本框里用户名 var url = "validate.jsp?id=" + escape(idField.value);//设置待会跳转的URL,并把用户名传进过去 //alert(url); if(window.XMLHttpRequest) { //判断是否为IE7+,Firefox,Chrome,Opera,Safari浏览器 req = new XMLHttpRequest()//浏览器内部的对象-XMLHttpRequest-用来实现发送和接收HTTP请求与响应信息 } else if (window.ActiveXObject) {//ie5, ie6 req = new ActiveXObject("Microsoft.XMLHTTP"); } req.open("GET",url,true);//用get方式打开刚才设置的url,true设置为异步 req.onreadystatechange = callback; //req调完open后,readystate的值为1,当state的状态改调用callback() req.send(null); } function callback() { if(req.readyState == 4) { //readystate为4表示已把xml数据加载完毕 if(req.status == 200) { //http协议中server反馈给客户端时,status=200表示正常,404表示不正常 //alert(req.responseText); var msg = req.responseXML.getElementsByTagName("msg")[0];//接收标签为msg的内容 //alert(msg); setMsg(msg.childNodes[0].nodeValue);//调用setmsg函数 } } } function setMsg(msg) { mdiv = document.getElementById("usermsg"); if(msg == "invalid") { mdiv.innerHTML = "<font color='red'>用户名已经存在</font>";//判断xml中传来的数据,如果用户名已被注册,既提示“用户名已存在” } else { mdiv.innerHTML = "<font color='green'>恭喜你,此用户名可以注册!</font>";//否则提示可以注册 } } </script>
XM里面的部分内容:
<%@page import="com.User" pageEncoding="ISO-8859-1"%> <% 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 //前面四句是设置返回的头文件名 //下面是到后台查数据库,然后用<msg>标签返回不同的结果 String name = request.getParameter("id"); //System.out.println(name); if(name != null && !name.trim().equals("")) { boolean isExist = User.idExist(name); if(isExist) { response.getWriter().write("<msg>invalid</msg>"); } else { response.getWriter().write("<msg>valid</msg>"); } } %>这就是一个简单的Ajax例子。 原文链接:https://www.f2er.com/ajax/165656.html