Sunday, February 19, 2006

Geeks Only - AJAX - Can it clean my code ??


There has been alot of buzz during the past year regarding a web development technology named AJAX, which is short for Asynchronous Javascript and XML. Google has popularized this technology with their breakthrough mapping web site Google Maps - which allows users to "grab" their maps and scroll them interactively on the web browser without forcing the browser to refresh or to visibly submit requests back to the server as in traditional browser scenarios (i.e. Yahoo Maps).

This is achieved by using client-side JavaScript to send asynchronous remote procedure calls and then parsing the results (usually XML-based results) which are used to perform logic or to render in some fashion on the browser. This type of functionality was usually the domain of “server-side” web code where developers were required to utilize XML libraries consisting of XML Parsers, XML DOM objects, XSLT/XPATH objects and also some form of data access or web services integration. All these facilities are now available from client-side JavaScript when using AJAX.

3 Major Technology Elements of AJAX
  • Javascript – the scripting language used to implement AJAX functionality
  • XMLHttpRequest – XML RPC object used to send asynchronous remote procedure calls
  • XML DOM - XML Document Object Model objects used to encapsulate and parse XML.

Now lets not get things twisted, AJAX is not some hot new technology that some geekoid deep in Google's basement just invented; rather it's a nexus of maturing technologies that come together very well when trying to overcome the traditional deficiencies with implementing rich, interactive web user interfaces. I've previously implemented AJAX-like functionality using Microsoft's Remote Scripting roughly 5 years ago (around 2000-2001) and not too many programmers had a clue on what it was and how it worked; actually - at the risk of getting you Java and LAMP coders pissed off - Microsoft was also central to the birth of the XMLHttpRequest object ... but I digress...

Let's look at a Google Maps coding sample below to get an idea of a real-world AJAX implementation. Pay special attention to the AJAX relevant code in dark red. This example provided by the Google Maps API Documentation is used to (A) download a series of longitude and latitude coordinates from an XML file. These coordinates are (B) loaded into an XML DOM object then (C) parsed out to (D) dynamically create the Google Markers which are then rendered on the map.

============ BEGIN CODE SAMPLE ============
// Center the map on Palo Alto.
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

// Download the data in data.xml and load it on the map.
// The format we
expect is:
// <markers>
// <marker lat="37.441" lng="-122.141"/>
// <marker lat="37.322" lng="-121.213"/>
// </markers>

// CREATES XMLHttpRequest object
var request = GXmlHttp.create();

// A) INVOKES HTTP GET REQUEST TO RETRIEVE XML
request.open('GET', 'data.xml', true);
request.onreadystatechange = function()
{
if (request.readyState == 4)
{
// B) LOAD UP XML RESULTS IN XML DOM OBJECT
var xmlDoc = request.responseXML;

// C)PARSE XML AND RETRIEVE MARKER VALUES
// INTO ARRAY OF XML NODES

var markers = xmlDoc.documentElement.
getElementsByTagName("marker");


for (var i = 0; i < markers.length; i++)
{
// D)CREATE NEW GOOGLE MARKERS FROM LONGITUDE
// and LATITUDE VALUES

var point = new GPoint(
parseFloat(markers[i].getAttribute("lng")),

parseFloat(markers[i].getAttribute("lat")));
var marker = new GMarker(point);
map.addOverlay(marker);
}
}
}

request.send(null);
============ END CODE SAMPLE ============

To summarize, AJAX is a set of maturing software technologies primarily based on JavaScript and XML, when used together, provides the web developer with a powerful toolset to create rich and interactive web browser applications and user interfaces.

Resources:

No comments: