Ajax技术实现验证码的刷新和局部验证(2)_H5之家 - 中国HTML5教程资源分享第一站

在这段脚本中，getRequestObject函数调用后，将创建一个XMLHTTPRequest对象。注意其中的if判断，因为这世界还不是平的，IE和FireFox是有差别的；第一个if判断如果是IE浏览器，则调用MS的请求对象，第二个在浏览器是FireFox、Netscape的情况下会有效；当然，最后实在不行了，就告诉用户这玩不成啦。

AJAX第二步：编写回调方法;

现在我们有了请求对象，接下来要考虑的是XMLHTTPRequest对象向服务器发送请求后，服务器返回的结果应该如何处理，即AJax中的回调方法；在实现这个处理逻辑前先看一下页面的html代码：

<html><head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>AJAX检测重复用户名蓝杰信息@NetJava.cn</title> </head> <body> <br>注册用户名:<input type="text"/>  <div id=divErrorName"></div> <br>注册密码:<input type="password"/> <br><input type="button" value="注册"/> </body> </html>

回调方法要实现的逻辑很简单，就是将CheckUserNameServlet.java这个Servlet返回的消息显示到名字为divErrorName的div中。如下代码：

//回调方法实现:将服务器返回的消息更新到div中 function processResult() { if ((request.readyState == 4) && (request.status == 200)) { //1.弹出对话框以便调试 alert("服务器返回的是: "+request.responseText); //显示到指定的组件中 document.getElementById("divErrorName").innerHTML=request.responseText; } }

上面这段代码，关键在if判断语句，请求对象的readyState属性值代表请求对象的当前状态，为4时，代表己处理完成；而status为http应答代码，200表示服务器响应OK，如果是404呢？

如果请求对象己处理完毕，服务器返回的应答码也是OK的了，就请求对象的responseText属性值就代表了服务器返回给客户端的文本内容。

AJAX第三步：发送异步请求

必须清楚的知道，AJAX发送的请求也是通过HTTP协议传送着，这意味着ajax也可以发送get或post请求，请看如下代码：

function sendRequest() { //创建XMLHTTPRequest对象 getRequestObject(); //绑定回调方法， request.onreadystatechange=processResult; //发送请求 // request.open("GET", "index.jsp", true); //发送Post请求 request.open("POST", "servlet/CheckUserNameServlet", true); request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); var userName=document.getElementById("userName").value; //将userName做为请求参数发送上去 request.send("userName="+userName); }

CheckUserNameServlet代码如下：

public class CheckUserNameServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException { String userName = request.getParameter("userName"); System.out.println("收到了请求"+username); PrintWriter out = response.getWriter(); if(userName.equals("newer")){ out.write("用户名已经被占用"); }else{ out.write("该用户名可以被使用"); } out.flush(); } }

完整的html页面完整代码如下：

<html><head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>AJAX检测重复用户名蓝杰信息@NetJava.cn</title> </head> <body> <script type="text/javascript"> //定义了XMLHttpRequest对象 var request; //创建XMLHttpRequest对象函数 function getRequestObject() { if (window.ActiveXObject) { request=new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { request=new XMLHttpRequest(); } else { window.alert("你的浏览器不支持XMLHTTPRequest，将无使用AJAX功能！"); } } //回调方法实现:将服务器返回的消息更新到div中 function processResult() { if ((request.readyState == 4) && (request.status == 200)) { //1.弹出对话框以便调试 alert("服务器返回的是: "+request.responseText); //显示到指定的组件中 document.getElementById("divErrorName").innerHTML=request.responseText; } } //发送请求,绑定回调方法 function sendRequest() { //创建XMLHTTPRequest对象 getRequestObject(); //绑定回调方法， request.onreadystatechange=processResult; //发送请求 // request.open("GET", "index.jsp", true); //发送Post请求 request.open("POST", "servlet/CheckUserNameServlet", true); request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); var userName=document.getElementById("userName").value; //将userName做为请求参数发送上去 request.send("userName="+userName); } </script> <br>注册用户名:<input type="text" onBlur="sendRequest();"/>  <div></div> <br>注册密码:<input type="password"/> <br><input type="button" value="注册"/> </body> </html>

4，通过上面的Ajax三部曲，现在回到验证码刷新和验证

1，页面实现：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function refresh(){ document.getElementById("picture").src="ImageServletid="+Math.random(); } var request;//异步请求对象 function createXMLHttpRequest() { if (window.ActiveXObject) { request = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { request = new XMLHttpRequest(); } else { window.alert("你的浏览器不支持XMLHTTPRequest，将无使用AJAX功能！"); } } //回调函数[响应之后执行的函数] function processResult() { if ((request.readyState == 4) && (request.status == 200)) { var str = request.responseText; if(str=="true"){ //显示到指定的组件中 alert("恭喜你！！！验证码正确"); }else{ //显示到指定的组件中 alert("验证码错误!!!!"); } } } //发送请求,绑定回调方法 function sendRequest() { //创建XMLHTTPRequest对象 createXMLHttpRequest(); //绑定回调方法， request.onreadystatechange = processResult; //获得输入框中的内容 var validate = document.getElementById("Validate").value; //发送请求 // request.open("GET", "AccountCheckServletusername="+username, true); //发送Post请求 request.open("POST", "validateServlet", true); request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //将userName做为请求参数发送上去 request.send("validate=" + validate); //request.send(null); } </script> <body> 用户名：<input type="text"><br/> 验证码：<input type="text" value="Validate" onblur="sendRequest()">< img src="ImageServlet"><span>看不清,换一张</span>