使用XMLHttpRequest异步通信

最新推荐文章于 2024-05-06 17:34:57 发布

转载最新推荐文章于 2024-05-06 17:34:57 发布 · 66 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhengwenqiang/p/6804625.html

本文介绍了一种使用XMLHttpRequest对象加载JSON数据的方法，并详细解释了readyState的状态变化及其意义。通过实例展示了如何将获取到的数据转换为JSON对象并显示在网页上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>xml</title>
</head>
<body>
	<div id="div"></div>
	
	<button id="person">加载信息</button>
	
	<script type="text/javascript">
		//声明全局XMLHttpRequest对象
		var myXmlHttpRequest;
		if(window.XMLHttpRequest){
			myXmlHttpRequest = new XMLHttpRequest();
		}else{
			myXmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");
		}

		var numb = 0;

		document.getElementById("person").onclick = function(){
			var url="/app/json/a.json";
			/*
				O 表示未发送，open()函数还没执行。
				1 表示已发送，send()函数还没执行。
				2 send函数已执行，头部和状态吗都可以获取了。
				3 头部已收到，但响应体在解析中。
				4 表示请求已完成，包括响应头和响应体的内容已经接收到了。
				客户端跨域的XMLHttpRequest需要服务端的支持来保证JSON资源请求成功。
				服务器端在响应头加上带有Access-Control-Allow前缀的属性为跨域资源共享提供支持。
				CORS（Cross-Origin Resource Sharing）使得跨域资源共享的同时还可以禁止某些域名访问。
			*/
			myXmlHttpRequest.onreadystatechange = function(){
				if(myXmlHttpRequest.readyState===4&&myXmlHttpRequest.status===200){
					var myObject = JSON.parse(myXmlHttpRequest.responseText);
					var myJSON = JSON.stringify(myObject);
					var div = document.getElementById("div");
					div.innerHTML = myJSON;
				}
			}

			console.log("走了"+(++numb));
			myXmlHttpRequest.open("GET",url,true);
			myXmlHttpRequest.send();

		}
	</script>
</body>
</html>

转载于:https://www.cnblogs.com/zhengwenqiang/p/6804625.html