本文实例讲述了AJAX对服务器返回XML的处理方法。分享给大家供大家参考。具体分析如下:
在AJAX 中,服务器端如果返回的XML 文档,则可以通过异步对象的responseXML 属性来获取器XML 数据。而开发者可以利用DOM 的相关方法对其进行处理。
假设服务器返回的XML 文档,如下所示:
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
<? xml version = "1.0" encoding = "gb2312" ?>
< list >
< caption >Member List</ caption >
< member >
< name >isaac</ name >
< class >W13</ class >
< birth >Jun 24th</ birth >
< constell >Cancer</ constell >
< mobile >1118159</ mobile >
</ member >
< member >
< name >fresheggs</ name >
< class >W610</ class >
< birth >Nov 5th</ birth >
< constell >Scorpio</ constell >
< mobile >1038818</ mobile >
</ member >
< member >
< name >girlwing</ name >
< class >W210</ class >
< birth >Sep 16th</ birth >
< constell >Virgo</ constell >
< mobile >1307994</ mobile >
</ member >
< member >
< name >tastestory</ name >
< class >W15</ class >
< birth >Nov 29th</ birth >
< constell >Sagittarius</ constell >
< mobile >1095245</ mobile >
</ member >
< member >
< name >lovehate</ name >
< class >W47</ class >
< birth >Sep 5th</ birth >
< constell >Virgo</ constell >
< mobile >6098017</ mobile >
</ member >
< member >
< name >slepox</ name >
< class >W19</ class >
< birth >Nov 18th</ birth >
< constell >Scorpio</ constell >
< mobile >0658635</ mobile >
</ member >
< member >
< name >smartlau</ name >
< class >W19</ class >
< birth >Dec 30th</ birth >
< constell >Capricorn</ constell >
< mobile >0006621</ mobile >
</ member >
< member >
< name >tuonene</ name >
< class >W210</ class >
< birth >Nov 26th</ birth >
< constell >Sagittarius</ constell >
< mobile >0091704</ mobile >
</ member >
< member >
< name >dovecho</ name >
< class >W19</ class >
< birth >Dec 9th</ birth >
< constell >Sagittarius</ constell >
< mobile >1892013</ mobile >
</ member >
< member >
< name >shanghen</ name >
< class >W42</ class >
< birth >May 24th</ birth >
< constell >Gemini</ constell >
< mobile >1544254</ mobile >
</ member >
< member >
< name >venessawj</ name >
< class >W45</ class >
< birth >Apr 1st</ birth >
< constell >Aries</ constell >
< mobile >1523753</ mobile >
</ member >
< member >
< name >lightyear</ name >
< class >W311</ class >
< birth >Mar 23th</ birth >
< constell >Aries</ constell >
< mobile >1002908</ mobile >
</ member >
</ list >
|
客户端获得服务器端的该XML 数据,并将其显示在表格中。代码如下:
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html>
<head>
<title>responseXML</title>
<style>
<!--
.datalist{
border:1px solid #744011; /* 表格边框 */
font-family:Arial;
border-collapse:collapse; /* 边框重叠 */
background-color: #ffd2aa; /* 表格背景色 */
font-size:14px;
}
.datalist th{
border:1px solid #744011; /* 行名称边框 */
background-color: #a16128; /* 行名称背景色 */
color: #FFFFFF; /* 行名称颜色 */
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:12px; padding-right:12px;
text-align:center;
}
.datalist td{
border:1px solid #744011; /* 单元格边框 */
text-align:left;
padding-top:4px; padding-bottom:4px;
padding-left:10px; padding-right:10px;
}
.datalist tr:hover, .datalist tr.altrow{
background-color: #dca06b; /* 动态变色 */
}
input{ /* 按钮的样式 */
border:1px solid #744011;
color: #744011;
}
-->
</style>
<script language= "javascript" >
var xmlHttp;
function createXMLHttpRequest(){
if (window.ActiveXObject)
xmlHttp = new ActiveXObject( "Microsoft.XMLHttp" );
else if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
function getXML(addressXML){
var url = addressXML + "?timestamp=" + new Date();
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open( "GET" ,url);
xmlHttp.send( null );
}
function addTableRow(sName, sClass, sBirth, sConstell, sMobile){
//表格添加一行的相关操作,可参看7.2.1节
var oTable = document.getElementById( "member" );
var oTr = oTable.insertRow(oTable.rows.length);
var aText = new Array();
aText[0] = document.createTextNode(sName);
aText[1] = document.createTextNode(sClass);
aText[2] = document.createTextNode(sBirth);
aText[3] = document.createTextNode(sConstell);
aText[4] = document.createTextNode(sMobile);
for ( var i=0;i<aText.length;i++){
var oTd = oTr.insertCell(i);
oTd.appendChild(aText[i]);
}
}
function DrawTable(myXML){
//用DOM方法操作XML文档
var oMembers = myXML.getElementsByTagName( "member" );
var oMember = "" , sName = "" , sClass = "" , sBirth = "" , sConstell = "" , sMobile = "" ;
for ( var i=0;i<oMembers.length;i++){
oMember = oMembers[i];
sName = oMember.getElementsByTagName( "name" )[0].firstChild.nodeValue;
sClass = oMember.getElementsByTagName( "class" )[0].firstChild.nodeValue;
sBirth = oMember.getElementsByTagName( "birth" )[0].firstChild.nodeValue;
sConstell = oMember.getElementsByTagName( "constell" )[0].firstChild.nodeValue;
sMobile = oMember.getElementsByTagName( "mobile" )[0].firstChild.nodeValue;
//添加一行
addTableRow(sName, sClass, sBirth, sConstell, sMobile);
}
}
function handleStateChange(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
DrawTable(xmlHttp.responseXML); //responseXML获取到XML文档
}
</script>
</head>
<body>
<input type= "button" value= "获取XML" onclick= "getXML('9-4.xml');" ><br><br>
<table class= "datalist" summary= "list of members in EE Studay" id= "member" >
<tr>
<th scope= "col" >Name</th>
<th scope= "col" >Class</th>
<th scope= "col" >Birthday</th>
<th scope= "col" >Constellation</th>
<th scope= "col" >Mobile</th>
</tr>
</table>
</body>
</html>
|
我们可以看到,在客户端获得XML 文件的代码如下:
1
|
<input type= "button" value= "获取XML" onclick= "getXML('9-4.xml');" >
|
也就是说,是直接取得XML 数据的。而实际开发中返回XML 数据的工作是通过服务器端(如:ASP.NET、JSP等)的代码动态生成的。换句话说,getXML('...') 中的文件地址应该是.aspx 或.jsp等动态页面的后缀。
使用jQuery 框架实现
如果在客户端使用jQuery 框架,实现AJAX 获得服务器端的XML数据。
代码如下:
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
48
49
|
<html>
<head>
<title> demo </title>
<meta name= "Author" content= "xugang" />
<script language= "javascript" src= "jquery.min.js" ></script>
<script type= "text/javascript" >
function getXML(addressXML){
//使用jquery的ajax方法
$.ajax({
type: "GET" ,
url:addressXML,
dataType: "xml" , //返回类型(区分大小写)
success: function (myXML){
//each 遍历每个<member>标记
$(myXML).find( "member" ).each(
function (){
var oMember= "" ,sName= "" ,sClass= "" ,sBirth= "" ,sConstell= "" ,sMobile= "" ;
sName = $( this ).find( "name" ).text();
sClass = $( this ).find( "class" ).text();
sBirth = $( this ).find( "birth" ).text();
sConstell = $( this ).find( "constell" ).text();
sMobile = $( this ).find( "mobile" ).text();
//添加行
$( "#member" ).append($( "<tr><td>" +sName
+ "</td><td>" + sClass
+ "</td><td>" + sBirth
+ "</td><td>" + sConstell
+ "</td><td>" + sMobile + "</td></tr>" ));
}
)
}
})
}
</script>
</head>
<body>
<input type= "button" value= "获取XML" onclick= "getXML('9-4.xml');" >
<br/>
<TABLE class= "datalist" id= "member" >
<TR>
<TH scope= "col" >Name</TH>
<TH scope= "col" >Class</TH>
<TH scope= "col" >Birthday</TH>
<TH scope= "col" >Constellation</TH>
<TH scope= "col" >Mobile</TH>
</TR>
</TABLE>
</body>
</html>
|
服务器端传递XML 数据的方式不变。