3 Major Technology Elements of AJAX
- 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.============ END CODE SAMPLE ============
var map = new GMap(document.getElementById("map"));
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:
// <marker lat="37.441" lng="-122.141"/>
// <marker lat="37.322" lng="-121.213"/>
// 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.
for (var i = 0; i < markers.length; i++)
// D)CREATE NEW GOOGLE MARKERS FROM LONGITUDE
// and LATITUDE VALUES
var point = new GPoint(
var marker = new GMarker(point);