ajax数据请求2（json格式）-优快云博客

本文介绍了一个简单的Ajax示例，该示例通过GET方法从服务器请求JSON格式的数据，并将其解析后展示在网页上。示例中包含了创建XMLHttpRequest对象、打开连接、发送请求及处理响应的完整过程。

ajax数据请求2（json格式）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ajax2(json格式)</title>
	</head>
	<body>
		<button id="btn">数据请求</button>
		<ul id="list"></ul>
		<script type="text/javascript">
			var btn = document.getElementById('btn');
			var list = document.getElementById('list');
			btn.onclick = function() {
				//1.创建XMLHttpRequest对象
				var xhr = null;
				if(window.XMLHttpRequest) {
					xhr = new XMLHttpRequest();
				}else {
					xhr = new ActiveXObject('Microsoft.XMLHTTP');
				}
				//2.打开与服务器的链接
				xhr.open('get','test2.json?_',true);
				//3.发送给服务器
				xhr.send(null);
				//4.响应就绪
				xhr.onreadystatechange = function() {
					if(xhr.readyState == 4) {
						if(xhr.status == 200) {
							var json = JSON.parse(xhr.responseText);
//							console.log(xhr.responseText);
							for (var i = 0; i < json.name.length; i ++) {
//								list.innerHTML += '<li>姓名：' + json.name[i] + ', 性别：' + json.sex[i] + ', 年龄：' + json.age[i] + ', 成绩：' + json.score[i] + '</li>';
								list.innerHTML += '<li>姓名:' + json.name[i] + '， 性别:' + json.sex[i] + '， 年龄:' + json.age[i] + '， 成绩:' + json.score[i] + '</li>';
							}
//							console.log(json.name.length);
						}else {
							alert(xhr.status);
						}
					}
				}
			}
		</script>
	</body>
</html>

　　json对象：

{
	"name":["老王","老宋","老赵","老刘"],
	"sex":["男","女","男","女"],
	"age":[22,23,34,44],
	"score":[66,77,88,99]
}

转载于:https://www.cnblogs.com/handsomehan/p/5865145.html