Introduction to AJAX, XMLHttpRequest Object and JSON

An Brief Introduction to AJAX

"AJAX, shorthand for Asynchronous JavaScript and XML, is a web development technique for creating interactive web applications. AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. It means to update parts of a web page, without reloading the whole page. An example of AJAX is Google Maps, in which new sections of a map are downloaded from the server when needed, without requiring a page refresh." Nixon, Robin. Learning PHP, MySQL & JavaScript, O'Reilly Media, 2015.

"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." https://en.wikipedia.org/wiki/Ajax_(programming)

AJAX introduction: https://www.w3schools.com/xml/ajax_intro.asp

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: 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 .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: http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

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: https://www.w3schools.com/xml/ajax_xmlhttprequest_response.asp

The onreadystatechange event and the callback function: https://www.w3schools.com/xml/ajax_xmlhttprequest_response.asp

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 https://www.w3schools.com/php/php_ajax_php.asp

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)


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.

What is JSON?

JSON stands for JavaScript Object Notation. It provides a structured way of storing and exchanging data. JSON supports various of data types such as string, number, boolean, array, null type and object.

JSON tutorial: http://www.w3schools.com/js/js_json_js_intro.asp

JSON syntax: http://www.w3schools.com/js/js_json_syntax.asp

Producing JSON in PHP

JSON Encoding in PHP5.5: http://php.net/manual/en/function.json-encode.php

Parsing JSON in PHP

JSON Decoding in PHP5.5: http://php.net/manual/en/function.json-decode.php

JavaScript Timing

JavaScript Timing Events allows execution of code at specified time intervals.

These time intervals are called timing events. The two key methods to use with JavaScript are:
setTimeout(function, milliseconds)
Executes a function, after waiting a specified number of milliseconds.
setInterval(function, milliseconds)
Same as setTimeout(), but repeats the execution of the function continuously.


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. You need to use server-side processing to produce JSON output and client-side processing to parse this data type. Name your file ajax.html

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

DOM Properties and Methods. https://www.w3schools.com/jsref/dom_obj_document.asp

Hint, SQL LIKE operator is useful for this exercise.


Link your ajax.html on the index.html.

Zip the following files and submit in URcourses by 11:55 P.M.

  1. ajax.html
  2. display.php