Java 关于Ajax的实例--验证用户名（四）

最新推荐文章于 2021-03-02 08:54:56 发布

箫沐予

最新推荐文章于 2021-03-02 08:54:56 发布

阅读量679

点赞数

分类专栏： java 文章标签： java ajax

本文链接：https://blog.csdn.net/u013680938/article/details/50957234

版权

java 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

今天做了一个简单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>