/** * */ function check_verifyCode(){ var XMLHttpReqVerifyCode = null; var url =document.getElementById("base").href +"/servlet/TestVerifyCodeServlet"; var verifyCode = document.getElementById("verifyCode").value; var tip = document.getElementById("tip"); var errorTip = "输入的验证码不正确"; var successTip = "输入的验证码正确"; tip.innerHTML=errorTip; if(verifyCode==null || verifyCode==""){ tip.innerHTML=errorTip; tip.style.color = "red"; }else{ if(window.XMLHttpRequest) { //DOM2浏览器 XMLHttpReqVerifyCode = new XMLHttpRequest(); } else if(window.ActiveXObject) { //使用json语法创建数组 var MSXML = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP']; for(var i = 0; i < MSXML.length; i++) { try{ XMLHttpReqVerifyCode = new ActiveXObject(MSXML[i]); } catch(e) { } } } XMLHttpReqVerifyCode.open("POST",url, true); XMLHttpReqVerifyCode.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); XMLHttpReqVerifyCode.onreadystatechange = function testVerifyCodeServletResponse(){ if(XMLHttpReqVerifyCode.readyState == 4 && (XMLHttpReqVerifyCode.status == 200 || XMLHttpReqVerifyCode.status == 304)) { if(XMLHttpReqVerifyCode.responseText == 1){ tip.innerHTML = successTip; tip.style.color = "green"; }else if(XMLHttpReqVerifyCode.responseText == 0){ tip.innerHTML = errorTip; tip.style.color = "red"; } } } XMLHttpReqVerifyCode.send("code="+verifyCode); } //ajax前后台交互 function createXMLHttpRequest(XMLHttpReq) { if(window.XMLHttpRequest) { //DOM2浏览器 XMLHttpReq = new XMLHttpRequest(); } else if(window.ActiveXObject) { //使用json语法创建数组 var MSXML = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP']; for(var i = 0; i < MSXML.length; i++) { try{ XMLHttpReq = new ActiveXObject(MSXML[i]); } catch(e) { } } return XMLHttpReq; } } }
TestVerifyCodeServlet与js交互代码为：
package Servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class TestVerifyCodeServlet */ @WebServlet("/TestVerifyCodeServlet") public class TestVerifyCodeServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public TestVerifyCodeServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub String codeTrue = (String) request.getSession().getAttribute("verifyCode"); String codeInput = request.getParameter("code"); System.out.println(codeInput); response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter();//打印流 if(codeInput!=null){ if(codeInput.toUpperCase().equals(codeTrue)){ out.println("1"); }else{ out.println("0"); } } } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
xml代码为
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee " version="2.5"> <display-name></display-name> <welcome-file-list> <welcome-file>demo.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>VerifyCodeServlet</servlet-name> <servlet-class>Servlet.VerifyCodeServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>VerifyCodeServlet</servlet-name> <url-pattern>/servlet/VerifyCodeServlet</url-pattern> </servlet-mapping> <servlet> <servlet-name>TestVerifyCodeServlet</servlet-name> <servlet-class>Servlet.TestVerifyCodeServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>TestVerifyCodeServlet</servlet-name> <url-pattern>/servlet/TestVerifyCodeServlet</url-pattern> </servlet-mapping> </web-app>
结果显示：
