ajax和json的综合应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原生javascript和ajax的操作</title>
<script type="text/javascript">
function createXHR(){
if(typeof XMLHttpRequest!="undefined"){
return new XMLHttpRequest();//非IE浏览器获取xhr对象的方法
}else if(typeof ActiveXObject!="undefined"){
if(typeof arguments.callee.activeXString!="string"){
var version=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
for(var i=0;i<version.length;i++){
try{
var xhr=new ActiveXObject(version[i]);
arguments.callee.activeXString=version[i];
return xhr;//IE浏览器获取xhr对象的方法
}catch(ex){
//break;
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error("no xhr!!");
}
}
var xhr=new createXHR();
function readyFun(){
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//判断数据是否已经请求完毕，返回4表示数据已经全部返回
if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
//操作json数据的方法1：
//var data=eval("("+xhr.responseText+")");//xhr.responseText的值为json数据的所有数据（这里是字符串，需要eval将数据进行转化为对象进行json字段的操作,这步非常关键!!!!）
//操作json数据的方法2；
var data=JSON.parse(xhr.responseText);//获取服务器上的json数据，转化为javascript数值对json数据的字段进行操作
var html="";
for(var i=0;i<data.pic.length;i++){
html+="<img src="+data.pic[i]+" alt='pic'>";
}
var picList=document.getElementById("picList");
var div=document.createElement("div");
div.innerHTML=html;
picList.appendChild(div);
}else{
alert("Request was unsuccessfull:"+xhr.status);
}
}
};
xhr.open("get","waterfall.json",false);
xhr.send(null);
}
</script>
<style type="text/css">
*{padding: 0;margin: 0;}
img{border: 0 none;display: block;}
#picList img{float: left;}
</style>
</head>
<body onload="readyFun();">
<div id="picList"></div>
</body>
</html>
注意几点：这个数据waterfall.json是临时模拟json数据，自己可以按照json格式模拟，我这里只是通过它来理解原生javascript下ajax和json的综合应用，在原生javascript下的ajax怎么去获取json数据等等；
