ajax.js:
function ajax(url,funSucc,funFaild){
/*
兼容IE5,IE6
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else{
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
*/
var xhr = new XMLHttpRequest(); ////1.创建ajax对象
url = url +"?"+ Math.round(); //加上一个随机数,解决缓存问题
//或者: url = url +"?"+ new Date().getTime();
xhr.open("GET",url,true); //2.连接服务器
xhr.send(null); //3.发送请求
//4.接受返回的数据
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
//alert("请求成功!");
//responseText:属性返回字符串形式的响应
funSucc(xhr.responseText);
}else{
//alert("请求失败!");
if(funFaild){
funFaild(xhr.statusText);
}
};
}
};
}
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="ajax.js"></script>
<style>
#box{width:300px;background:#f5f5f5;padding:30px;}
</style>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<div id="box"></div>
<script>
var btn = document.getElementById("btn");
var box = document.getElementById("box");
btn.onclick=function () {
ajax("data.json",function (str) {
jsonArray= JSON.parse(str);
for(var i in jsonArray){
for(var j in jsonArray[i]){
box.innerHTML+="<div>"+j+" : "+jsonArray[i][j]+"</div>"
};
};
},function (s) {
alert(s); //请求失败执行
})
};
</script>
</body>
</html>
data.json:
[
{"name":"小A","age":10,"sex":"男","class":"一年级"},
{"name":"小B","age":11,"sex":"女","class":"二年级"},
{"name":"小C","age":12,"sex":"男","class":"三年级"},
{"name":"小D","age":13,"sex":"女","class":"四年级"},
{"name":"小E","age":14,"sex":"男","class":"五年级"}
]
效果: