An Brief Introduction to AJAX
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
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.
provide a method for exchanging data asynchronously between browser and server to
avoid full page reloads."
Creating XMLHttpRequest Object
The key to AJAX is in the XMLHttpRequest Object, which is used to communicate
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: https://www.w3schools.com/xml/ajax_xmlhttprequest_create.asp
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
.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
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:
http://www.w3schools.com/php/php_ajax_database.asp (Useful for the lab assignment)
AJAX with JSON
In the previous lab, you worked on AJAX with plain text. As a matter of fact, you can deal with AJAX data with various formats such as plain text, XML and JSON. Since many applications use JSON as data transferring structure, this lab introduces basics of JSON, producing JSON data in PHP and parsing JSON data in PHP.
These time intervals are called timing events.
Executes a function, after waiting a specified number of milliseconds.
Same as setTimeout(), but repeats the execution of the function continuously.
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. You need to use server-side processing to produce JSON output
and client-side processing to parse this data type. Name your file
For example, if the user input the letter c, the result should display any records
with all email starts with the letter c.
Hint, SQL LIKE operator is useful for this exercise.
Link your ajax_lab.html on the index.html.
Zip the following files and submit in URcourses by 11:55 P.M.