AJAX_02_利用AJAX验证注册用户名是否可用

利用AJAX验证注册用户名是否可用

*AJAX代码

      <%--
       Created by IntelliJ IDEA.
       User: SHIGE
       Date: 2021/4/29
       Time: 16:43
       To change this template use File | Settings | File Templates.
     --%>

     <%@ page contentType="text/html;charset=UTF-8" language="java" %>
     <html>
     <head>

         <title>使用AJAX发送get请求验证用户名是否可用</title>
         <base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/"></head>

     </head>
     <body>

     //发送AJAX请求验证用户名是否可用
     <script type="text/javascript">
       
           function checkUserName(username) {

                //发送AJAX请求的代码主要包括四步: 1.创建AJAX核心对象XmlHttpRequest  2.注册回调函数  3.开启浏览器和服务器之间的通道  4.发送AJAX请求
               //发送AJAX全靠浏览器内置对象XmlHttpRequest,使用XmlHttpRequest对象可以在浏览器中单独启动一个浏览器线程,通过浏览器线程发送该请求从而达到异步效果

       //1.创建AJAX核心对象XmlHttpRequest
                var xmlHttpRequest;
               if(window.XMLHttpRequest){
                
                   //浏览器支持 XMLHttpRequest对象
                   xmlHttpRequest=new XMLHttpRequest();

               }else{
                   //不支持XMLHttpRequest对象 
                   //IE5和IE6不支持XMLHttpRequest对象,只支持ActiveXObject对象,也就是说IE5和IE6使用的是ActiveXObject对象发送AJAX请求。
                    xmlHttpRequest= new ActiveXObject("Microsoft.XMLHTTP");
                 }


       //2.注册回调函数
                 //程序执行到这里后,回调函数并不会执行,而是将回调函数注册给xmlHttpRequest对象,等xmlHttpRequest对象的readystate发生改变的时候,后边的回调函数才会执行。
                 //xmlHttpRequest对象的readystate属性,在请求和响应的过程中,该对象的状态值会从0~4进行进行变化
                                        // 0: 请求未初始化
                                        // 1:服务器连接已建立
                                        // 2:请求已接收
                                       //  3:请求已处理
                                       //  4:请求已完成,且响应已就绪

               xmlHttpRequest.onreadystatechange=function () {
                 
                //每当readystate的值发生改变的时候,回调函数就会调一次
                //当xmlHttpRequest对象的readyState属性的值为4的时候,证明请求已完成,且响应已就绪

                  if(xmlHttpRequest.readyState==4){
                     
                      //xmlHttpRequest.status可以获取到响应状态码,判断响应状态码值,从而做出处理
                      if(xmlHttpRequest.status==200){
                         //接收响应回来的数据
                          var s=xmlHttpRequest.responseText;  //获取响应数据
                          var nameTipMessage=document.getElementById("nameTipMessage");
                          nameTipMessage.innerHTML=s;  // 将响应数据和span标签进行绑定
                      }else{
                          //xmlHttpRequest.status获取到响应状态码
                          alert(xmlHttpRequest.status);
                      }
                  }
                }

               //3.开启浏览器和服务器之间的通道
               //xmlHttpRequest.open(method,url,async);开启通道
                     // method:指定请求方式为get还是post
                     // url:请求路径
                      //async:true/fasle(true表示支持异步,false表示支持同步)
                xmlHttpRequest.open("Get", "/myWeb/checkusername.do?username="+username,true);

               //4.发送AJAX请求
                  xmlHttpRequest.send();

      }
     </script>

     用户名:<input type="text" placeholder="电子邮箱" name="username" onblur="checkUserName(this.value);"><span id="nameTipMessage" font-size:12px></span>
     <br>
     密码:<input type="password" placeholder="密码" name="password"><br>
     <button type="submit">登录</button><br>
     </body>
     </html>
posted @ 2021-04-29 18:28  失昼  阅读(82)  评论(0)    收藏  举报