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

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

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

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

js代码：

script type="text/javascript"> function refresh(obj){ obj.src="ImageServletid="+Math.random(); } </script> 其中需要注意的是请求路径中必须要有参数（参数名可随意定义），参数值不能是一个固定值而是随机数。代码中obj对象是指img标签对象。方法二： html代码如下： <img src="ImageServlet" ><span>看不清,换一张</span> js代码如下： function refresh(){ document.getElementById("picture").src="ImageServletid="+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层上。

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

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

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

AJAX第一步：创建XMLHTTPRequest对象；

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