DevPaper.NET

I have decided that since a big portion of my time is programming AJAX-driven web pages, my first real blog here on DevPaper should be about the XMLHttpRequest object in JavaScript.

Background

For those of you unfamiliar with AJAX technology, the whole idea is that users can navigate portions of your website without ever seeing that annoying flicker, which we have all become accustomed to seeing when part of a page needs to load. This doesn’t necessarily mean that the entire site can look the same, but it really helps users to see a more clean-cut website. I’ll write up another blog at a later time, which will explain the theory behind AJAX and Web 2.0 (before I get flamed for that statement, please not that I am not claiming AJAX to be Web 2.0)

Browser Compatibility

The XMLHttpRequest object is technically compatible across browsers, but only to an extent. Since the two major browsers of our time are Internet Explorer (6-7) and FireFox, I will only focus on how to ensure your object is created for these. Consider the following code:

  varxmlHTTP;
  try
  {
    xmlHTTP=new XMLHttpRequest();
  }
  catch(e)
  {
    xmlHTTP=newActiveXObject("Microsoft.XMLHTTP");
  }

This might not make much sense to younger developers, but it’s actually a very simple code.

This actually ensures that your object will be created for both IE 6-7 and FireFox 2. I will admit that I am not sure if it works in FireFox 3 as of yet, but once I have a chance to test it (or if someone else would be nice enough to chime in), I will report back.

In Internet Explorer 6, the actual XMLHttpRequest object does not exist, but Microsoft has been kind enough as to supply us with a nifty little object named Microsoft.XMLHTTP! It works exactly the same as the XMLHttpRequest object, but it’s just a little more annoying to remember how it’s declared.

Microsoft decided in Internet Explorer 7 to help developers a little bit by just creating the object under the same name as FireFox 2, XMLHttpRequest. If you try to create a new ActiveXObject in FireFox, you will get an error; thus why we use our try/catch block.

Getting Some Data

Well now that we understand how to create the actual object, how do we get some information from it?

Before I answer that question, I want to take a quick sidebar and let you know that there is a bit of security in place with the XMLHttpRequest object. This bit of security prevents you from accessing any page, which is not in your website’s domain. Since I am DevPaper.Net, I cannot access Yahoo!’s homepage and display the bits for you, which I’d like to. There are ways around this with server-side scripts, but that’s another topic for another day!

Here’s a very quick bit of code, which I have created to just pull the data from a random page on a local site and display its contents:

  function AJAXFunction()
  {
    var xmlHTTP;
    try
    {
      xmlHTTP = new XMLHttpRequest();
    }
    catch(e)
    {
      xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlHTTP.open("GET", "backend.htm", false);
    xmlHTTP.send(null);
    xmlHTTP.onreadystatechange=new function()
      {
        if(xmlHTTP.readyState == 4 && xmlHTTP.status == 200)
        {
          alert(xmlHTTP.responseText);
        }
       }
  }

Seem easy? Let’s break it down.

First, we have that ever-so popular object declaration:

  try
  {
    xmlHTTP = new XMLHttpRequest();
  }
  catch(e)
  {
    xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");
  }

This next line tells our object to open up a file we have named backend.htm:

  xmlHTTP.open("GET", "backend.htm", false);

The parameters are ([GET/POST], [Relative URL], [Synchronous Communication]) Don’t worry about the Synchronous communication, because it creates more of a headache than it’s worth at this point. In Part 2, I am planning on explaining about this and why it’s complicated. For the time being, just use false.

The next bit of code sends a value to the server so that we can get a response:

  xmlHTTP.send(null);

If you are only targeting IE browsers, you can keep the value blank, but for FireFox, you are actually required to at least put null in there. Trust me, I have scratched my head for hours trying to figure out why it didn’t work in FireFox and finally discovered that it was just all a matter of sending null.

This last bit is the fun part! This is the actual “Meat and Potatos” of your efforts:

  xmlHTTP.onreadystatechange=new function()
  {
    if(xmlHTTP.readyState == 4 && xmlHTTP.status == 200)
    {
      alert(xmlHTTP.responseText);
    }
  }

I won’t really get into detail of why we use the values we do, but I will mention that onreadystatechange requires a function value. Consider it a variable. You could also create an actual function and reuse it, so this can basically be considered yet another variable. ConclusionThat wasn’t too hard, was it? The object isn’t too difficult to understand and it is probably the main object you will learn to hate when you’re dealing with AJAX.

As I mentioned in my previous post, I am not preaching AJAX from a Microsoft standpoint, because I’m not familiar with the tools and I really like learning things from the ground-up.

~Derek Torrence