xml文件
<?xml version="1.0" encoding="utf-8" ?>
<students>
<student>
<name>dancheng</name>
<age>21</age>
<addr>长春</addr>
</student>
<student>
<name>dancheng1</name>
<age>22</age>
<addr>白城</addr>
</student>
<student>
<name>dancheng2</name>
<age>23</age>
<addr>通榆</addr>
</student>
</students>
JavaScript操作文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function f1() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
//alert(xhr.responseText); //返回字符串
//alert(xhr.responseXML); //返回文档对象
var xmldom = xhr.responseXML;
//console.log(xmldom.firstChild);
//console.log(xmldom.firstChild.childNodes);
var stu = xmldom.getElementsByTagName('student');
var dv = document.getElementById('dv');
var s = "";
for(var i = 0; i < stu.length; i++){
var username = stu[i].getElementsByTagName('name')[0].innerHTML;
var userage = stu[i].getElementsByTagName('age')[0].innerHTML;
var useraddr = stu[i].getElementsByTagName('addr')[0].innerHTML;
s += "名称:" + username + "--年龄:" + userage + "--地址:" + useraddr + "<br/>";
}
document.getElementById('dv').innerHTML += s;
}
}
xhr.open('get', './08-xml.xml');
xhr.send(null);
}
</script>
</head>
<body>
<h2>ajax+JavaScript实现对xml的处理</h2>
<input type="button" value="处理" οnclick="f1()" />
<div id="dv"></div>
</body>
</html>
效果图: