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

最新推荐文章于 2021-08-05 15:07:34 发布

wind瑞

最新推荐文章于 2021-08-05 15:07:34 发布

阅读量2.7k

点赞数 1

分类专栏： JSP 文章标签： Ajax Servlet JSP 验证码

本文链接：https://blog.csdn.net/windrui/article/details/9123355

版权

JSP 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

实现效果如下图所示：

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

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" οnclick="loadXMLDoc()" value="获取验证码">
	</body>
</html>

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