文章摘要
这篇文章介绍了使用XML和JavaScript完成数据交换的技术。通过创建XMLHTTPRequest对象，并在回调函数中处理网络请求状态，可以接收返回的数据并将其封装成HTML表格展示。文章详细说明了如何通过注册回调函数接收数据，并根据XML结构生成动态HTML内容，展示了在Web应用中实现数据同步和展示的完整方法。这种方法适用于需要实时数据同步和展示的应用场景。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>使用XML完成数据交换</title>
</head>
<body>
<script type=”text/javascript”>
window.onload=function(){
document.getElementById(“btn”).onclick=function(){
// 1.创建XMLHTTPRequest对象
var xhr=new XMLHttpRequest();
// 2.注册回调函数
xhr.onreadystatechange=function () {
if (this.readyState==4) {
if (this.status==200) {
// 使用XMLHTTPRequest对象的responseXML属性，接收返回之后，可以自动封装成document对象（文档对象）
var xmlDoc=this.responseXML
//console.log(xmlDoc)
// 获取所有的<student>元素，返回了多个对象，应该是数组。
var students=xmlDoc.getElementsByTagName(“student”)
//console.log(students[0].nodeName)
var html=””;
for (var i=0; i < students.length; i++) {
var student=students[i]
// 获取<student>元素下的所有子元素
html +=”<tr>”
html +=”<td>”+(i+1)+”</td>”
var nameOrAge=student.childNodes
for (var j=0; j < nameOrAge.length; j++) {
var node=nameOrAge[j]
if (node.nodeName==”name”) {
//console.log(“name=” + node.textContent)
html +=”<td>”+node.textContent+”</td>”
}
if (node.nodeName==”age”) {
//console.log(“age=” + node.textContent)
html +=”<td>”+node.textContent+”</td>”
}
}
html +=”</tr>”
}
document.getElementById(“stutbody”).innerHTML=html
}else{
alert(this.status)
}
}
}
// 3.开启通道
xhr.open(“GET”, “/ajax/ajaxrequest6?t=” + new Date().getTime(), true)
// 4.发送请求
xhr.send()
}
}
</script>
<button id=”btn”>显示学生列表</button>
<table width=”500px” border=”1px”>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody id=”stutbody”>
<!–<tr>
<td>1</td>
<td>zhangsan</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>lisi</td>
<td>22</td>
</tr>–>
</tbody>
</table>
</body>
</html>