html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="addLoadEvent.js"></script>
<script src="getHttpObject.js"></script>
<script src="getNewContent.js"></script>
</head>
<body>
</body>
</html>
demo.json
[
{
"name":"Lee",
"age":28,
"height":188
},
{
"name":"Sun",
"age":30,
"height":190
}
]
addLoadEvent.js
function addLoadEvent(fun){
var oldLoad = window.onload;
if(typeof oldLoad != "function"){
window.onload = fun;
}else{
window.onload = function(){
oldLoad();
fun();
}
}
}
getHttpObject.js
function getHttpObject(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
getNewContent.js
function getNewContent(){
var XHR = getHttpObject();
if(XHR){
XHR.onreadystatechange = function(){
if(XHR.readyState == 4 && XHR.status == 200){
var txt = JSON.parse(XHR.responseText);
var result = [];
var body = document.getElementsByTagName("body")[0];
var content = document.createElement("p");
body.appendChild(content);
for(var i=0;i<txt.length;i++){
result["name"] = txt[i].name;
result["age"] = txt[i].age;
result["height"] = txt[i].height;
content.innerHTML += "姓名："+result["name"]+" 年齡：" + result["age"] +" 身高："+ result["height"]+"<br/>";
}
}
};
XHR.open('Get','demo.json?id='+Math.random(),true);
XHR.send(null);
}
}
addLoadEvent(getNewContent);
運行結果
![這裏寫圖片描述]()
