Using JavaScript to implement XMLHttpRequest

Javascript|request|xml|xmlhttprequest

XMLHttp way to implement the brushless screen, tested on the Ie,firefox

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd" >
<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 is 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 the "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 the 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>
<body>

<form>
<p>category:<br/>
<select >
<option value= "" >choose one</option>
<option value= "Songs.xml" >top songs</option>
<option value= "Albums.xml" >top albums</option>
<option value= "Newreleases.xml" >top New releases</option>
<option value= "Justadded.xml" >top Just added</option>
</select>
</p>
<p>items:<br/>
<select size= "Ten" id= "topics" >
<option value= "" >choose a Category first</option>
</select>
</p>
</form>
<div id= "Details" ><span></span></div>
</body>