JavaScript Read And Show XML Data

Zeuxis  2007-06-02  Project

基本上都是為了試試讀取 XML 而寫出來的小程式,對於 JS 還是力不從心的感覺,這程式主要是用了 JavaScript 來建立表單和迴圈讀取 XML 檔案的資料並列出

HTML 主檔案:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript Loop XML Data</title>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<script src="script.js" language="javascript" type="text/javascript"></script>
<style type="text/css">
body        { font-size: 12px; font-family: Tahoma; }
.shop_title { font-weight: bold; padding: 5px; }
.book_table { padding: 5px; width: 580px; }
</style>
</head>
<body>
<div id="button">
	<input type="button" value="Read File" onclick="loadXML('books.xml')" />
	<hr size="0" />
</div>
<div id="book_list">Please Clicked For Read.. .. .</div>
</body>
</html>

XML 的資料檔案 : 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="UTF-8"?>
<channel>
	<shopname>測之書店</shopname>
	<book>
		<name>回到過去</name>
		<money>250</money>
		<author>什麼</author>
	</book>
	<book>
		<name>我的後花園</name>
		<money>200</money>
		<author>晴兒</author>
	</book>
	<book>
		<name>過去的你</name>
		<money>180</money>
		<author>老老</author>
	</book>
</channel>

JavaScript 就是整個小程式中的核心文件 (主要是用來載入 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
var xmlDoc;

function loadXML(xmlFile) {
	if (window.ActiveXObject) {
		
		xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

		xmlDoc.async=false;
		if (xmlDoc.load(xmlFile)) {
			xmlDoc.load(xmlFile);
			showFileData();
		}else{
			alert('無法載入檔案');
		}

	}else if (document.implementation && document.implementation.createDocument) {

		xmlDoc = document.implementation.createDocument("","",null);

		if (xmlDoc.load(xmlFile)) {
			xmlDoc.load(xmlFile);
		}else{
			alert('無法載入檔案');
		}
		xmlDoc.onload=showFileData;

	} else {
		alert('對不起,你的瀏覽器不支援此程式');
	}
}

function showFileData() {
	var oldtitle = document.title;
	var channel  = xmlDoc.getElementsByTagName("channel")[0];
	var shopname = getNodeValue(channel, "shopname");
	var books = channel.getElementsByTagName('book');
	var bookslen = books.length;

	// 生成店名
	var div_elm = document.createElement("div");
	var div_txt = document.createTextNode(shopname);
	div_elm.id = 'shop_title';
	div_elm.className = 'shop_title';
	div_elm.setAttribute('name', 'shop_title');
	div_elm.onclick = function() {
		alert(shopname);
	}

	div_elm.appendChild(div_txt);

	// 生成表單
	var tbl     = document.createElement("table");
	var tblBody = document.createElement("tbody");

	tbl.className = 'book_table';

	var book_subval = new Array('name','money','author');

	for (var j = 0; j < bookslen; j++) {

		var row = document.createElement("tr");

		for (var i = 0; i < 3; i++) {
			
			var cell = document.createElement("td");
			var cellText = document.createTextNode(getNodeValue(books[j], book_subval[i]))

			cell.appendChild(cellText);
			row.appendChild(cell);

		}

		tblBody.appendChild(row);
	}

	tbl.appendChild(tblBody);

	// 加載顯示
	document.getElementById('book_list').innerHTML = "";
	document.getElementById('book_list').appendChild(div_elm);
	document.getElementById('book_list').appendChild(tbl);
}

function getNodeValue(elm, val) {
	if(elm.getElementsByTagName(val)[0] != null && elm.getElementsByTagName(val)[0].firstChild != null) {
		return elm.getElementsByTagName(val)[0].firstChild.nodeValue;
	} else {
		return "unknown";
	}
}
© Copyright 2007 - 2023 by Zeuxis Lo.