Ajax對XML信息的接收和處理
- 2019 年 12 月 23 日
- 筆記
Ajax負責請求xml和接收xml信息，dom負責處理xml信息
- dom：
- php中，dom是php與xml（html）之間的溝通橋樑；
- javascript中，dom是javascript與html（xml）之間溝通的橋樑。
- xml需要從服務器端返回到客戶端被javascript處理；
- ajax：負責請求xml回來；
- DOM（javascript）：負責處理xml信息。
Ajax+JavaScript實現對xml的接收處理，可以方便我們後期實現一個靜態網站（html+css+javascript）實現對各個接口數據的處理。
document對象和普通元素對象都可以調用getElementsByTagName()方法。
函數執行操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>利用ajax+javaScript實現對xml的接受和處理</title> <script type="text/javascript"> function f1(){ //ajax請求xml信息回來 //javascript的dom技術處理xml //document xmldocument var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 ){ //[object XMLDocument] 其實是xml根結點的父節點對象 //alert(xhr.responseXML); var xmldom = xhr.responseXML; //console.log(xmldom.firstChild);<weather> var citys = xmldom.getElementsByTagName('city'); //citys[1] //第二個city的元素節點對象 /*for(var k in citysp[1]){//k代表元素節點的成員名稱 //有輸出其中一個成員方法：getElementsByTagName //結論：document對象 和 普通元素都可以調用getElementdByTagName函數 console.log(k); }*/ var str =""; for(var i=0; i<citys.length; i++){ var nm = citys[i].getElementsByTagName('name')[0].firstChild.nodeValue; var temp = citys[i].getElementsByTagName('temp')[0].firstChild.nodeValue; var wind = citys[i].getElementsByTagName('wind')[0].firstChild.nodeValue; str += "城市：" +nm+ "--溫度："+temp+"--風向："+wind+"<br/>"; } document.getElementById('result').innerHTML =str; } } xhr.open('get','./test01.xml'); xhr.send(null); } </script> </head> <body> <h2>利用ajax+javaScript實現對xml的接受和處理</h2> <input type="button" value="觸發" onclick="f1()"> <div id="result"></div> </body> </html>
XML文件數據
<?xml version="1.0" encoding="utf-8" ?> <weather> <city> <name>北京</name> <temp>23-31度</temp> <wind>北風</wind> </city> <city> <name>上海</name> <temp>23-31度</temp> <wind>東風</wind> </city> <city> <name>廣州</name> <temp>28-31度</temp> <wind>南風</wind> </city> <city> <name>深圳</name> <temp>29-31度</temp> <wind>東南風</wind> </city> </weather>
本文鏈接：https://www.debuginn.cn/403.html
本文採用CC BY-NC-SA 3.0 Unported協議進行許可，轉載請保留此文章鏈接
