?
下面主要介紹client的代碼：
?
?1
//先假設server傳過來如下的xml文件內容：
?2
<?
xml?version="1.0"?encoding="gb2312"
?>
?3
<
students
>
?4
?????
<
student?
name
="木魚子"
>
?5
??????????
<
job
>
Programmer
</
job
>
?6
??????????
<
salary
>
3000
</
salary
>
?7
?????
</
student
>
?8
?????
<
student?
name
="丁磊"
>
?9
??????????
<
job
>
網易CEO
</
job
>
10
??????????
<
salary
>
100000
</
salary
>
11
?????
</
student
>
12
?????
<
student?
name
="陳天橋"
>
13
??????????
<
job
>
盛大CEO
</
job
>
14
??????????
<
salary
>
120000
</
salary
>
15
?????
</
student
>
16
</
students
>
?
?
?1
//3個方法函數定義
?2
function?getCount(){
?3
?return?this.rootObj.length
?4
}
?5
?6
function?getData(index,?tagName){
?7
??if?(index?>=?this.count){
?8
????????return?"index?overflow"
?9
???}
10
?var?node?=?this.rootObj[index]
11
?var?str?=?node.getElementsByTagName(tagName)[0].firstChild.data
12
?return?str
13
}
14
15
function?getAttribute(index,?tagName)?{
16
???if?(index?>=?this.count){
17
????????return?"index?overflow"
18
???}
19
?var?node?=?this.rootObj[index]
20
?var?str?=?node.getAttribute(tagName)
21
?return?str
22
}
//使用DataSet類獲取所需標簽集合
?1
function?updateByXML(xmlDoc)?{?
?2
??????var?studentDS?=?new?DataSet(xmlDoc,"student");
?3
??????var?count?=?studentDS.getCount()
?4
??????for(i=0;i
<
count
;i++)?{
?5
??????????var?name?
=?studentDS.getAttribute(i,"name")
?6
??????????
var?job?
=?studentDS.getData(i,"job")
?7
??????????
var?salary?
=?studentDS.getData(i,"salary")??
?8
??????????
alert(name?+?","?+?job?+?","?+?salary)
?9
??????}
10
?}
//操縱DOM，創建table，顯示獲得的數據，用這種方法顯示數據，容易讓用戶接受！~^_^
?1
//
首先要確定document對象中，有沒有定義table
?2
function
?deleteOldTable()?
{
?3
?????delRow?
=
?document.getElementsByTagName(
"
table
"
).length
?4
?5
?????
if
(delRow?
==
0
)?
{
?6
???????????
return
?;
?7
???????}
?8
?9
?????
var
?node?
=
?document.getElementsByTagName(
"
table
"
)[delRow
-
1
];?
//
表格
10
?????
var
?c?
=
?node.childNodes.length
11
12
?????
for
(i
=
0
;i
<
c;i
++
)
{
13
???????node.removeChild(node.childNodes[
0
]);?
//
刪除全部單元行
14
?????}
15
16
}
?
?1
//
傳入DataSet的一個實例即可
?2
function
?makeTable(m_ds)?
{
?3
?????deleteOldTable()?????
//
先清除以前的結果
?4
?5
?????
var
?table?
=
?document.createElement(
"
table
"
);
?6
?????table.setAttribute(
"
border
"
,
"
1
"
);
?7
?????table.setAttribute(
"
width
"
,
"
100%
"
);
?8
?9
?????document.body.appendChild(table);
10
?????
var
?header?
=
?table.createTHead();
11
?????
var
?headerrow?
=
?header.insertRow(
0
);
12
?????headerrow.insertCell(
0
).appendChild(document.createTextNode(
"
姓名
"
));
13
?????headerrow.insertCell(
1
).appendChild(document.createTextNode(
"
職業
"
));
14
?????headerrow.insertCell(
2
).appendChild(document.createTextNode(
"
工資
"
));
15
16
?????
for
(
var
?i
=
0
;i
<
m_ds.getCount();i
++
)?
{??
17
??????????
var
?name?
=
?m_ds.getAttribute(i,
"
name
"
)
18
??????????
var
?job?
=
?m_ds.getData(i,
"
job
"
)
19
??????????
var
?salary?
=
?m_ds.getData(i,
"
salary
"
)??????
20
??????????
var
?row?
=
?table.insertRow(i
+
1
);
21
??????????row.insertCell(
0
).appendChild(document.createTextNode(name));
22
??????????row.insertCell(
1
).appendChild(document.createTextNode(job));
23
??????????row.insertCell(
2
).appendChild(document.createTextNode(salary));
24
?????}
25
}
以上就是javascript的DOM的基本使用方法，作為ajax的基礎，掌握這個是非常重要滴！~