服务器返回XML格式数据 · 学习AJAX

[TOC] >[success] # 服务器返回xml <br/> 后台返回xml文件信息，前端获取xml信息来进行解析 <br/> >[success] ## 简单的XML结构解析 <br/> 下面是一种常见的简单的XML文件结构解析方法 <br/> >[success] ### 前端代码 <br/> 1. index.html ~~~ <!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> <script> window.onload = function () { // 点击请求xml document.querySelector('input').onclick = function () { // 1. 创建异步对象 var xhr = new XMLHttpRequest(); // 2. 设置请求行 xhr.open('post', 'backXML.php'); // 3. 设置请求头(get请求可以省略) // 4. 注册状态改变事件 xhr.onreadystatechange = function () { // 4.1 判断状态&请求是否成功并使用数据 if (xhr.readyState === 4 && xhr.status === 200) { // console.log(xhr.responseText) // 如果返回的xml 使用responseXML来接收数据 console.log(xhr.responseXML) // 页面中默认的文档对象 console.log(document) // 解析XML console.log(xhr.responseXML.querySelector('name').innerHTML) console.log(xhr.responseXML.querySelector('age').innerHTML) console.log(xhr.responseXML.querySelector('skill').innerHTML) // 获取信息 var name = xhr.responseXML.querySelector('name').innerHTML, age = xhr.responseXML.querySelector('age').innerHTML, skill = xhr.responseXML.querySelector('skill').innerHTML; // 设置给dom元素 document.querySelector('h3').innerHTML = name + '--' + age + '--' + skill; } } // 5. 发送请求 xhr.send(null); } } </script> </head> <body> <h2>请求xml文件</h2> <input type="button" value="ajax获取XML文件"> <h3></h3> </body> </html> ~~~ <br/> >[success] ### 后端代码 <br/> 1. person.xml ~~~ <?xml version="1.0" encoding="UTF-8"?>  <root> <name>小明</name> <age>18</age> <skill>唱歌</skill> </root> ~~~ <br/> 2. backXML.php ~~~ <?php // 告诉浏览器返回的是xml，编码格式是utf-8 header('content-type:text/xml;charset=utf-8'); // 接手发送过来的数据 // 读取 xml // 参数1 文件的路径名 $xmlString = file_get_contents('./person.xml'); // 返回读取的 xml echo $xmlString; ?> ~~~ <br/> >[success] ## 复杂的XML结构解析 <br/> 通过循环的方式解析取数据 <br/> >[success] ### 前端代码 <br/> 1. index.html ~~~ <!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> <script> window.onload = function () { // 点击请求xml document.querySelector('input').onclick = function () { // 1. 创建异步对象 var xhr = new XMLHttpRequest(); // 2. 设置请求行 xhr.open('post', 'backXML.php'); // 3. 设置请求头(get请求可以省略) // 4. 注册状态改变事件 xhr.onreadystatechange = function () { // 4.1 判断状态&请求是否成功并使用数据 if (xhr.readyState === 4 && xhr.status === 200) { // 解析XML var contentAll = xhr.responseXML.querySelectorAll('content'); var ul = document.querySelector('ul'); for (var i = 0; i < contentAll.length; i++) { // 内容 var content = contentAll[i]; // 名字 var name = contentAll[i].querySelector('name').innerHTML; // 年龄 var age = contentAll[i].querySelector('age').innerHTML; // 技能 var skill = contentAll[i].querySelector('skill').innerHTML; // 创建li var li = document.createElement('li'); // 给li添加内容 li.innerHTML = name + '--' + age + '--' + skill; // 给ul添加li元素 ul.appendChild(li) } } } // 5. 发送请求 xhr.send(null); } } </script> </head> <body> <h2>请求xml文件</h2> <input type="button" value="ajax获取XML文件"> <ul></ul> </body> </html> ~~~ <br/> >[success] ### 后端代码 <br/> 1. person.xml ~~~ <?xml version="1.0" encoding="UTF-8"?>  <root> <content> <name>小明</name> <age>18</age> <skill>唱歌</skill> </content> <content> <name>小黑</name> <age>20</age> <skill>跳舞</skill> </content> <content> <name>小红</name> <age>25</age> <skill>睡觉</skill> </content> </root> ~~~ <br/> 2. backXML.php ~~~ <?php // 告诉浏览器返回的是xml，编码格式是utf-8 header('content-type:text/xml;charset=utf-8'); // 接手发送过来的数据 // 读取 xml // 参数1 文件的路径名 $xmlString = file_get_contents('./person.xml'); // 返回读取的 xml echo $xmlString; ?> ~~~ <br/> >[warning] # xml的缺点 <br/> ~~~ 1. 传输的数据量大，但是现在5G网络这个也就不算什么大问题了 2. 解析略微复杂 ~~~