Implementing XMLHttpRequest object with different browsers.

Post Reply
KBleivik
Site Admin
Posts: 88
Joined: Tue Jan 31, 2006 3:10 pm
Location: Moss Norway
Contact:

Implementing XMLHttpRequest object with different browsers.

Post by KBleivik »

The is the heart of AJAX. The XMLHttpRequest Object specification defines an API that provides scripted client functionality for transferring data between a client and a server.

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;
}
can be used to create the XMLHttpRequest object with most browsers that support JavaScript.

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();
It should not be difficult for those who know the XMLHttpRequest object and JavaScript to understand this code. Not the line var self = this;. If you have not figured out how the code function yet, it will output an alert message box with the following two lines:

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
Kjell Gunnar Bleivik
Make it simple, as simple as possible but no simpler: | DigitalPunkt.no |

Post Reply