Basic Ajax Syntax
Snippet Menu
26
Thu. Oct. 5th, 2006 8:12 PM
The basic framework of an Ajax-enabled web page. The following JavaScript shows how to send a request for an XML file and how to receive that request. Of course, in a real life scenario, you'll have to implement better error trapping and actually do something with the XML that gets returned.
/* -- Function to "handle" the response -- */
function myHandler() {
/* -- Was the request successful? -- */
if (this.readyState == 4 && this.status == 200) {
/* -- Did the request return a result? -- */
if (this.responseXML != null && this.responseXML.getElementById("stuff").firstChild.data) {
doSomething(this.responseXML.getElementById("stuff").firstChild.data);
}
}
}
var myRequest; // Variable to hold request object
if (window.XMLHttpRequest) {
myRequest = new XMLHttpRequest(); // Standards-compliant browsers
} else if (window.ActiveXObject) {
myRequest = new ActiveXObject("Msxml2.XMLHTTP"); // For IE
}
myRequest.onreadystatechange = myHandler;
/* -- "getStuff.php" can be anything that returns an XML file -- */
myRequest.open("GET", "getStuff.php", true);
Comments
Voting
Votes Up
Votes Down
// A way to use XML in a JavaScript class, so as not to pollute the global namespace
var classUsingXML = function () {
// First, keep track of live instances: get the next instance in the array
this.instance = classUsingXML.instances.length;
//and set the array entry to ourselves
classUsingXML.instances[this.instance]=this;
/* Why do we do this?
In the event of needing to use a member function in a setTimeout,
for example, we can refer to ourselves as:
setTimeout("classUsingXML.instances["+this.instance+"]()",5000);
Yes. I know it's a dirty kludge. You only need it if your script is going to
be making periodic updates.
In the event we need to use a callback from an HTML tag (such as onClick),
we would do it like this:
tag.objXML=this;
if (tag.attachEvent)
tag.attachEvent('onclick',this.handler); //MS
else if (tag.addEventHandler)
tag.addEventHandler('click',this.handler,false); //W3C
else
tag.onclick=this.handler; //DOM 0
...
this.handler = function(e) {
if (window.event) {
e=window.event;
objXML = e.srcElement.objXML;
}else
objXML = this.objXML;
objXML.functionInClass();
}
*/
//Try it in W3C
if (window.XMLHttpRequest)
this.request = new XMLHttpRequest();
//No? How about Microsoft?
else if (window.ActiveXObject)
this.request = new ActiveXObject("Msxml2.XMLHTTP");
else {
//No XML. Do something about it.
}
this.request.onreadystatechange = function () {
//this currently refers to the XMLHttpRequest object
if (this.readyState == 4)
//we're ready
if (this.responseXML != null)
//It didn't return a blank doc, right?
if (this.status == 400) {
//If we got a '400 OK', do stuff with the result, for example:
var myXMLTag = this.responseXML.getElementById("stuff");
if (myXMLTag.firstChild.data)
document.getElementById("stuffTarget").innerHTML=myXMLTag.firstChild.data;
}else{
//We got an HTTP error. Do something about it.
}
else {
//A different error; we got a blank document
}
//No else here; it's just not ready.
}
this.update = function () {
try {
this.request.open("GET", "myXMLDoc.xml", true);
}
catch (e) {
/* The browser's not letting you do this. Why?
Chances are, you're trying to run this from your
local drive. For some reason, that's not allowed. */
}
}
}
classUsingXML.instances = Array();
// Instantiate the class...
var myXML = new classUsingXML();
// And update your XML
myXML.update();