Use JavaScript to implement XMLHttpRequest, test through on Ie,firefox!

Javascript|request|xml|xmlhttprequest

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

  "http://www.w3.org/tr/xhtml1/DTD/ XHTML1-TRANSITIONAL.DTD



< 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.
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 elements, and add each nested
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 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.innerhtml = content;
}
}
}

xmlhttprequest Object demo

category:

choose onetop songstop albumstop New releasestop Just added

items:

choose a Category first