使用JSP、servlet和ajax实现无刷新获取验证码

来源：互联网发布：淘宝联盟去哪找客服编辑：程序博客网时间：2024/05/16 00:26

实现效果如下图所示：

首先编写服务器端的代码，实现向客户端输出随机的验证码，具体代码如下：

package com.wxq.servlet;import java.io.IOException;import java.io.PrintWriter;import java.util.Random;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class Server extends HttpServlet {private static final long serialVersionUID = 8582738039656068176L;public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request,response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html");PrintWriter out = response.getWriter();//创建一个随机数生成器类Random random = new Random(); String strRand ="";char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J','K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W','X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' }; for (int i = 0; i < 4; i++) {//得到随机产生的验证码数字。strRand += String.valueOf(codeSequence[random.nextInt(36)]); }out.println(strRand);out.flush();out.close();}}

同时，在web.xml配置文件中配置servlet和访问路径，具体配置如下：

<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  <servlet>    <servlet-name>Server</servlet-name>    <servlet-class>com.wxq.servlet.Server</servlet-class>  </servlet>  <servlet-mapping>    <servlet-name>Server</servlet-name>    <url-pattern>/servlet/Server</url-pattern>  </servlet-mapping>  <welcome-file-list>    <welcome-file>index.jsp</welcome-file>  </welcome-file-list></web-app>

接下来编写客户端的代码，实现点击按钮获取随机验证码，具体代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script type="text/javascript">function loadXMLDoc(){var xmlhttp;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }xmlhttp.open("GET","<%=path%>/servlet/Server?t=" + Math.random(),true);xmlhttp.send();}</script></head><body><div id="myDiv"><h2>验证码</h2></div><input type="button" onclick="loadXMLDoc()" value="获取验证码"></body></html>

这里需要指明的是在上面的请求路径中需要添加如下代码：

t=" + Math.random()

这是因为如果不加上面的代码，得到的结果是缓存的结果，为了避免这种情况，在请求的 URL 中添加一个唯一的 ID。

具体的ajax方面的知识，可以访问http://www.w3school.com.cn/ajax/index.asp

交流探讨到我的新浪微博：http://weibo.com/tianrui1990

欢迎关注技术分享微信公众号：JavaQ