- 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()方法。
函数执行操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!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文件数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<?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>
|