<?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="3.0"> <display-name>Test</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>AjaxServlet</servlet-name> <servlet-class>one.AjaxServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>AjaxServlet</servlet-name> <url-pattern>/servlet/AjaxServlet</url-pattern> </servlet-mapping> </web-app>
ajax.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax测试</title> </head> <body> <div> <h2>AJAX Test</h2> <input type="text" placeholder="用户输入，Ajax方式获得数据" onblur="getResult(this)"> <br> <span></span> <script> getResult = function(str){ var httpxml; if(0 == str.value.length) { document.getElementById("ajax_result").innerHTML = "Nothing"; } if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function(){ if(4 == xmlhttp.readyState && 200 == xmlhttp.status) { document.getElementById("ajax_result").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET","/Test/servlet/AjaxServlet?userinput="+str.value,true); xmlhttp.send(); } </script> </div> </body> </html>
实验结果
•长度小于6时：
•长度大于等于6：
使用JSP方式
receiveParams.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <% //接收参数 String userinput = request.getParameter("userinput"); //控制台输出表单数据看看 System.out.println("userinput =" + userinput); //检查code的合法性 if (userinput == null || userinput.trim().length() == 0) { out.println("code can't be null or empty"); } else if (userinput != null && userinput.equals("admin")) { out.println("code can't be admin"); } else { out.println("OK"); } %>
ajax.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax测试</title> </head> <body> <div> <h2>AJAX Test</h2> <input type="text" placeholder="用户输入，Ajax方式获得数据" onblur="getResult(this)"> <br> <span></span> <script> getResult = function(str){ var httpxml; if(0 == str.value.length) { document.getElementById("ajax_result").innerHTML = "Nothing"; } if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function(){ if(4 == xmlhttp.readyState && 200 == xmlhttp.status) { document.getElementById("ajax_result").innerHTML = xmlhttp.responseText; } } //xmlhttp.open("GET","/Test/servlet/AjaxServlet?userinput="+str.value,true); xmlhttp.open("GET","receiveParams.jsp?userinput="+str.value,true); xmlhttp.send(); } </script> </div> </body> </html>
效果一致。
JQuery 中的Ajax