目录
源码
首先我们来看这么一段源码....
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的过程了
