Json简单实例

1.html:

<!DOCTYPE html>
<html>
  <head>
    <title>show2.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript" src="js/student2.js"></script>
  </head>
  
  <body>
    <input type="button" onclick="Student2()" value="获取信息">
    
    <table border="1px" width="80%" align="center">
    	<thead><tr>
    		<th>学号</th>
    		<th>姓名</th>
    		<th>年龄</th>
    		<th>住址</th>
    	</tr></thead>
    	<tbody id="main" align="center">
    	
    	</tbody>
    </table>
  </body>
</html>

2.js

//浏览器协议
var xmlHttp;
function creatXMLHttpRequest(){
	if(window.xmlHttpRequest){
		xmlHttp=new XMLHttpRequest();
	}else if(window.ActiveXObject){
		xmlHttp=new XMLHttpRequest("Microsoft,XMLHTTP");
	}
}
//触发函数
function Student2(){
	alert("aa");
	//建立异步请求对象
	creatXMLHttpRequest();
	//开启对服务器端的连接
	xmlHttp.open("post","student2.txt",true);
	//向浏览器发送请求
	xmlHttp.send();
	//调用回调函数
	xmlHttp.onreadystatechange=getStudent2;
	
	
}
function getStudent2(){
	
	//判断请求状态
	if(xmlHttp.readyState==4&&xmlHttp.status==200){
		//服务器传来的响应
		var msg=xmlHttp.responseText;
		var stus=eval("("+msg+")");
		tbody=document.getElementById("main");
		for(var i=0;i<stus.length;i++){
			var stuNo=stus[i].stuNo;
			var name=stus[i].name;
			var age=stus[i].age;
			var address=stus[i].address;
			
			tr=document.createElement("tr");
			
			td1=document.createElement("td");
			td1.innerHTML=stuNo;
			
			tr.appendChild(td1);
			
			
			td2=document.createElement("td");
			td2.innerHTML=name;
			tr.appendChild(td2);
			
			
			td3=document.createElement("td");
			td3.innerHTML=age;
			tr.appendChild(td3);
		
			td4=document.createElement("td");
			td4.innerHTML=address;
			tr.appendChild(td4);
			
			
			
			tbody.appendChild(tr);
			
		}
	}
}

3.txt

[
{"stuNo":"001","name":"jack","age":23,"address":"beijing"},
{"stuNo":"002","name":"bob","age":24,"address":"shanghai"},
{"stuNo":"003","name":"mary","age":26,"address":"anerick"},
{"stuNo":"004","name":"kity","age":26,"address":"hongkong"}
]