AJAX实现验证码区的局部刷新（初学AJAX小结）
AJAX不是一种新技术，而是6种web技术的综合体。
不废话了，进入正题“验证码局部刷新”！
此测试需要3个文件：
文件1：产生验证码图片的Servlet
文件2： 配置文件web.xml （这个没什么好解释的，学网页的都知道这个文件吧，呵呵）
文件3： 显示验证码的网页文件 （jsp，html等都行）
文件1：
产生验证码图片Servlet的代码如下
import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt.image.BufferedImage;import java.io.IOException;import java.util.Random;import javax.imageio.ImageIO;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 ImageAction extends HttpServlet {/** * 执行登陆的业务处理 * @param request:发送上来的请求 * @return destJsp：目标URL */public void service(HttpServletRequest request,HttpServletResponse response) throws IOException,ServletException{//设置页面不缓存response.setHeader("Pragma", "No-cache");response.setHeader("Cache-Control", "no-cache");response.setDateHeader("Expires", 0);//在内存中创建图象int width = 60, height = 20;BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);//获取图形上下文Graphics g = image.getGraphics();//生成随机类Random random = new Random();//设定背景色g.setColor(getRandColor(220, 250));g.fillRect(0, 0, width, height);//设定字体g.setFont(new Font("Times New Roman", Font.PLAIN, 18));//画边框//g.drawRect(0,0,width-1,height-1);g.draw3DRect(0,0,width-1,height-1,true);//随机产生155条干扰线，使图象中的认证码不易被其它程序探测到g.setColor(getRandColor(160, 200));for (int i = 0; i < 155; i++) {int x = random.nextInt(width);int y = random.nextInt(height);int xl = random.nextInt(12);int yl = random.nextInt(12);g.drawLine(x, y, x + xl, y + yl);}// 取随机产生的认证码(6位数字)String sRand = "";String s = "012345678901234567890123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ012345678901234567890123456789abcdefghijklmnopqrstuvwxyz";for (int i = 0; i < 4; i++) {char rand =s.charAt(random.nextInt(s.length()));sRand += rand;// 将认证码显示到图象中g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));//调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成g.drawString(String.valueOf(rand), 13 * i + 6, 16);}g.drawOval(0,12,60,11);// 将认证码存入SESSIONrequest.getSession().setAttribute("rand", sRand);// 图象生效g.dispose();ServletOutputStream output;try {output = response.getOutputStream();// 输出图象到页面ImageIO.write(image, "JPEG", output);} catch (IOException e) {e.printStackTrace();}}/** * 生成随机颜色 */private Color getRandColor(int fc, int bc) {Random random = new Random();if (fc > 255)fc = 255;if (bc > 255)bc = 255;int r = fc + random.nextInt(bc - fc);int g = fc + random.nextInt(bc - fc);int b = fc + random.nextInt(bc - fc);return new Color(r, g, b);}} 文件2：
web.xml文件里的配置信息如下
<servlet><servlet-name>ImageAction</servlet-name><servlet-class>cn.netjava.servlet.ImageAction</servlet-class></servlet><servlet-mapping><servlet-name>ImageAction</servlet-name><url-pattern>/ImageAction</url-pattern></servlet-mapping> 文件3：
页面 index.html 代码如下
<!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"><title>验证码测试</title><script type="text/javascript">//取得XMLHttpRequest对象是AJAX的要点//此getXMLRequest()方法是根据不同浏览器来取得XMLHttpRequest对象function getXMLRequest(){var request;try{ //for火狐等浏览器 request = new XMLHttpRequest();}catch(e){ try{ //for IE request = new ActiveXObject("Microsoft.XMLHttp"); }catch(e){ alert("您的浏览器不支持AJAX!!!"); return null; }}return request;}//此checkcode()方法是更换验证码图片的要点function checkcode(){var request = getXMLRequest();//得到XMLHttpRequest对象request.onreadystatechange = function(){ if(request.readyState == 4){ document.getElementById("code").src = "ImageAction";//改变验证码图片 }} //将请求发送出去request.open("GET","ImageAction",true);request.send(null);}</script></head><body>//因为是单一功能测试，所以页面比较简单//只有一个验证码的图片和一行字........<img id="code" src="ImageAction"><br><a href="#" >看不清，换一张</a></body></html>
至此完工，点击“看不清，换一张”验证码就会刷新，而不会牵连到整个页面，由此实现了页面的部分刷新。
代码注释补充：
if(request.readyState == 4){ document.getElementById("code").src = "ImageAction"; } 此处说明下：
readyState是服务器响应的状态，分为5种
状态描述0请求未初始化（在调用 open() 之前）1请求已提出（调用 send() 之前）2请求已发送（这里通常可以从响应得到内容头部）3请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）4请求已完成（可以访问服务器响应并使用它）
括号中的document.getElementById("code").src = "ImageAction" 为请求完成时应做的处理
常见的有：（以下request皆为所创建的XMLHttpRequest对象）
在组件上显示服务器返回的文本信息
document.getElementById("元素的id").innerHTML = request.responseText;
在表单元素中显示服务器返回的文本信息
document.getElementById("元素的id").value = request.responseText;
设置组件的src
document.getElementById("元素的id").src = "url";
以上为本人初学AJAX的小心得，欢迎多多交流啊，木哈哈
页:
[1]