服務器返回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. 解析略微復雜 ~~~