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:
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 username_lab11.zip. Submit in URcourses by 11:55 PM