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"}
]