-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathopcionxml3.htm
196 lines (186 loc) · 6.19 KB
/
opcionxml3.htm
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
html {background-color:#eeeeee}
body {
background-color:#ccffcc;
font-family:Tahoma,Arial,Helvetica,sans-serif;
font-size:12px;
margin-left:15%;
margin-right:15%;
border:3px groove #006600;
padding:15px
}
h1 {
text-align:left;
font-size:1.5em;
font-weight:bold
}
</style>
<script type="text/javascript">
// global flag
var isIE = false;
// global request and XML document objects
var req;
// retrieve XML document (reusable generic function);
// parameter is URL string (relative or complete) to
// an .xml file whose Content-Type is a valid XML
// type, such as text/xml; XML source must be from
// same domain as HTML file
function loadXMLDoc(url) {
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
}
}
// handle onreadystatechange event of req object
function processReqChange() {
// only if req shows "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
clearTopicList();
buildTopicList();
} else {
alert("There was a problem retrieving the XML data:\n" +
req.statusText+" "+req.status);
}
}
}
// invoked by "Category" select element change;
// loads chosen XML document, clears Topics select
// element, loads new items into Topics select element
function loadDoc(evt) {
// equalize W3C/IE event models to get event object
evt = (evt) ? evt : ((window.event) ? window.event : null);
if (evt) {
// equalize W3C/IE models to get event target reference
var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if (elem) {
try {
if (elem.selectedIndex > 0) {
loadXMLDoc(elem.options[elem.selectedIndex].value);
}
}
catch(e) {
var msg = (typeof e == "string") ? e : ((e.message) ? e.message : "Unknown Error");
alert("Unable to get XML data:\n" + msg);
return;
}
}
}
}
// retrieve text of an XML document element, including
// elements using namespaces
function getElementTextNS(prefix, local, parentElem, index) {
var result = "";
if (prefix && isIE) {
// IE/Windows way of handling namespaces
result = parentElem.getElementsByTagName(prefix + ":" + local)[index];
} else {
// the namespace versions of this method
// (getElementsByTagNameNS()) operate
// differently in Safari and Mozilla, but both
// return value with just local name, provided
// there aren't conflicts with non-namespace element
// names
result = parentElem.getElementsByTagName(local)[index];
}
if (result) {
// get text, accounting for possible
// whitespace (carriage return) text nodes
if (result.childNodes.length > 1) {
return result.childNodes[1].nodeValue;
} else {
return result.firstChild.nodeValue;
}
} else {
return "n/a";
}
}
// empty Topics select list content
function clearTopicList() {
var select = document.getElementById("topics");
while (select.length > 0) {
select.remove(0);
}
}
// add item to select element the less
// elegant, but compatible way.
function appendToSelect(select, value, content) {
var opt;
opt = document.createElement("option");
opt.value = value;
opt.appendChild(content);
select.appendChild(opt);
}
// fill Topics select list with items from
// the current XML document
function buildTopicList() {
var select = document.getElementById("topics");
var items = req.responseXML.getElementsByTagName("item");
// loop through <item> elements, and add each nested
// <title> element to Topics select element
for (var i = 0; i < items.length; i++) {
appendToSelect(select, i,
document.createTextNode(getElementTextNS("", "title", items[i], 0)));
}
// clear detail display
document.getElementById("details").innerHTML = "";
}
// display details retrieved from XML document
function showDetail(evt) {
evt = (evt) ? evt : ((window.event) ? window.event : null);
var item, content, div;
if (evt) {
var select = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if (select && select.options.length > 1) {
// copy <content:encoded> element text for
// the selected item
item = req.responseXML.getElementsByTagName("item")[select.value];
content = getElementTextNS("content", "encoded", item, 0);
div = document.getElementById("details");
div.innerHTML = "";
// blast new HTML content into "details" <div>
div.innerHTML = content;
}
}
}
</script>
</head>
<body>
<h1>XMLHttpRequest Object Demo</h1>
<hr />
<form>
<p>Category:<br />
<select onchange="loadDoc(event)">
<option value="">Choose One</option>
<option value="songs.xml">Top 10 Songs</option>
<option value="albums.xml">Top 10 Albums</option>
<option value="newreleases.xml">Top 10 New Releases</option>
<option value="justadded.xml">Top 10 Just Added</option>
</select>
</p>
<p>Items:<br />
<select size="10" id="topics" onchange="showDetail(event)">
<option value="">Choose a Category First</option>
</select>
</p>
</form>
<div id="details"><span></span></div>
</body>
<html>