332 ajax数据交互 之 XML
浏览器端只是负责用户的交互和数据的收集以及展示，真正的数据都是存储在服务器端的。我们现在通过ajax的确可以返回一些简单的数据（一个字符串），但是在实际开发过程中，肯定会会设计到大量的复杂类型的数据传输，比如数组、对象等，但是每个编程语言的语法都不一样。因此我们会采用通过的数据交换格式（XML、JSON）来进行数据的交互。
XML
什么是XML
- XML 指可扩展标记语言（EXtensible Markup Language）
- XML 是一种标记语言，很类似 HTML
- XML 的设计宗旨是传输数据，而非显示数据
- XML 标签没有被预定义。您需要自行定义标签。
语法规范
- 第一行必须是版本信息
- 必须有一个根元素（有且仅有一个）
- 标签不可有空格、不可以数字或.开头、大小写敏感
- 不可交叉嵌套，都是双标签，如果是单标签，必须闭合
- 属性双引号（浏览器自动修正成双引号了）
- 特殊符号要使用实体
- 注释和HTML一样
xml解析
1、后台需要设置
告诉浏览器，返回的 文件格式是xml，及编码格式
header('content-type:text/xml;charset=utf-8');
2、前端获取
xhr.responseXML 来获取，得到是一个dom对象，
取值： 剥洋葱， 一直获取子元素，直到取值位置 dom操作！
3、缺点：虽然可以描述和传输复杂数据，但是其解析过于复杂并且体积较大，所以实现开发已经很少使用了。
<students>
<student>
<name>张三</name>
<age>18</age>
<gender>男</gender>
<desc>路人甲</desc>
</student>
<student>
<name>李四</name>
<age>20</age>
<gender>男</gender>
<desc>路人乙</desc>
</student>
</students>
php获取xml文件的内容
//注意，如果需要返回xml数据，需要把content-type改成text/xml,不然浏览器以text/html进行解析。
header('content-type:text/xml;charset=utf-8');
//用于获取文件的内容
//参数：文件的路径
$result = file_get_contents("data.xml");
echo $result;
html解析xml
//获取服务端返回的xml数据，需要使用xhr.responseXML，这是一个document对象，可以使用DOM中的方法查找元素。
var data = xhr.responseXML;
//获取所有的学生
var students = data.querySelectorAll("student");
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../table.css">
</head>
<body>
<button>获取数据</button>
<table>
<!-- 动态渲染 -->
</table>
<script>
// 1- 点击按钮，向后台发送请求，获取明星数据
// 2- 把后他返回的xml数据，动态渲染在页面中
document.querySelector('button').onclick = function() {
//1-创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//2-设置请求报文
//2-1请求行
xhr.open('get', './star.php');
//2-2请求头
//2-3请求主体
xhr.send(null);
//3-监听服务器响应
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// var r = xhr.responseText; //获取响应文本，以字符串形式获取
var r = xhr.responseXML; //获取后台返回xml数据
console.log(r);
//每个item中存储的是一个人的信息
var items = r.querySelectorAll('item');
console.log(items);
// 遍历items，每个item要生成表格一行
var str = ''; //用于存储生成表格结构
for (var i = 0; i < items.length; i++) {
console.dir(items[i].querySelector('name').innerHTML);
//获取当前遍历人的信息
var name = items[i].querySelector('name').innerHTML;
var age = items[i].querySelector('age').innerHTML;
var sex = items[i].querySelector('sex').innerHTML;
var photo = items[i].querySelector('photo').innerHTML;
var album = items[i].querySelector('album').innerHTML;
//把一个人信息拼成表格的一行
str += '<tr>';
str += '<td>' + name + '</td>';
str += '<td>' + age + '</td>';
str += '<td>' + sex + '</td>';
str += '<td>' + photo + '</td>';
str += '<td>' + album + '</td>';
str += '</tr>';
}
//输出
console.log(str);
//把拼接好结构 放到页面中
document.querySelector('table').innerHTML = str;
}
}
}
</script>
</body>
</html>
<?php
// 告诉浏览器，返回的 文件格式是xml，及编码格式 【默认返回的是text/html文本字符串】【返回text/xml，前端就收到的是一个文档对象，不是字符串。】
header('content-type:text/xml;charset=utf-8');
// 获取star.xml中数据，返回给前端
echo file_get_contents('./star.xml');
?>
<?xml version="1.0" encoding="utf-8"?>
<root>
<item>
<name type="star">王力宏</name>
<photo>./images/wlh.jpg</photo>
<album><<改变自已>></album>
<age>9</age>
<sex>男</sex>
</item>
<item>
<name type="star">周杰伦</name>
<photo>./images/wlh.jpg</photo>
<album><<我很忙>></album>
<age>39</age>
<sex>男</sex>
</item>
<item>
<name type="star">王力宏</name>
<photo>./images/wlh.jpg</photo>
<album><<改变自已>></album>
<age>39</age>
<sex>男</sex>
</item>
<item>
<name type="star">王力宏</name>
<photo>./images/wlh.jpg</photo>
<album><<改变自已>></album>
<age>39</age>
<sex>男</sex>
</item>
<item>
<name type="star">王力宏</name>
<photo>./images/wlh.jpg</photo>
<album><<改变自已>></album>
<age>39</age>
<sex>男</sex>
</item>
<item>
<name type="star">王力宏</name>
<photo>./images/wlh.jpg</photo>
<album><<改变自已>></album>
<age>39</age>
<sex>男</sex>
</item>
<item>
<name type="star">王力宏</name>
<photo>./images/wlh.jpg</photo>
<album><<改变自已>></album>
<age>39</age>
<sex>男</sex>
</item>
<item>
<name type="star">周杰棍</name>
<photo>./images/wlh.jpg</photo>
<album><<双截龙>></album>
<age>39</age>
<sex>男</sex>
</item>
<item>
<name type="star">王力宏</name>
<photo>./images/wlh.jpg</photo>
<album><<改变自已>></album>
<age>39</age>
<sex>男</sex>
</item>
<item>
<name type="star">王力宏</name>
<photo>./images/wlh.jpg</photo>
<album><<改变自已>></album>
<age>39</age>
<sex>男</sex>
</item>
<item>
<name type="star">王力宏</name>
<photo>./images/wlh.jpg</photo>
<album><<改变自已>></album>
<age>39</age>
<sex>男</sex>
</item>
<item>
<name type="star">王力宏</name>
<photo>./images/wlh.jpg</photo>
<album><<改变自已>></album>
<age>39</age>
<sex>男</sex>
</item>
<item>
<name type="star">周杰棍</name>
<photo>./images/wlh.jpg</photo>
<album><<双截龙>></album>
<age>39</age>
<sex>男</sex>
</item>
</root>
