对ajax源码的onreadystatechange的理解

目录

源码

问题

修改验证

结论

---

源码

首先我们来看这么一段源码.... 

    function showHint(str)
    {
        if (str.length===0)
        {
            document.getElementById("txtHint").innerHTML="";
            return;
        }
        if (window.XMLHttpRequest)
        {
            // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行的代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            //IE6, IE5 浏览器执行的代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.open("GET","dealajax.php?q="+str,true);
        xmlhttp.send();
        
        
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState===4 && xmlhttp.status===200)
            {
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
        }
    }


<p><b>在输入框中输入一个姓名:</b></p>
<form>
    姓名: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>返回值: <span id="txtHint"></span></p>

问题

有没有感觉有点不对劲呀，xmlhttp.onreadystatechange这个函数到底执行了几次？什么时候执行的？怎么拿到返回值的？

别急我们从头分析

首先的Onkeyup事件是什么？

答：onkeyup 事件会在键盘按键被松开时发生。

等一下，那showHint(this.value)中的this.value又是什么呀？？？

答：其实当前的this就指向当前的标签，所以this.value就是拿到了当前标签的value了（就是用户输入的值）

好了那我们知道了当按键松开之后就会执行showHint(str)函数的

那请问showHint(str)函数在触发一次执行了几次呀？

答：一次，这里都是没有问题的

问题来了，请问xmlhttp.onreadystatechange这个函数执行了几次？

答:多次！想不到吧readyState变化几次它就执行几次

我们下面的代码中他执行了3次！

我们更改代码来验证一下

修改验证

<script>
    function showHint(str)
    {
        if (str.length===0)
        {
            document.getElementById("txtHint").innerHTML="";
            return;
        }
        if (window.XMLHttpRequest)
        {
            // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行的代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            //IE6, IE5 浏览器执行的代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        alert("当前的readyState为:"+xmlhttp.readyState)

        xmlhttp.open("GET","dealajax.php?q="+str,true);

        alert("当前的readyState为:"+xmlhttp.readyState)
        xmlhttp.send();

        alert("我是1")
        xmlhttp.onreadystatechange=function()
        {
            alert("onreadystatechange中的readyState为:"+xmlhttp.readyState)
            if (xmlhttp.readyState===4 && xmlhttp.status===200)
            {
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
        }
    }
</script>
<p><b>在输入框中输入一个姓名:</b></p>
<form>
    姓名: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>返回值: <span id="txtHint"></span></p>

我们会发现在open之前xmlhttp.readyState的值为0 它表示请求还未初始化

在open之后xmlhttp.readyState的值变成了1 它表示连接建立成功

在send之后xmlhttp.readyState的值变成了2 它表示服务器接受成功了

接着变成3，表示服务器在处理

接着变成4，表示服务器返回了结果

结论

可见 我们的onreadystatechange会一直循环（或者也可能是被阻塞）执行直到readystate为4，或出现其他异常，同时我们也得知无论onreadystatechange有没有执行，readystate的值还是会改变的！xmlhttp对象在内部帮我们执行了询问服务器，记录readystate的过程了