Rumah >Java >javaTutorial >AJAX异步提交
ajax实时验证用户名是否存在
1、jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ajax验证用户名是否可用</title> <script type="text/javascript"> var xmlHttp = null; function checkUserName(){ var userName = document.getElementById("userName").value; if(window.ActiveXObject){ // 申明XMLHttpRequest对象,针对较低版本的IE(5,6,7) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }else{ // 申明XMLHttpRequest对象,针对较高版本的IE(8+,以及主流浏览器) xmlHttp = new XMLHttpRequest(); } // get方式提交,带参数,异步 xmlHttp.open("get","ajax?userName="+userName,true); // 调用回调函数 xmlHttp.onreadystatechange = callback; xmlHttp.send(); } // 回调函数 function callback(){ if(xmlHttp.readyState == 4){ if(xmlHttp.status == 200){ // xmlHttp.responseText,获取后台返回信息 document.getElementById("label").innerHTML = xmlHttp.responseText; }else{ alert("AJAX服务器返回错误!"); } } } function checkForm(){ if(document.getElementById("label").innerHTML != "<font color=\"green\">用户名可用</font>"){ document.getElementById("userName").focus(); return false; } return true; } </script> </head> <body> <form action="login" method="post" onsubmit="return checkForm()"> 用户名:<input type="text" onblur="checkUserName()" id="userName" name="userName"> <label id="label"></label><br> 密码:<input type="password"><br> <input type="submit"> </form> </body> </html>
2、web.xml
<!-- ajax获取信息 --> <servlet> <servlet-name>AjaxServlet</servlet-name> <servlet-class>com.servlet.AjaxServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>AjaxServlet</servlet-name> <url-pattern>/ajax</url-pattern> </servlet-mapping>
3、servlet
package com.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class AjaxServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); String userName = request.getParameter("userName"); if(userName.equals("admin")){ out.print("<font color='red'>用户名已经存在</font>"); } else if (userName.length() == 0) { out.print("<font color='red'>用户不能为空</font>"); } else if (userName.indexOf(" ") > 0) { out.print("<font color='red'>用户不能含有空格</font>"); } else if (userName.length() > 10 || userName.length() < 4) { out.print("<font color='red'>用户长度在4-10之间</font>"); } else { out.print("<font color='green'>用户名可用</font>"); } out.flush(); out.close(); } }