2019独角兽企业重金招聘Python工程师标准>>> 
今天做了一个简单Ajax验证用户名的实例
实例说明：实现网页输入栏中验证用户名是否已存在的异步刷新功能。
先建servlet包，功能由该HttpServlet实现，new–class–“CheckUser.java”
public class CheckUser extends HttpServlet{public void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException{response.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();//这里是把值定死的，实际上我们会从数据库取数据String[] xhs = {"08110","08111","08112","08113"};//取得用户填写的学号String xh = request.getParameter("xh");//获取http提交过来的数据//设置相应内容String responseContexter = "true";for(int i=0;i<xhs.length;i++){//如果有学号，修改响应内容if(xh.equals(xhs[i])){responseContexter = "false";}}out.print(responseContexter);out.flush();out.close(); }public void doPost(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException{doGet(request,response);}
}然后来配置web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 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_3_0.xsd"><welcome-file-list><welcome-file>index.jsp</welcome-file></welcome-file-list><servlet><servlet-name>CheckUser</servlet-name><servlet-class>servlet.CheckUser</servlet-class></servlet><servlet-mapping><servlet-name>CheckUser</servlet-name><!-- 这个地方url-pattern任意命名是为了明显区别CheckUser调用的URL到底从何而来 --><url-pattern>/dizhi</url-pattern></servlet-mapping></web-app>菜鸟教程温馨提示：web.xml 声明后面就是< web-app>固定头文件，< servlet>与< / servlet>之间的配置的是< servlet-name>< /servlet-name>是自定义的一个名字，符合java命名规则就成，随便起。< servlet-class>< /servlet-class>是写的servlet类的类名，这个必须配置正确，有包的话还要在前面加上包名。但是不带.java.class后缀。< servlet-mapping>< /servlet-mapping>之间配置的是< servlet-name>< /servlet-name>这个和上面那个name一样就成。< url-pattern>< /url-pattern>的值也可以随便起名字，但是必须要加“/”。form的action里填写的就是这个值（有些地方要考虑路径），ajax跳转用的也是这个地方的值
下面继续写index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE>
<html><head> <title>Ajax应用</title></head><body><form action=""><!-- 当输入框改变时 执行beginCheck()函数 -->学号：<input type="text" id="xh" onchange="beginCheck()"/><span id="hint"></span><br><br>密码：<input type="password" name="kl" /><input type="submit" value="注册" /></form><!--script放尾部，页面元素先呈现，增强用户体验--><script type="text/javascript"> var xmlHttp; var hint = document.getElementById("hint"); var username = document.getElementById("xh"); username.addEventListener("focus",function(){ hint.innerText = ""; },false); function createHttpRequest () { // 创建XMLHttpRequest对象，做兼容处理 if (window.ActiveXObject) { //IE5,6 ps:IE7及以上兼容了window.XMLHttpRequest xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); console.log("IE5,6"); }else if(window.XMLHttpRequest){ //IE7,firebox,chrome,safari,opear xmlHttp = new XMLHttpRequest(); console.log("XMLHttpRequest"); } } function beginCheck () { var xh = document.getElementById("xh").value; //判断有无输入字符，最好能把该判断放在其他事件上，因为onchange不能全部涵盖用户不输入用户名的行为，exchange是指输入域的内容发生改变的情况。 if(!xh){ alert("sorry,请输入注册学号"); return; } //创建好http请求 createHttpRequest(); //将状态触发器绑定到一个函数上,4(5)个readyState状态变化一次就执行一次processor(),每当 readyState 改变时，就会触发 onreadystatechange 事件。 xmlHttp.onreadystatechange = processor; //通过get方法向指向的URL即Servlet对应的URL建立服务器的调用 xmlHttp.open("get","dizhi?xh="+xh,"ture");//这里URL地址是web.xml中的<url-pattern> xmlHttp.send(null); } function processor () { console.log("触发"+xmlHttp.readyState); var responseContext; if(xmlHttp.readyState == 4&&xmlHttp.status == 200){ //获取服务器发回来的响应 responseContext = xmlHttp.responseText; //搜索响应字符串里有没有ture //console.log(responseContext); if(responseContext.indexOf("true") != -1){ hint.innerText = "用户名有效";//更改span标签的内容 console.log("congratulation,该学号有效"); }else{ hint.innerText = "用户名已存在"; console.log("sorry,the account already exists"); } } } </script> </body>
</html>未按待续，如有意见，欢迎留言