html 读取xml

1， xml 文件

<?xml version="1.0" encoding="utf-8"?>
<root>
<person>
<name type="star">王力宏</name>
<photo>./images/wlh.jpg</photo>
<album>&lt;&lt;改变自已&gt;&gt;</album>
<age>39</age>
<sex>男</sex>
</person>
<person>
<name type="star">周杰伦</name>
<photo>./images/wlh.jpg</photo>
<album>&lt;&lt;我很忙&gt;&gt;</album>
<age>39</age>
<sex>男</sex>
</person>
<person>
<name type="star">王力宏</name>
<photo>./images/wlh.jpg</photo>
<album>&lt;&lt;改变自已&gt;&gt;</album>
<age>39</age>
<sex>男</sex>
</person>
<person>
<name type="star">王力宏</name>
<photo>./images/wlh.jpg</photo>
<album>&lt;&lt;改变自已&gt;&gt;</album>
<age>39</age>
<sex>男</sex>
</person>
<person>
<name type="star">王力宏</name>
<photo>./images/wlh.jpg</photo>
<album>&lt;&lt;改变自已&gt;&gt;</album>
<age>39</age>
<sex>男</sex>
</person>
<person>
<name type="star">王力宏</name>
<photo>./images/wlh.jpg</photo>
<album>&lt;&lt;改变自已&gt;&gt;</album>
<age>39</age>
<sex>男</sex>
</person>
</root>

2，

<?php

// 理论上数据是从数据库取出
// 由PHP处理程序，生成一个xml文档
// 为了学习目的，我们简化了步聚，手工创建了一个xml

header('Content-Type: text/xml; charset=utf-8');

// 获取xml文档
$result = file_get_contents('./stars.xml');

// 将xml文档返回
echo $result;

 

?>

3， 显示到页面

<script>
var btn = document.querySelector('[type=button]');

btn.onclick = function () {

var xhr = new XMLHttpRequest;

xhr.open('get', 'stars.php');

xhr.send(null);

xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200) {

// var result = xhr.responseText;

// 当返回的内容为xml格式时
var result = xhr.responseXML;

console.log(result);

// 通过DOM解析
var persons = result.getElementsByTagName('person');

// console.log(persons.length);

var html = '';
// 遍历生成HTML字符串
for(var i=0; i<persons.length; i++) {
var name = persons[i].getElementsByTagName('name')[0];
var sex = persons[i].getElementsByTagName('sex')[0];
var age = persons[i].getElementsByTagName('age')[0];
var photo = persons[i].getElementsByTagName('photo')[0];
var album = persons[i].getElementsByTagName('album')[0];

html += '<tr>';
html += '<td>' + name.innerHTML + '</td>';
html += '<td>' + sex.innerHTML + '</td>';
html += '<td>' + age.innerHTML + '</td>';
html += '<td>' + photo.innerHTML + '</td>';
html += '<td>' + album.innerHTML + '</td>';
html += '</tr>';
}

//console.log(html);
// 将拼凑好的字符串，添加到DOM中
document.querySelector('table').innerHTML = html;
}
}
}
</script>