08-xml.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
function f1(){
//① ajax请求xml信息
// responseXML: 专门负责接收xml信息的属性
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
//alert(xhr.responseXML);//[object XMLDocument]
//XMLDocument是xml根节点(students)的父节点对象
var xmldom = xhr.responseXML;
//console.log(xmldom.firstChild);//<students>
//获得students的子节点(3个student)
//在主流浏览器(火狐、chrome、safari、opera)里边会把"空白、回车"等也算作具体节点
//console.log(xmldom.firstChild.childNodes);//空白节点 和 student 一共是7个节点
//dom处理html和xml的标准一致
var std = xmldom.getElementsByTagName('student');
//console.log(std);//HTMLCollection[student, student, student]
//循环遍历std
//document 和 普通的元素节点 都可以调用getElementsByTagName()方法
//但是大家 的作用范围不一样
//文本节点.nodeValue: 通过文本节点获得对应的文本信息
var s = "";
for(var i=0; i<std.length; i++){
var nm = std[i].getElementsByTagName('name')[0].firstChild.nodeValue; //和innerHTML作用相同。该方式可以兼容不同浏览器
var ag = std[i].getElementsByTagName('age')[0].innerHTML;
s += "名字:"+nm+"---年龄:"+ag+"<br />";
}
document.getElementById('result').innerHTML = s;
}
}
xhr.open('get','./08.xml');
xhr.send(null);
}
</script>
</head>
<body>
<h2>ajax+javascript实现xml的接收和处理</h2>
<input type="button" value="触发" οnclick="f1()" />
<div id="result"></div>
</body>
</html>
08.xml:
<?xml version="1.0" encoding="utf-8" ?>
<students>
<student>
<name>mary</name>
<age>20</age>
</student>
<student>
<name>linken</name>
<age>26</age>
</student>
<student>
<name>yuehan</name>
<age>23</age>
</student>
</students>