Fundamental AJAX

Introduction to AJAX, XMLHttpRequest Object

An Brief Introduction to AJAX

"Ajax, shorthand for Asynchronous JavaScript and XML, is a web development technique for creating interactive web applications (from wikipedia)."

"AJAX is the new hype in HTML/Javascript, since Google came up with their nifty GMAIL application. AJAX allows to write web-applications without reloading/refreshing the page on user interaction (e.g. posting data to a server-side script). The traditional way of processing HTML forms was to submit them to the server, the server processed the data and sent a response. The drawback of this method is that the page was reloaded in the browser.

With AJAX the browser page is not reloading, but the data is just sent to the server for processing. The server saves the data or calculates something and sends back the answer. The AJAX javascript either displays the answer (page) or does some action depending on the answer (from Captain's Universe)."

AJAX introduction:

AJAX Wikipedia:

AJAX Description from Captain's Universe, i.e., visited on December 1, 2012

Creating XMLHttpRequest Object

The key to AJAX is in the XMLHttpRequest Object, which is used to communicate between JavaScript and the server. In order to use the XMLHttpRequest object, you need to create an instance of the object in an appropriate way. Different browsers use different syntax to create the object, most code will contain these three code segments:

The following code from JavaScript and Ajax for the Web: Visual QuickStart Guide by Tom Negrino and Dori Smith demonstrate an example of creating an AJAX object that works well on most of the modern browsers:

function GetRequestObject()
  var objRequest=null;

  // for Firefox, Opera 8.0+, and Safari: 
  if (window.XMLHttpRequest)
      objRequest=new XMLHttpRequest()
  else if (window.ActiveXObject) // for Microsoft IE: 
      // for IE 6.0+: 
      try {
         objRequest=new ActiveXObject("Msxml2.XMLHTTP");
	 // for IE 5.5+: 
         try {
              objRequest=new ActiveXObject("Microsoft.XMLHTTP");
         catch(e) {}
  return objRequest

Create XMLHttpRequest object:

AJAX book: Tom Negrino and Dori Smith, JavaScript and Ajax for the Web: Visual QuickStart Guide, 7th Edition, Peachpit Press, 2009

Sending an HTTP Request

You can use the XMLHttpRequest object to send an HTTP request to the server. On the server-side, you need to write and run a PHP program to deal with the AJAX request. As you have learned in an ealier lab, there are two methods to send an HTTP request, namely, get and post. The XMLHttpRequest object provides a pair of .open() and .send() functions. The former configures the type of the HTTP request to be send to the server, while the latter actually makes the request. The following link provides a link on detials of sending an HTTP request using an XMLHttpRequest object.

Send a request to a server:

Working with response

After you send an HTTP request to the server, your job is capture responses from the server and using JavaScript DOM operations to display the results. The XMLHttpRequest object provides an attribute .readyState for you to check the state of response. A callback function can be defined to deal with server-side response. That is, you can define a JavaScript function for the onreadystatechange event provided by the XMLHttpRequest object to deal with the response whenever the state of response changes. The results from the server are stored in the .responseText attribute as a string or in the .responseXML as XML data. The following link provides the detail.

Response from the server:

The onreadystatechange event and the callback function:

AJAX PHP Example

The following example will demonstrate how a web page can communicate with a web server while a user type characters in an input field.

AJAX PHP Example

AJAX with MySQL Database

The following link provides an example of using AJAX to retrieve information from a database system.

AJAX with database:

In Lab Exercise Lab Assignment

You created a Person table from lab10 where the table has ID, FirstName and LastName information. The task of this lab assignment is to use AJAX to make the request and display the record with the matching requirement. Name your file lab11_ajax.html

For example, if the user input the letter T, the result should display any records with LastName starts with T.

Hint, SQL LIKE operator is useful for this exercise.

Link your lab11_ajax.html on your index.html. Zero will be given if the files are not linked on your index.html

Zip the following files and name it Submit in URcourses by 11:55 PM

  1. lab11_ajax.html
  2. show_records.php