其他分享
首页 > 其他分享> > 对Ajax中onreadystatechange事件执行流程的理解

对Ajax中onreadystatechange事件执行流程的理解

作者:互联网

对Ajax中onreadystatechange事件执行流程的理解

onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。

每当 readyState 改变时,就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性:

属性 描述
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。        0: 请求未初始化         1: 服务器连接已建立         2: 请求已接收                                                                                 3: 请求处理中                 4: 请求已完成,且响应已就绪
status 200: "OK"         404: 未找到页面
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
注意: onreadystatechange 事件被触发 4 次(0 - 4), 分别是: 0-1、1-2、2-3、3-4,对应着 readyState 的每个变化。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
	var xmlhttp,i=0;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();alert(xmlhttp.readyState+"/////");
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");i=1;
	}
	xmlhttp.onreadystatechange=function()
	{
		alert("^^^^^^^^^^^^^^^^^^----->"+xmlhttp.readyState);
		document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		
		alert(document.getElementById("myDiv").innerHTML+"vvvvvvvvvvvvvvvvvvvv----->"+xmlhttp.readyState);
	}
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);alert("open()----->"+xmlhttp.readyState);
	xmlhttp.send();alert("send()----->"+xmlhttp.readyState);
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>

 1. 首先 xmlhttp = new XMLHttpRequest();执行后 xmlhttp.readyState 的值由原来 “请求未初始化 :0” 的0变到1
 2. 然后执行xmlhttp.onreadystatechange=function(){

                                        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                         }
 3. 由于还没建立链接和发送请求,所以 xmlhttp.responseText;没有返回值;为空字符串。
 4. 接着执行下面两行代码

xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);

xmlhttp.send();

程序执行到这里只是服务器连接已建立,并完成了发送请求的动作,所以 xmlhttp.readyState的值还是1。

 5. 发送请求之后服务器会接收到请求,然后xmlhttp.readyState的值由原来的1变为2,然后执行xmlhttp.onreadystatechange事件。

 6. 服务器收到请求后会执行下面两步操作。

                        3: 请求处理中
                        4: 请求已完成,且响应已就绪
但是服务器每执行一步操作xmlhttp.readyState的值都会自增1,并且执行xmlhttp.onreadystatechange事件。当服务器执行请求已完成,且响应已就绪时,执行xmlhttp.onreadystatechange事件时xmlhttp.responseText;可以获取到数据。然后通过document.getElementById("myDiv").innerHTML显示到页面。

流程图:
在这里插入图片描述

标签:readyState,xmlhttp,请求,流程,Ajax,XMLHttpRequest,执行,onreadystatechange
来源: https://www.cnblogs.com/little-monster-lhq/p/16676210.html