javascript证件照 js图片验证码

<div  style="font-size: 14px"></div>

先说点无关紧要的吧，两个知识点：

 (1)，方法一：使用Js局部刷新验证码的做法是在页面中加上一个img标签，src属性设为一个servlet或者.jsp来请求验证码图片，html代码如下:

<img src="ImageServlet" οnclick="refresh(this)"/>

 在一般情况下刷新一次页面，验证码图片也会变化一次，但有时候我们希望验证码图片变化时不刷新整个页面，也就是局部刷新的效果，代码如下：

js代码：

<
 
 
script type="text/javascript">
function refresh(obj){
obj.src="ImageServlet?id="+Math.random();
}
</script>

 

其中需要注意的是请求路径中必须要有参数（参数名可随意定义），参数值不能是一个固定值而是随机数。 代码中obj对象是指img标签对象。

方法二：

html代码如下：

<img src="ImageServlet"  id="picture" ><span style='color:#0000cc'  οnclick="refresh()">看不清,换一张</span>

 js代码如下：

function refresh(){
	 document.getElementById("picture").src="ImageServlet?id="+Math.random();
}

  （2)，获取图片的ImageServlet代码如下：

package servlet;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;

/**
 * Servlet implementation class ImageServlet
 */
public class ImageServlet extends HttpServlet {
// 定义可选择的字符
private static final String CHARS = "23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ";
static Random random = new Random();
 // 得到一个随机的字符串
private String getRandomString() {
StringBuffer buffer = new StringBuffer();
for (int i = 0; i < 4; i++) { // 生成四个字符
buffer.append(CHARS.charAt(random.nextInt(CHARS.length())));}
return buffer.toString();
}
// 随机背景颜色
public static Color getRandomColor() { // 得到随机颜色
return new Color(random.nextInt(128) + 127, random.nextInt(128) + 127,random.nextInt(128) + 127);
    }
    public static Color getReverseColor(Color c) { // 得到颜色的反色
	return new Color(255 - c.getRed(), 255 - c.getGreen(),
					255 - c.getBlue());
		}
  public void doGet(HttpServletRequest request, HttpServletResponse response)
				throws ServletException, IOException {
		response.setContentType("image/jpeg"); // 设置输出类型
     // 得到随机字符串
	String randomString = getRandomString();
			// 将getSession（）设置为true，当会话不存在是返回null
			request.getSession(true).setAttribute("randomString", randomString);
			// 设置图片的宽、高
			int width = 80;
			int height = 30;

			Color bcolor = getRandomColor(); // 设置背景色
			Color fcolor = getReverseColor(bcolor); // 前景色

			// 创建一个彩色图片
			BufferedImage bimage = new BufferedImage(width, height,
					BufferedImage.TYPE_INT_BGR);
			// 创建绘图对象,从bimage上得到的绘制对象，会把数据绘制到bimage上
			Graphics2D g = bimage.createGraphics();
			// 字体样式为宋体,加粗，20磅
			g.setFont(new Font("Vijaya", Font.BOLD, 20));
			// 先画出背景色
			g.setColor(bcolor);
			g.fillRect(0, 0, width, height);

			// 再画出前景色
			g.setColor(fcolor);
			for (int i = 0; i < randomString.length(); i++) {
				// 绘制随机字符
				g.drawString(randomString.charAt(i) + "", 10 + i * 12, 22);
			}

			// 画出干扰点
			for (int i = 0, n = random.nextInt(100); i < n; i++) {
				g.fillRect(random.nextInt(width), random.nextInt(height), 1, 1);
			}

			// 将图像输出到浏览器
			ServletOutputStream outstream = response.getOutputStream();
			JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(outstream);

			encoder.encode(bimage);
			outstream.flush();

			outstream.close();
		}
	}

 现在说到核心的Ajax技术：

传统web页面的服务是基于http协议的，所以它永远也改变不了“请求—响应”的模式。你必须“点”一下，它才能动一下，而且每次都必须刷新整个页面，这也意味着服务器要将所有页面上的数据传送下来，即使你的点击只是需要改变页面上一行十个字的内容； AJAX代码运行在浏览器和服务器之间，通过编程，你可以让ajax代码仅从服务器上提取需要改变的数据，也只改变页面中需要改变的某一部分：某一个div层、表格中的某一个单元格。用户不会看到页面全部被刷新了；当使用了ajax技术时，用户发送请求时(点击事件)将交由ajax代码处理，用户请求即完成。AJAX代码随后自己将请求发送给服务器，一旦服务器返回的响应，AJAX代码即根据返回的业务更新页面上的某个部分，这部分是由AJAX处理完成，与用户操作流程无关。

 

我们以一个典型的示例：即时验证是否有重复用户名的AJAX应用为例，讲解AJAX编写的基本步骤

1，当用户输入用户名后，焦点离开输入框，即触发输入框的onBlur事件，这个事件将调用js编写的ajax代码，将用户输入发送给服务器验证，并将服务器返回的结果消息显示在输入框下面的div层上。

这个流程将由三部分组成：

login.html:用户填写用户名的页面：

CheckUserNameServlet.java:服务器上用来验证用户名的Servlet，返回一个字符串作为结果；

Js编写的AJAX代码:请送请求，并更新页面

AJAX第一步：创建XMLHTTPRequest对象；

  XMLHTTPRequest是AJAX应用中的核心API，它被js调用以向服务器发送请求，并异步接收服务器返回的数据后，更新局部页面。使用AJAX功能时，首先要在js中创建XMLHTTPRequest对象： 

<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功能！");
        } 
     } 
  </script>

 在这段脚本中，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" name="userName"/>
<!-- 这个div层内将显示ajax从服务器返回的消息 -->
<div id=divErrorName" style="color:red;"></div>
<br>注册  密码:<input type="password" name="userPWD"/>
<br><input type="button" name="regUser" 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" name="userName" onBlur="sendRequest();"/>
<!-- 这个div层内将显示ajax从服务器返回的消息 -->
<div id="divErrorName" style="color:red;"></div>
<br>注册  密码:<input type="password" name="userPWD"/>
<br><input type="button" name="regUser" 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="ImageServlet?id="+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", "AccountCheckServlet?username="+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" name="userName"><br/>
验证码：<input type="text" name="Validate" value="Validate" οnblur="sendRequest()">< img src="ImageServlet" id="picture"><span style='color:#0000cc'  οnclick="refresh()">看不清,换一张</span>

 

 2，ImageServlet获取图片，代码见本文档开始处；

package servlet;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;

/**
 * Servlet implementation class ImageServlet
 */
public class ImageServlet extends HttpServlet {
	// 定义可选择的字符
		private static final String CHARS = "23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ";
		static Random random = new Random();

		// 得到一个随机的字符串
		private String getRandomString() {
			StringBuffer buffer = new StringBuffer();
			for (int i = 0; i < 4; i++) { // 生成六个字符
				buffer.append(CHARS.charAt(random.nextInt(CHARS.length())));
			}
			return buffer.toString();
		}

		// 随机背景颜色
		public static Color getRandomColor() { // 得到随机颜色
			return new Color(random.nextInt(128) + 127, random.nextInt(128) + 127,
					random.nextInt(128) + 127);
		}

		public static Color getReverseColor(Color c) { // 得到颜色的反色
			return new Color(255 - c.getRed(), 255 - c.getGreen(),
					255 - c.getBlue());
		}

		public void doGet(HttpServletRequest request, HttpServletResponse response)
				throws ServletException, IOException {
			response.setContentType("image/jpeg"); // 设置输出类型

			// 得到随机字符串
			String randomString = getRandomString();
			// 将getSession（）设置为true，当会话不存在是返回null
			request.getSession(true).setAttribute("randomString", randomString);
			// 设置图片的宽、高
			int width = 80;
			int height = 30;

			Color bcolor = getRandomColor(); // 设置背景色
			Color fcolor = getReverseColor(bcolor); // 前景色

			// 创建一个彩色图片
			BufferedImage bimage = new BufferedImage(width, height,
					BufferedImage.TYPE_INT_BGR);
			// 创建绘图对象,从bimage上得到的绘制对象，会把数据绘制到bimage上
			Graphics2D g = bimage.createGraphics();
			// 字体样式为宋体,加粗，20磅
			g.setFont(new Font("Vijaya", Font.BOLD, 20));
			// 先画出背景色
			g.setColor(bcolor);
			g.fillRect(0, 0, width, height);

			// 再画出前景色
			g.setColor(fcolor);
			for (int i = 0; i < randomString.length(); i++) {
				// 绘制随机字符
				g.drawString(randomString.charAt(i) + "", 10 + i * 12, 22);
			}

			// 画出干扰点
			for (int i = 0, n = random.nextInt(100); i < n; i++) {
				g.fillRect(random.nextInt(width), random.nextInt(height), 1, 1);
			}

			// 将图像输出到浏览器
			ServletOutputStream outstream = response.getOutputStream();
			JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(outstream);

			encoder.encode(bimage);
			outstream.flush();

			outstream.close();
		}
	}

 

3，服务器对于Ajax请求是如何处理的呢?即validateServlet

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class validateServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String validate= request.getParameter("validate");
		String randomString=(String)request.getSession(true).getAttribute("randomString");
		PrintWriter out=response.getWriter();
		if(validate.equalsIgnoreCase(randomString)){
		 out.write("true");
	 }else{
		 out.write("false");
	 }
	
	}

}

 

 

 

 

package servlet;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;

/**
 * Servlet implementation class ImageServlet
 */
public class ImageServlet extends HttpServlet {
// 定义可选择的字符
private static final String CHARS = "23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ";
static Random random = new Random();
 // 得到一个随机的字符串
private String getRandomString() {
StringBuffer buffer = new StringBuffer();
for (int i = 0; i < 4; i++) { // 生成四个字符
buffer.append(CHARS.charAt(random.nextInt(CHARS.length())));}
return buffer.toString();
}
// 随机背景颜色
public static Color getRandomColor() { // 得到随机颜色
return new Color(random.nextInt(128) + 127, random.nextInt(128) + 127,random.nextInt(128) + 127);
    }
    public static Color getReverseColor(Color c) { // 得到颜色的反色
	return new Color(255 - c.getRed(), 255 - c.getGreen(),
					255 - c.getBlue());
		}
  public void doGet(HttpServletRequest request, HttpServletResponse response)
				throws ServletException, IOException {
		response.setContentType("image/jpeg"); // 设置输出类型
     // 得到随机字符串
	String randomString = getRandomString();
			// 将getSession（）设置为true，当会话不存在是返回null
			request.getSession(true).setAttribute("randomString", randomString);
			// 设置图片的宽、高
			int width = 80;
			int height = 30;

			Color bcolor = getRandomColor(); // 设置背景色
			Color fcolor = getReverseColor(bcolor); // 前景色

			// 创建一个彩色图片
			BufferedImage bimage = new BufferedImage(width, height,
					BufferedImage.TYPE_INT_BGR);
			// 创建绘图对象,从bimage上得到的绘制对象，会把数据绘制到bimage上
			Graphics2D g = bimage.createGraphics();
			// 字体样式为宋体,加粗，20磅
			g.setFont(new Font("Vijaya", Font.BOLD, 20));
			// 先画出背景色
			g.setColor(bcolor);
			g.fillRect(0, 0, width, height);

			// 再画出前景色
			g.setColor(fcolor);
			for (int i = 0; i < randomString.length(); i++) {
				// 绘制随机字符
				g.drawString(randomString.charAt(i) + "", 10 + i * 12, 22);
			}

			// 画出干扰点
			for (int i = 0, n = random.nextInt(100); i < n; i++) {
				g.fillRect(random.nextInt(width), random.nextInt(height), 1, 1);
			}

			// 将图像输出到浏览器
			ServletOutputStream outstream = response.getOutputStream();
			JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(outstream);

			encoder.encode(bimage);
			outstream.flush();

			outstream.close();
		}
	}

 现在说到核心的Ajax技术：

传统web页面的服务是基于http协议的，所以它永远也改变不了“请求—响应”的模式。你必须“点”一下，它才能动一下，而且每次都必须刷新整个页面，这也意味着服务器要将所有页面上的数据传送下来，即使你的点击只是需要改变页面上一行十个字的内容； AJAX代码运行在浏览器和服务器之间，通过编程，你可以让ajax代码仅从服务器上提取需要改变的数据，也只改变页面中需要改变的某一部分：某一个div层、表格中的某一个单元格。用户不会看到页面全部被刷新了；当使用了ajax技术时，用户发送请求时(点击事件)将交由ajax代码处理，用户请求即完成。AJAX代码随后自己将请求发送给服务器，一旦服务器返回的响应，AJAX代码即根据返回的业务更新页面上的某个部分，这部分是由AJAX处理完成，与用户操作流程无关。

 

我们以一个典型的示例：即时验证是否有重复用户名的AJAX应用为例，讲解AJAX编写的基本步骤

1，当用户输入用户名后，焦点离开输入框，即触发输入框的onBlur事件，这个事件将调用js编写的ajax代码，将用户输入发送给服务器验证，并将服务器返回的结果消息显示在输入框下面的div层上。

这个流程将由三部分组成：

login.html:用户填写用户名的页面：

CheckUserNameServlet.java:服务器上用来验证用户名的Servlet，返回一个字符串作为结果；

Js编写的AJAX代码:请送请求，并更新页面

AJAX第一步：创建XMLHTTPRequest对象；

  XMLHTTPRequest是AJAX应用中的核心API，它被js调用以向服务器发送请求，并异步接收服务器返回的数据后，更新局部页面。使用AJAX功能时，首先要在js中创建XMLHTTPRequest对象： 

<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功能！");
        } 
     } 
  </script>

 在这段脚本中，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" name="userName"/>
<!-- 这个div层内将显示ajax从服务器返回的消息 -->
<div id=divErrorName" style="color:red;"></div>
<br>注册  密码:<input type="password" name="userPWD"/>
<br><input type="button" name="regUser" 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" name="userName" onBlur="sendRequest();"/>
<!-- 这个div层内将显示ajax从服务器返回的消息 -->
<div id="divErrorName" style="color:red;"></div>
<br>注册  密码:<input type="password" name="userPWD"/>
<br><input type="button" name="regUser" 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="ImageServlet?id="+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", "AccountCheckServlet?username="+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" name="userName"><br/>
验证码：<input type="text" name="Validate" value="Validate" οnblur="sendRequest()">< img src="ImageServlet" id="picture"><span style='color:#0000cc'  οnclick="refresh()">看不清,换一张</span>

 

 2，ImageServlet获取图片，代码见本文档开始处；

package servlet;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;

/**
 * Servlet implementation class ImageServlet
 */
public class ImageServlet extends HttpServlet {
	// 定义可选择的字符
		private static final String CHARS = "23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ";
		static Random random = new Random();

		// 得到一个随机的字符串
		private String getRandomString() {
			StringBuffer buffer = new StringBuffer();
			for (int i = 0; i < 4; i++) { // 生成六个字符
				buffer.append(CHARS.charAt(random.nextInt(CHARS.length())));
			}
			return buffer.toString();
		}

		// 随机背景颜色
		public static Color getRandomColor() { // 得到随机颜色
			return new Color(random.nextInt(128) + 127, random.nextInt(128) + 127,
					random.nextInt(128) + 127);
		}

		public static Color getReverseColor(Color c) { // 得到颜色的反色
			return new Color(255 - c.getRed(), 255 - c.getGreen(),
					255 - c.getBlue());
		}

		public void doGet(HttpServletRequest request, HttpServletResponse response)
				throws ServletException, IOException {
			response.setContentType("image/jpeg"); // 设置输出类型

			// 得到随机字符串
			String randomString = getRandomString();
			// 将getSession（）设置为true，当会话不存在是返回null
			request.getSession(true).setAttribute("randomString", randomString);
			// 设置图片的宽、高
			int width = 80;
			int height = 30;

			Color bcolor = getRandomColor(); // 设置背景色
			Color fcolor = getReverseColor(bcolor); // 前景色

			// 创建一个彩色图片
			BufferedImage bimage = new BufferedImage(width, height,
					BufferedImage.TYPE_INT_BGR);
			// 创建绘图对象,从bimage上得到的绘制对象，会把数据绘制到bimage上
			Graphics2D g = bimage.createGraphics();
			// 字体样式为宋体,加粗，20磅
			g.setFont(new Font("Vijaya", Font.BOLD, 20));
			// 先画出背景色
			g.setColor(bcolor);
			g.fillRect(0, 0, width, height);

			// 再画出前景色
			g.setColor(fcolor);
			for (int i = 0; i < randomString.length(); i++) {
				// 绘制随机字符
				g.drawString(randomString.charAt(i) + "", 10 + i * 12, 22);
			}

			// 画出干扰点
			for (int i = 0, n = random.nextInt(100); i < n; i++) {
				g.fillRect(random.nextInt(width), random.nextInt(height), 1, 1);
			}

			// 将图像输出到浏览器
			ServletOutputStream outstream = response.getOutputStream();
			JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(outstream);

			encoder.encode(bimage);
			outstream.flush();

			outstream.close();
		}
	}

 

3，服务器对于Ajax请求是如何处理的呢?即validateServlet

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class validateServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String validate= request.getParameter("validate");
		String randomString=(String)request.getSession(true).getAttribute("randomString");
		PrintWriter out=response.getWriter();
		if(validate.equalsIgnoreCase(randomString)){
		 out.write("true");
	 }else{
		 out.write("false");
	 }
	
	}

}