<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
	<div>
		<h1>直接输出Json文件内容:</h1>
		<span id="hs" ></span>
	</div>
	<div>
		<h1>输出Json转化为对象后的其中一些属性:</h1>
		<p id="ts" ></p>
	</div>
	<script src="http://blog.chenjaly.cn/vue.js"></script>
	<script>
		// 创建一个XMLHttpRequest对象
		var xmlhttp=new XMLHttpRequest();
		// 发起请求的方式与地址
		xmlhttp.open("GET","http://blog.chenjaly.cn/Json/heros.json",true);
		// 发送请求
		xmlhttp.send();
		// onreadystatechange是每当请求状态改变时就运行
		xmlhttp.onreadystatechange=a;
		// 定义每当请求状态改变时运行的代码
		function a()
		{
			// 等待成功响应,readyState==4代表请求成功,xmlhttp.status==200代表请求完成
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				// 渲染页面,responseText可以把接收到的文件转换为字符
				// document.write(xmlhttp.responseText);
				document.getElementById('hs').innerHTML=xmlhttp.responseText;
				// JSON.parse可把获取的Json字符串转换为对象
				let a = JSON.parse(xmlhttp.responseText);
				document.getElementById('ts').innerHTML=a.squadName+"\n"+a.formed;
			}
		}
	</script>
</body>
</html>