xml的解析及案例的分析和分享

HTML的文档如下：

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

table {

border: 1px solid #000;

width: 500px;

margin: 0 auto;

border-collapse: collapse;

}

th {

height: 40px;

line-height: 40px;

background-color: #ccc;

border: 1px solid #000;

}

td {

text-align: center;

border: 1px solid #000;

}

</style>

</head>

<body>

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<!-- <tr>

</tr> -->

</tbody>

</table>

// 思路:

// 1. 给按钮添加点击事件

// 2. 发送ajax请求, 获取数据

// 3. 得到 xml 数据, 完成渲染

var btn = document.querySelector('#getInfo');

var tbody = document.querySelector('tbody');

btn.onclick = function() {

// 1. 创建ajax对象

var xhr = new XMLHttpRequest();

// 2. 发送请求 get

xhr.open('get', '13-xml.php');

xhr.send(null);

// 3. 处理响应

xhr.onreadystatechange = function() {

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

// 成功响应

// 一般响应都是文本格式, responseText

// 但是如果是 xml 格式, 需要使用 responseXML

// console.log(xhr.responseText);

// xml不支持 innerText

// 这种方式读取，得到的是一个 dom 对象, 可以使用dom的方法!!!

// console.log(xhr.responseXML);

var result = xhr.responseXML; // dom对象

var allUsers = result.querySelectorAll('user');

// console.log(allUsers);

// console.log(allUsers[0].children[0].innerHTML);

var htmlStr = '';

// 遍历allUsers 字符串拼接

for (var i = 0; i < allUsers.length; i++) {

var str = "<tr>" +

" <td>"+ allUsers[i].children[0].innerHTML +"</td>" +

" <td>"+ allUsers[i].children[1].innerHTML +"</td>" +

" <td>"+ allUsers[i].children[2].innerHTML +"</td>" +

" <td>"+ allUsers[i].children[3].innerHTML +"</td>" +

"</tr>";

htmlStr += str;

}

tbody.innerHTML = htmlStr;

}

};

// xml格式注意点:

// 后台必须设置类型 text/xml

// 前端请求完, 接收需要 responseXML 来接收, 接收得到的是 dom, 需要通过 dom 的方式取出值!!!

</script>

</body>

</html>

xml的php文件如下：

<?php

// xml解析时, 一定要设置 content-type 类型 text/xml

// 设置字符集

header('content-type: text/xml; charset=utf-8;');

// 读取xml格式的数据, 并且返回给前端

// 读取内容

echo file_get_contents('data.xml');

xml的xml文件如下：

<users>

<user>

</user>

<user>

</user>

<user>

</user>

<user>

</user>

</users>

xml的解析及案例的分析和分享

猜你喜欢