A Simple AJAX Example: Searching Australian Postcodes (with JQuery)

Lately I have been writing dashlets for the SugarCRM open source CRM solution. It uses JQuery as part of its JavaScript libraries.

I have really been enjoying writing JavaScript with JQuery; it has saved me time writing concise code which also helps me debug and maintain it. So I thought it would be a good idea to rewrite my Ajax example with JQuery to compare its usefulness.

In my previous code I had to first create the XMLHttpRequest object:

var xmlHttpReq;   

// Determining which browser we are dealing with 
if (window.XMLHttpRequest)
{
   xmlHttpReq = new XMLHttpRequest();
   xmlHttpReq.overrideMimeType('text/plain');
}
else if (window.ActiveXObject)
{
   // this is required if the browser is IE
   xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}

Then I had to prepare the query string and post to the script that would get the me the details:

// generate the query string to post to the script
var queryStr = 'PostCode=' + escape(postcode);

var strURL = 'postcode_lookup.php';

xmlHttpReq.open('GET', strURL, true);
xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttpReq.onreadystatechange = displayPostcode;

// post to script
xmlHttpReq.send(queryStr);

That is too much work! With JQuery things are much easier:

$.get("postcode_lookup.php",
      { PostCode: jQuery('input[@name=PostCode]')[0].value },
      function(data)
      {
         /* Logic to parse data and determine output goes here */

         // Writing output into div
         $("#outputDiv").html(output);
      }
);

That’s it! All it takes is one function to make the Ajax call and then parse the data from the script.

The jQuery.get( url, [data], [callback], [type] ) function takes four parameters. But we are only using three as the last one is optional:
1. The script: postcode_lookup.php.
2. The parameters for the script contained in an array. In this case the value of the text field:
{ PostCode: jQuery(‘input[@name=PostCode]‘)[0].value }
3. The callback function to handle the data returned from the script.

I am quite happy for the amount of work that it has saved me. However I cannot emphasize enough how important it is to understand how the XMLHttpRequest works.

You can find the working example here.

A Simple AJAX Example: Searching Australian Postcodes

I have been trying out AJAX tools such as the YUI to make web applications more responsive. Reminding myself that AJAX stands for Asynchronous JavaScript and XML, I thought I’d try to understand better then asynchronous side of it.

The xmlHttpReq object is responsible for the responsiveness of an AJAX application. It allows the JavaScript to make asynchronous HTTP request (POST or GET) to a script. The same xmlHttpReq object handles the output of the script through a callback function.

The example that I wrote is an Australian postcode lookup. Basically, the user enters a postcode which is then posted by the xmlHttpReq object to a PHP script. The script returns comma delimited details of the postcode, which is processed by the callback function, and displayed nicely to the user.

Click here to see working example.