使用 JavaScript 实现 XMLHttpRequest,在IE,FireFox 上测试通过
XMLHttp 方式实现无刷屏,在IE,FireFox 上测试通过
<!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);
}
}
}
// 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>
