XMLHttp 方式实现无刷屏,在IE,FireFox 上测试通过
1<html>
2<head>
3<style>
4html {background-color:#eeeeee}
5body {
6background-color:#ccffcc;
7font-family:Tahoma,Arial,Helvetica,sans-serif;
8font-size:12px;
9margin-left:15%;
10margin-right:15%;
11border:3px groove #006600;
12padding:15px
13}
14h1 {
15text-align:left;
16font-size:1.5em;
17font-weight:bold
18}
19</style>
20<script type="text/javascript">
21// global flag
22var isIE = false;
23
24// global request and XML document objects
25var req;
26
27// retrieve XML document (reusable generic function);
28// parameter is URL string (relative or complete) to
29// an .xml file whose Content-Type is a valid XML
30// type, such as text/xml; XML source must be from
31// same domain as HTML file
32function loadXMLDoc(url) {
33// branch for native XMLHttpRequest object
34if (window.XMLHttpRequest) {
35req = new XMLHttpRequest();
36req.onreadystatechange = processReqChange;
37req.open("GET", url, true);
38req.send(null);
39// branch for IE/Windows ActiveX version
40} else if (window.ActiveXObject) {
41isIE = true;
42req = new ActiveXObject("Microsoft.XMLHTTP");
43if (req) {
44req.onreadystatechange = processReqChange;
45req.open("GET", url, true);
46req.send();
47}
48}
49}
50
51// handle onreadystatechange event of req object
52function processReqChange() {
53// only if req shows "loaded"
54if (req.readyState == 4) {
55// only if "OK"
56if (req.status == 200) {
57clearTopicList();
58buildTopicList();
59} else {
60alert("There was a problem retrieving the XML data:\n" +
61req.statusText);
62}
63}
64}
65
66// invoked by "Category" select element change;
67// loads chosen XML document, clears Topics select
68// element, loads new items into Topics select element
69function loadDoc(evt) {
70// equalize W3C/IE event models to get event object
71evt = (evt) ? evt : ((window.event) ? window.event : null);
72if (evt) {
73// equalize W3C/IE models to get event target reference
74var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
75if (elem) {
76try {
77if (elem.selectedIndex > 0) {
78loadXMLDoc(elem.options[elem.selectedIndex].value);
79}
80}
81catch(e) {
82var msg = (typeof e == "string") ? e : ((e.message) ? e.message : "Unknown Error");
83alert("Unable to get XML data:\n" + msg);
84return;
85}
86}
87}
88}
89
90// retrieve text of an XML document element, including
91// elements using namespaces
92function getElementTextNS(prefix, local, parentElem, index) {
93var result = "";
94if (prefix && isIE) {
95// IE/Windows way of handling namespaces
96result = parentElem.getElementsByTagName(prefix + ":" + local)[index];
97} else {
98// the namespace versions of this method
99// (getElementsByTagNameNS()) operate
100// differently in Safari and Mozilla, but both
101// return value with just local name, provided
102// there aren't conflicts with non-namespace element
103// names
104result = parentElem.getElementsByTagName(local)[index];
105}
106if (result) {
107// get text, accounting for possible
108// whitespace (carriage return) text nodes
109if (result.childNodes.length > 1) {
110return result.childNodes[1].nodeValue;
111} else {
112return result.firstChild.nodeValue;
113}
114} else {
115return "n/a";
116}
117}
118
119// empty Topics select list content
120function clearTopicList() {
121var select = document.getElementById("topics");
122while (select.length > 0) {
123select.remove(0);
124}
125}
126
127// add item to select element the less
128// elegant, but compatible way.
129function appendToSelect(select, value, content) {
130var opt;
131opt = document.createElement("option");
132opt.value = value;
133opt.appendChild(content);
134select.appendChild(opt);
135}
136
137// fill Topics select list with items from
138// the current XML document
139function buildTopicList() {
140var select = document.getElementById("topics");
141var items = req.responseXML.getElementsByTagName("item");
142// loop through <item> elements, and add each nested
143// <title> element to Topics select element
144for (var i = 0; i < items.length; i++) {
145appendToSelect(select, i,
146document.createTextNode(getElementTextNS("", "title", items[i], 0)));
147}
148// clear detail display
149document.getElementById("details").innerHTML = "";
150}
151
152// display details retrieved from XML document
153function showDetail(evt) {
154evt = (evt) ? evt : ((window.event) ? window.event : null);
155var item, content, div;
156if (evt) {
157var select = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
158if (select && select.options.length > 1) {
159// copy <content:encoded> element text for
160// the selected item
161item = req.responseXML.getElementsByTagName("item")[select.value];
162content = getElementTextNS("content", "encoded", item, 0);
163div = document.getElementById("details");
164div.innerHTML = "";
165// blast new HTML content into "details" <div>
166div.innerHTML = content;
167}
168}
169}
170</script>
171</head>
172<body>
173<h1>XMLHttpRequest Object Demo</h1>
174<hr/>
175<form>
176<p>Category:<br/>
177<select onchange="loadDoc(event)">
178<option value="">Choose One</option>
179<option value="songs.xml">Top 10 Songs</option>
180<option value="albums.xml">Top 10 Albums</option>
181<option value="newreleases.xml">Top 10 New Releases</option>
182<option value="justadded.xml">Top 10 Just Added</option>
183</select>
184</p>
185<p>Items:<br/>
186<select id="topics" onchange="showDetail(event)" size="10">
187<option value="">Choose a Category First</option>
188</select>
189</p>
190</form>
191<div id="details"><span></span></div>
192</body>
193<html></html></html>