Use native Ajax user name repetitive inspection

---

title: Use the native Ajax user name repetitive inspection (a)
DATE: 2018-10-21 17:35:15
Tags: [JavaScript, Ajax]
---

Ajax review

Ajax distance just beginning to learn that there will be some time, and then was relatively small. We are a little rusty understands it ¯ ¯, and now just want to achieve a repeat function test with Ajax, by the way go over Ajax.

About Ajax

1. Role : by Ajax may need to update the entire page, but only part of the update, optimize the user experience;
2. Principle :
3. AjaxEngine , typically interact with the server for transmission using subject XMLHtttpRequest;

To create a

1. Create an asynchronous interactive objects:
   do to deal with different browsers compatible, IE7 +, Firefox, Chrome, Opera, Safari browser with, XMLHTTP = new new the XMLHttpRequest (); the I E6, IE5 = new new browser with XMLHTTP ActiveXObject ( "Microsoft.XMLHTTP");

2. Set Monitor:
   in response to the leading end according to the returned status.
   When the readyState changes, it will trigger onreadystatechange event is triggered after the event is called readyState property XMLHtttpRequest object gets the return value and then responded. readyState total of five states as follows:
   
   XMLHtttpRequest object invokes status property available server returns an HTTP status code
   --200: request succeeded
   --404: file not found, the query or url
   - 400 ~ 499: Client Issues
   --500: server problem

3. Open links:
   use open (method, url, async) , the following three parameters:
   - Method: type of the request; the GET or the POST
   - URL: location of the file on the server
   - async: true (asynchronous) or false (Synchronize)

4. Transmission:
   case post request, using the send (string);

Code section

JavaScript

<script>
    /*
     *异步检验用户名是否被注册
     */
     function checkUsername(){
        //获取用户名
        var username = document.getElementById("username").value;
        //1.创建异步交互对象
        var xhr = createXmlHttp();
        //2.设置监听
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    document.getElementById("checkReport").innerHTML = xhr.responseText;
                }
            }
        }
        //3.打开链接
        xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username="+username,true);
        //4.发送
        xhr.send(null);
    }
    
     function createXmlHttp(){
           var xmlHttp;
           try{ // Firefox, Opera 8.0+, Safari
                xmlHttp=new XMLHttpRequest();
            }
            catch (e){
               try{// Internet Explorer
                     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                  }
                catch (e){
                  try{
                     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }
                  catch (e){}
                  }
            }
            return xmlHttp;
         }
</script>

Note: This Ajax request, plus a one-time stamp, aimed at preventing the use of the browser cache. Because the browser to open the case of the cache, the same parameters of the same link, the browser will use the cache.

Forms

<div class="register">
                <form action="index.html" onsubmit="return checkForm();">
                    <ul>
                        <li>昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：
                            <input type="text" id="username" placeholder="您用户名" onblur="checkUsername();"/>
                            <span id="checkReport"></span>
                        </li>
                        <li>设置密码：<input type="password" id="password" placeholder="至少两种字符组合" /></li>
                        <li>确认密码：<input type="password" id="repassword" placeholder="再次输入您的密码" /></li>
                        <li>验证邮箱：<input type="text" id="email" placeholder="输入邮箱" /></li>
                        <div class="check">
                            <input type="checkbox" id="accept" onclick="isAccepted()" /> 同意
                            <a href="index.html" style="text-decoration: none;">《用户注册协议》</a>
                        </div>
                        <input class="rbtn" type="submit" id="submit" value="确认注册" disabled="disabled"/>
                    </ul>
                </form>
            </div>

SHH use as a backend.