AJAX数据处理方式

AJAX数据处理方式：
1.HTML的处理方式（responseText）
2.XML的处理方式（responseXML及DOM）
优点：格式固定，容易扩展数据，层析清晰
缺点：节点的获取（有问题）
所以解析XML一般用服务器语言（DOM）
3.JSON（eval函数格式化及responseJSON）
JSON：利用js的对象来表示的数据（字符串）
js字面量：
1.对象字面量：
{
stu1:{name:"张三",sex:"男",birthday:{year:1990,month:12,day:12}},
stu2:{name:"李四",sex:"男",birthday:{year:1990,month:12,day:12}},
stu3:{name:"王五",sex:"男",birthday:{year:1990,month:12,day:12}},
stu4:{name:"赵六",sex:"男",birthday:{year:1990,month:12,day:12}}
}
{属性名:属性值,...}
优点：访问简单，易获取（通过eval转换格式）
缺点：格式不固定，没有规则（写json的时候格外注意）
2.数组字面量：[{属性:值},{值},{...}]
[
{name:"张三",sex:"男",birthday:{year:1990,month:12,day:12}},
{name:"李四",sex:"男",birthday:{year:1990,month:12,day:12}},
{name:"王五",sex:"男",birthday:{year:1990,month:12,day:12}},
{name:"赵六",sex:"男",birthday:{year:1990,month:12,day:12}}
]

html，xml已上传，下面是json的例子：

1、ajax.js    ajax的封装

function initXHR(){
 //判断浏览器的版本
 return window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
 }
function testXHR(serverUrl,Parms,callBack){
 var xhr=initXHR();//初始化XHR
 var url=serverUrl+"?"+Parms+"&r="+Math.random();//初始化url。serverUrl传送的文件。Parms参数
 xhr.open("GET",url,true);//打开url
 xhr.send(null);//发送请求
 xhr.onreadystatechange=function(){
  if(xhr.readyState==4){
   callBack(xhr);//callback回调函数,自动执行，函数执行完后会给主程序一个响应
   }
  }
 
 }

2、json.php

{

stu1:{name:"张三",sex:"男",birthday:{year:1990,moth:12,day:4}},
stu2:{name:"李四",sex:"男",birthday:{year:1990,moth:12,day:4}},
stu3:{name:"王五",sex:"男",birthday:{year:1990,moth:12,day:4}}
 
 }

 

3、ajax_json.php

<script language="javascript" type="text/javascript" src="ajax.js">
</script>
<script language="javascript" type="text/javascript">
function testJSON(){
 testXHR("json.php","",showjson);//testXHR函数应与ajax.js里的函数名保持一致 
 }
function showjson(xhr){//xhr是个保存XMLHttpRequest对象的xhr变量(必须有)
 var jsonObj=eval("("+xhr.responseText+")");
 alert(jsonObj.stu1.name);
 }

</script>

<input type="button"  value="测试" onclick="testJSON()">