1.XML数据user.xml
<?xml version="1.0" encoding="utf-8" ?> <users> <user> <username>张三XML</username> <age>33</age> </user> <user> <username>李四XML</username> <age>34</age> </user> </users>
2.JSON数据user.js
[ { username : "张三JSON", age : 33}, { username : "李四JSON", age : 34} ]
3.HTML页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table,td,th{border:solid 1px silver;border-collapse: collapse;text-align: center;}
th,td{ 100px;height: 20px;}
</style>
<script>
function getxml(){
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("get","test.xml?randm="+Math.random(),true);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
var result=xmlhttp.responseXML;//获取放回的xml数据主体内容
var users=result.getElementsByTagName("user");//获取user节点元素
for(var i=0;i<users.length;i++){
var user=users[i];//获取单个user信息
var username=user.getElementsByTagName("username")[0].firstChild.nodeValue;//获取user具体内容
var age=user.getElementsByTagName("age")[0].firstChild.nodeValue;
appendrow(username,age);//添加行
}
}
}
xmlhttp.send();
}
//添加新行
function appendrow(username,age){
var ui=document.getElementById("userinfo");
var newrow=ui.insertRow(ui.rows.length);//添加新行
newrow.insertCell(0).innerHTML=username;//添加新的单元格
newrow.insertCell(1).innerHTML=age;
}
function getjson(){
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("get","test.json?random="+Math.random(),true);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
var result=xmlhttp.responseText;
var users=eval("("+result+")");//使用eval函数返回的字符串变成js对象
for(var i=0;i<users.length;i++){
var user=users[i];//获取单个user信息
appendrow(user.username,user.age)//此处已经知道user数据的格式，故可以直接用user.username和user.age
}
}
}
xmlhttp.send();
}
</script>
</head>
<body>
<input type="button" value="加载xml数据" onclick="getxml();">
<input type="button" value="加载json数据" onclick="getjson();">
<br/>
<br/>
<table id="userinfo">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
运行页面,点击"加载XML数据"按钮,会从XML数据文件中读取数据并添加至表格中;点击"加载JSON数据"按钮,会从js文件中读取数据并添加至表格.
注意关键字
onreadystatechange （全部小写）
xmlhttp.readyState
XMLHttpRequest
responseXML
getElementsByTagName
getElementById
firstChild.nodeValue
innerHTML
responseText