Ajax与dom合作实现对xml的接收和处理

港控/mmm° 2022-05-20 07:59 49阅读 0赞

# ajax负责请求xml和接收xml信息，dom负责处理xml信息 #

dom：

php里边，dom是php与xml（html）之间的沟通桥梁

JavaScript里边，dom是JavaScript与html（xml）之间沟通桥梁

![70][]

# 具体实现： #

# 04.xml： #

<?xml version="1.0" encoding="UTF-8"?>
    <weather>
    	<city>
    		<name>北京</name>
    		<temp>23-31度</temp>
    		<wind>北风</wind>
    	</city>
    	<city>
    		<name>上海</name>
    		<temp>25-34度</temp>
    		<wind>南风</wind>
    	</city>
    	<city>
    		<name>武汉</name>
    		<temp>32-37度</temp>
    		<wind>西风</wind>
    	</city>
    </weather>

# 04xml.html： #

<!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
    			var xhr = new XMLHttpRequest();
    			xhr.onreadystatechange = function(){
    				if(xhr.readyState==4){
    					//alert(xhr.responseXML);//object XMLDocument 他是xml根节点的父节点对象
    					var xmldom = xhr.responseXML;
    					//console.log(xmldom.firstChild);//weather
    					var citys = xmldom.getElementsByTagName('city');
    					//console.log(citys);//HTMLCollection(3) [city, city, city]
    					
    					//citys[1] //第二个city的元素节点对象
    					//for(var k in citys[1]){//k代表元素节点对象的成员名称
    						//有输出一个getElementsByTagName的成员方法
    						//结论：document对象和普通元素对象都可以来调用getElementsByTagName
    						//console.log(k);
    					//}
    					var s="";
    					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;
    						s += "城市："+nm+"——温度："+temp+"——风向："+wind+"<br/>";
    					}
    					document.getElementById('result').innerHTML = s;
    				}
    			}
    			xhr.open('get', './04.xml');
    			xhr.send(null);
    		}
    	</script>
    </head>
    <body>
    	<h2>利用ajax-javascript实现对xml的接收和处理</h2>
    	<input type="button" value="触发" οnclick="f1()">
    	<div id="result"></div>
    </body>
    </html>

# document对象和普通元素对象都可以来调用getElementsByTagName #

![WEBRESOURCEdc267ee276397738204bacbce601ff9e][]

# 实现效果： #

![70 1][]

[70]: /images/20220520/aea210ac0404498f915eabf3187ce163.png
[WEBRESOURCEdc267ee276397738204bacbce601ff9e]: https://note.youdao.com/yws/res/4795/WEBRESOURCEdc267ee276397738204bacbce601ff9e
[70 1]: /images/20220520/2dd69713cbd244e2b056f54b70259108.png