tofacebook.com -专业IT技术社区 ajax和json Web程序 - tofacebook.com-专业IT技术社区
143°

ajax和json Web程序

标签:activex   window   添加行   ntb   添加   加载   pre   AC   end   

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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table,td,th
{
border:solid 1px silver;
border-collapse:collapse;
text-align:center;
} 
th,td
{
width:100px;
height:20px;
}
</style>
<script type="text/javascript">
function GetXML() {
var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
xmlHttp.open("get", "user.xml?random=" + Math.random(), true);
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//获取返回XML数据主体内容
var result = xmlHttp.responseXML.documentElement;
//获得user节点元素
var users = result.getElementsByTagName("user");
for (var i = 0; i < users.length; i++) {
//获取单个user信息
var user = users[i];
//获取user具体信息
var username = user.getElementsByTagName("username")[0].text;
var age = user.getElementsByTagName("age")[0].text;
//添加行
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 = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
xmlHttp.open("get", "user.js?random=" + Math.random(), true);
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var result = xmlHttp.responseText;
//使用eval函数使返回的字符串变成js对象
var users = eval("(" + result + ")");
for (var i = 0; i < users.length; i++) {
//获取单个user信息
var user = users[i];
//此处已经知道user数据的格式,故可以直接用user.username和user.age
appendRow(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文件中读取数据并添加至表格.

ajax和json

标签:activex   window   添加行   ntb   添加   加载   pre   AC   end   

原文地址:https://www.cnblogs.com/aten/p/8576379.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。