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

最新推荐文章于 2022-11-13 17:10:27 发布

杜小白Zero

最新推荐文章于 2022-11-13 17:10:27 发布

阅读量576

点赞数

分类专栏： AJAX 文章标签： ajax对xml的接收与处理

本文链接：https://blog.csdn.net/DFF1993/article/details/81054154

版权

AJAX 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

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

dom：

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

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

具体实现：

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

实现效果：

杜小白Zero

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax与dom合作实现对xml的接收和处理

ajax负责请求xml和接收xml信息，dom负责处理xml信息dom： php里边，dom是php与xml（html）之间的沟通桥梁 JavaScript里边，dom是JavaScript与html（xml）之间沟通桥梁具体实现：04.xml：&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;weather&gt; &lt;city&...
复制链接

扫一扫