melbourne chapter

There is a lot of buzz going around RIA and Web2.0 these days, and at the heart for HTML this involves AJAX. We use AJAX as a way to make a request via JavaScript and return a response from the server, which can be Text or XML.

The fundamental object we use in AJAX to perform this functionality is the XMLHttpRequest class. This class allows us to create a HTTP request and receive a response from the server. The object as itself is quite basic, and allows you to inject in header variables, such as POST vars, and return back a string or XML (DOM Compliant object) response.

I thought I would quickly provide a quick outline of making a request using this object, that I can build examples off in the future, and hopefully discuss a JavaScript framework I wrote around it to handle calls and relaying the responses to appropriate functions.

Creating XMLHttpRequest Objects

There are a few different way for us to create an XMLHttpRequest object, between IE and Mozilla style browsers. The most effective way to create a XMLHttpRequest would be to create a factory method that returns our XMLHttpRequest object depending on the browsers support. Our method would return NULL if our browser isn’t capable of performing the functionality.

function createXMLHttpRequest() {
  if(window.XMLHttpRequest) {
    try { 
      xmlHttpRequest = new XMLHttpRequest();
    } catch(e) { return null; }
  } else if(window.ActiveXObject) {
    try {
      xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
      try {
        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) { return null; }
    }
  } else return null;
  return xmlHttpRequest;
}
 

Creating a request

We can now create XMLHttpRequests and instruct them how to perform. Here is an example to make a request using our XMLHttpRequest object:

  xmlHttpRequest = createXMLHttpRequest();
  if( xmlHttpRequest  == null) alert("No XMLHttpRequest available");

  // Make the call
  xmlHttpRequest.open("GET", "http://localhost/myscript/?do=whatever", true);
 
  // Associate the ready state change
  xmlHttpRequest.onreadystatechange = function() { alert("We have a changed state!"); }

  try {
    // Send the Method Data
    xmlHttpRequest.send(null);
  } catch(e) { alert("Send  failed"); }
 

When we create the XMLHttpRequest object and use the send() function we need to specify a “onreadstatechange� function that gets called when the XMLHttpRequest object changes state.

The XMLHttpRequest object has several different properties we can access to retrieve our response.

readyState - Object Status INT

responseText - Response as a String

responseXML - DOM Compatible document object from response

status - HTTP Response Codes (200, 404 etc)

statusText - HTTP Response Code Text

Throughout a request lifecycle of the XMLHttpRequest object, it rotates through the following states:

0: “uninitialized”
1: “loading”
2: “loaded”
3: “interactive”
4: “complete”

We can access the response once the state of the XMLHttpRequest object has reached state “4�.

Changing our above example, we can incorporate the XMLHttpRequest properties to determine our result:

xmlHttpRequest.onreadystatechange = function() { 
  try {
    if(xmlHttpRequest.readyState == 4) {
      if(xmlHttpRequest .status == 200) {
        // We have a successful HTTP request with data
        alert("we received:" + xmlHttpRequest.responseText);
      } else {
        // We have an error
        alert("our call failed:" + xmlHttpRequest.status + " " + xmlHttpRequest.statusText);
      }
    }
  } catch(e) { alert("Unable to determine the state of the call");
}

Security

It is also worth noting that due to JavaScript sandboxing issues, it is necessary to:

a) Check from a HTTP: protocol, not a FILE:

b) Only access the information from the same domain, don’t make a call to a different domain.

Where to from here?

Overall this gives us a very basic framework that we can wrapper and write our own functions around. We can extend the base xmlHttpRequest object to handle functionality such as implementing

• Event Listeners

• Timeouts/Abort

In the near future I will post an article with an example of making a request and handling a response.