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."

"With Ajax, Web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows for Web pages, and by extension Web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly substitute JSON for XML due to the advantages of being native to JavaScript. Ajax is not a single technology, but rather a group of technologies. HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display, and allow the user to interact with the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads."

AJAX introduction:

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.

With Firefox, Opera 8.0+, and Safari

var xmlHttp=new XMLHttpRequest();

Create XMLHttpRequest object:

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: (Useful for the lab assignment)

In Lab Exercise Lab Assignment

You created a user table from lab10 where the table has all user information. The task of this lab assignment is using AJAX to make the request and display the records with the matching requirement. Name your file lab11_ajax.html

For example, if the user input the letter c, the result should display any records with all username starts with the letter c.

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