Brief Overview of AJAX
The paper that started it all: AJAX: A New Approach to Web Applications by Jesse James Garrett.
Create a new XMLHttpRequest Object
var xhr;
if (window.ActiveXObject)
{ xhr = new ActiveXObject ("Microsoft.XMLHTTP"); }
else if (window.XMLHttpRequest)
{ xhr = new XMLHttpRequest (); }
Get and set values using JavaScript
// Get the value of the "name" field and assign it to a variable called name
var name = document.getElementById("name").value;
// Set the values on a form using an array called result
document.getElementById("ssn").value = result[0];
Start an AJAX call
State:
Make an AJAX Request
function callServer() {
// Get city and state from web form
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
// Test the strings against the regular expressions
// Only make the server call if there is data
var reg1 = /\w+/;
if (!reg1.test(city))
{ alert ("Invalid city");
return;
}
if (!reg1.test(state))
{ alert ("Invalid state");
return;
}
// Build the URL to connect to
var url = "/scripts/getZipCode.php?city=" + escape(city) +"&state=" +
escape(state);
// Open a connection to the server
xhr.open ("GET", url, true);
// Setup a function for the server to run when it is done
xhr.onreadystatechange = updatePage;
// Send the request
xhr.send(null);
}
The escape() method is used to escape any characters like spaces that cannot be sent as clear text correctly.
Handle the Server Response
function updatePage() {
if ((xhr.readyState == 4) && (xhr.status == 200))
{ var response = xhr.responseText;
var reg3 = /\S+/;
if (!reg3.test(document.getElementById("zipCode").value))
{ document.getElementById("zipCode").value = response; }
}
}
Simple Ajax Application
We have created a simple AJAX application that illustrates the basic concepts. This application is a Pizza
Ordering Form. There are various inputs in this ordering form, the first of which is the phone number of the
customer. The Pizza Company keeps a database of all the customers who have ordered before. As soon as the
customer types in his / her phone number a call is made to the server to search the database for that phone number
and extract all the relevant information on that client. The returned information is then used to auto fill the form.
Here is the table that has been created in the database:
Customers
Phone Last Name First Name Street City State Zip
407-896-0001 Mouse Mickey 123 Cheddar St. Orlando FL 32801
407-896-0002 Duck Donald 387 Eider Dn. Orlando FL 32801
407-896-0003 Mouse Minnie 482 Brie Ln. Orlando FL 32801
Below is the Pizza Ordering Form. The JavaScript code that forms the core of the AJAX application and the PHP
code to extract data from the database are neither robust nor secure. We have taken the happy path in this example
to illustrate how AJAX works and not clutter the application with error handling code.
pizza.html
Real Life Use of AJAX
Google Maps
Google Suggest
Yahoo Maps
References
Mastering AJAX: Part 1: Introduction to AJAX by Brett McLaughlin.
Mastering AJAX: Part 2: Make Asynchronous requests with JavaScript and AJAX by Brett McLaughlin.
Mastering AJAX: Part 3: Advanced Requests and Responses in AJAX by Brett McLaughlin.
Mastering AJAX: Part 4: Exploiting DOM for Web Response by Brett McLaughlin.
Mastering AJAX: Part 5: Manipulate the DOM by Brett McLaughlin.
Mastering AJAX: Part 6: Build DOM-based Web Applications by Brett McLaughlin.
Mastering AJAX: Part 7: Using XML in Requests and Responses by Brett McLaughlin.
Mastering AJAX: Part 8: Using XML in Requests and Responses by Brett McLaughlin.