AJAX实现验证码区的局部刷新（初学AJAX小结）

最新推荐文章于 2021-02-17 03:26:35 发布

橙孒Yang

最新推荐文章于 2021-02-17 03:26:35 发布

阅读量1.4k

点赞数

分类专栏： Ajax 文章标签： Ajax

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

AJAX实现验证码区的局部刷新（初学AJAX小结）

Ajax Servlet 浏览器 IE Web

AJAX不是一种新技术，而是6种web技术的综合体。

不废话了，进入正题“验证码局部刷新”！

此测试需要3个文件：

文件1：产生验证码图片的Servlet

文件2：配置文件web.xml （这个没什么好解释的，学网页的都知道这个文件吧，呵呵）

文件3：显示验证码的网页文件（jsp，html等都行）

文件1：

产生验证码图片Servlet的代码如下

Java代码

1 import java.awt.Color;

2 import java.awt.Font;

3 import java.awt.Graphics;

4 import java.awt.image.BufferedImage;

5 import java.io.IOException;

6 import java.util.Random;

8 import javax.imageio.ImageIO;

9 import javax.servlet.ServletException;

10 import javax.servlet.ServletOutputStream;

11 import javax.servlet.http.HttpServlet;

12 import javax.servlet.http.HttpServletRequest;

13 import javax.servlet.http.HttpServletResponse;

15 public class ImageAction extends HttpServlet {

16 /**

17 * 执行登陆的业务处理

18 * @param request:发送上来的请求

19 * @return destJsp：目标URL

20 */

21 public void service(HttpServletRequest request,

22 HttpServletResponse response) throws IOException,ServletException{

23 //设置页面不缓存

24 response.setHeader("Pragma", "No-cache");

25 response.setHeader("Cache-Control", "no-cache");

26 response.setDateHeader("Expires", 0);

27 //在内存中创建图象

28 int width = 60, height = 20;

29 BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

30 //获取图形上下文

31 Graphics g = image.getGraphics();

32 //生成随机类

33 Random random = new Random();

34 //设定背景色

35 g.setColor(getRandColor(220, 250));

36 g.fillRect(0, 0, width, height);

37 //设定字体

38 g.setFont(new Font("Times New Roman", Font.PLAIN, 18));

39 //画边框

40 //g.drawRect(0,0,width-1,height-1);

41 g.draw3DRect(0,0,width-1,height-1,true);

42 //随机产生155条干扰线，使图象中的认证码不易被其它程序探测到

43 g.setColor(getRandColor(160, 200));

44 for (int i = 0; i < 155; i++) {

45 int x = random.nextInt(width);

46 int y = random.nextInt(height);

47 int xl = random.nextInt(12);

48 int yl = random.nextInt(12);

49 g.drawLine(x, y, x + xl, y + yl);

50 }

51 // 取随机产生的认证码(6位数字)

52 String sRand = "";

53 String s = "012345678901234567890123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ012345678901234567890123456789abcdefghijklmnopqrstuvwxyz";

54 for (int i = 0; i < 4; i++) {

55 char rand =s.charAt(random.nextInt(s.length()));

56 sRand += rand;

57 // 将认证码显示到图象中

58 g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));

59 //调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成

60 g.drawString(String.valueOf(rand), 13 * i + 6, 16);

61 }

62 g.drawOval(0,12,60,11);

63 // 将认证码存入SESSION

64 request.getSession().setAttribute("rand", sRand);

65 // 图象生效

66 g.dispose();

67 ServletOutputStream output;

68 try {

69 output = response.getOutputStream();

70 // 输出图象到页面

71 ImageIO.write(image, "JPEG", output);

72 } catch (IOException e) {

73 e.printStackTrace();

74 }

75 }

77 /**

78 * 生成随机颜色

79 */

80 private Color getRandColor(int fc, int bc) {

81 Random random = new Random();

82 if (fc > 255)

83 fc = 255;

84 if (bc > 255)

85 bc = 255;

86 int r = fc + random.nextInt(bc - fc);

87 int g = fc + random.nextInt(bc - fc);

88 int b = fc + random.nextInt(bc - fc);

89 return new Color(r, g, b);

90 }

91 }

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);

// 将认证码存入SESSION

request.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文件里的配置信息如下

Xml代码

92 <servlet>

93 <servlet-name>ImageAction</servlet-name>

94 <servlet-class>cn.netjava.servlet.ImageAction</servlet-class>

95 </servlet>

96 <servlet-mapping>

97 <servlet-name>ImageAction</servlet-name>

98 <url-pattern>/ImageAction</url-pattern>

99 </servlet-mapping>

<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 代码如下

Java代码

100 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

101 <html>

102 <head>

103 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

104 <title>验证码测试</title>

105

106 <script type="text/javascript">

107

108 //取得XMLHttpRequest对象是AJAX的要点

109 //此getXMLRequest()方法是根据不同浏览器来取得XMLHttpRequest对象

110 function getXMLRequest(){

111 var request;

112 try{

113 //for火狐等浏览器

114 request = new XMLHttpRequest();

115 }catch(e){

116 try{

117 //for IE

118 request = new ActiveXObject("Microsoft.XMLHttp");

119 }catch(e){

120 alert("您的浏览器不支持AJAX!!!");

121 return null;

122 }

123 }

124 return request;

125 }

126

127 //此checkcode()方法是更换验证码图片的要点

128 function checkcode(){

129 var request = getXMLRequest();//得到XMLHttpRequest对象

130 request.onreadystatechange = function(){

131 if(request.readyState == 4){

132 document.getElementById("code").src = "ImageAction";//改变验证码图片

133 }

134 }

135 //将请求发送出去

136 request.open("GET","ImageAction",true);

137 request.send(null);

138 }

139

140 </script>

141

142 </head>

143

144 <body>

145 //因为是单一功能测试，所以页面比较简单

146 //只有一个验证码的图片和一行字........

147 <img id="code" src="ImageAction"><br>

148 <a href="#" οnclick="checkcode()">看不清，换一张</a>

149 </body>

150

151 </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>验证码测试</title>

//取得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>

//因为是单一功能测试，所以页面比较简单

//只有一个验证码的图片和一行字........

</body>

</html>

至此完工，点击“看不清，换一张”验证码就会刷新，而不会牵连到整个页面，由此实现了页面的部分刷新。

代码注释补充：

Java代码

152 if(request.readyState == 4){

153 document.getElementById("code").src = "ImageAction";

154 }

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的小心得，欢迎多多交流啊，木哈哈

橙孒Yang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AJAX实现验证码区的局部刷新（初学AJAX小结）

AJAX实现验证码区的局部刷新（初学AJAX小结） AjaxServlet浏览器IEWeb AJAX不是一种新技术，而是6种web技术的综合体。不废话了，进入正题“验证码局部刷新”！此测试需要3个文件：文件1：产生验证码图片的Servlet
复制链接

扫一扫

专栏目录