Implementing XMLHttpRequest object with different browsers.
This function (Daire et al 2006)
Code: Select all
function createXmlHttpRequestObject() // creates a XMLHttpRequest nstance
{
// will store the reference to the XMLHttpRequest object
var xmlHttp;
// this should work for all browsers except IE6 and older
try
{
// try to create XMLHttpRequest object
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
// assume IE6 or older
var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP");
// try every prog id until one works
for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++)
{
try
{
// try to create XMLHttpRequest object
xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
}
catch (e) {}
}
}
// return the created object or display an error message
if (!xmlHttp)
alert("Error creating the XMLHttpRequest object.");
else
return xmlHttp;
}
Loss of scope and this
For more information on the following section and code example, see (Ernisse). Some of the chapters in that book can be downloaded free as a sample. The code that follows and a more thorough explanation is given in the sample chapters.
Ordinarily the this keyword is a reserved word in object oriented languages and indicates a reference to the running or the current object. It is a convenient way to refer to "the object that is executing this code." But this has one small problem-its meaning changes when it's called from outside the object. This is the result of something called execution context. All of the code inside the object runs in the same executing context, but code that's run from other objects - such as event handlers (Yank & Cameron) - runs in the calling object's execution context. What this means is that when you're writing object-oriented JavaScript, you won't be able to use the this keyword to refer to the object in code for event handlers. The problem is called loss of scope.
Here is a code example that shows the problem:
Code: Select all
function ScopeTest() {
this.message = 'Greetings from ScopeTest!';
this.doTest = function () {
//This will only work in FireFox, Opera and Safari
this.req = new XMLHttpRequest();
this.req.open('GET', '/index.html', true);
var self = this;
this.req.onreadystatechange = function() {
if (self.req.readyState ==4) {
var result = 'self.message is ' + self.message;
resul += '\n';
result += 'this.message is ' + this.message;
alert(result);
}
}
this.req.send(null);
};
}
var test = new ScopeTest();
test.doTest();
self.message is Greeting from Scopetest!
this.message is undefined.
If you do not understand that, I urge you to download the sample chapters from the book by Eernisse or buy the whole book that comes with complete code that can be seamlessly integrated into your own code. The book by Yank & Adams has an own chapter on AJAX and explains event handlers, event listeners and DOM building in great way.
References:
Cristian Darie, Bogdan Brinzarea, Filip Chereches-Tosa and Mihai Bucica (2006) : "AJAX and PHP: Building Responsive Web Applications" PACKT Publishing
Matthew Eernisse (latest edition) "Build Your Own AJAX Web Applications" Sitepoint Book
Kevin Yank & Cameron Adams (latest edition): "Simply JavaScript" Sitepoint book.
Links:
The XMLHttpRequest Object
Mozilla developer center Category AJAX