1. ISC440: Web Programming 2 AJAX
Dr. Abdullah Almutairi
Spring 2016
© 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2. AJAX Introduction
AJAX is about updating parts of a web page, without reloading the whole page.
AJAX = Asynchronous JavaScript and XML.
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes.
Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.
Examples of applications using AJAX: Google Maps, Gmail, YouTube, and Facebook.

3. How AJAX Works

4. XMLHttpRequest object
All modern browsers support the XMLHttpRequest object.
The XMLHttpRequest object is used to exchange data with a server behind the scenes.
Create an XMLHttpRequest Object
All modern browsers (Chrome, IE7+, Firefox, Safari, and Opera) have a built-in XMLHttpRequest object.
Syntax for creating an XMLHttpRequest object:
Old versions of Internet Explorer (IE5 and IE6) use an ActiveX Object:
To handle all browsers, including IE5 and IE6, check if the browser supports the XMLHttpRequest object. If it does, create an XMLHttpRequest object, if not, create an ActiveXObject

5. onreadystatechange property
Before we think about sending data to the server, we must first write a function that will be able to receive information.
This function will be used to catch the data that is returned by the server.
The XMLHttpRequest object has a special property called onreadystatechange.
onreadystatechange stores the function that will process the response from the server. 
Below we created an XMLHttpRequest object called ajaxRequest. We want it to call a function when it receives information from the server.
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function() {
// We still need to write some code here }

6. onreadystatechange property
This property, onreadystatechange, stores a function. Every time the "ready state" changes this function will be executed.
Readystate Property:
The XMLHttpRequest object has another property called readyState.
This is where the status of our server's response is stored.
The response can be processing, downloading or completed.
Each time the readyState changes then our onreadystatechange function executes.
We want to know when the server response is completed.
When the property readyState equals 4 that means the response is complete and we can get our data.

7. ReadyState Property

8. Send a Request To a Server
Now that our onreadystatechange property has a proper response-handling function, we can send our request.
Sending a request is comprised of two steps:
Specify the URL of server-side script that will be used in our Ajax application.
Use the send function to send off the request.
We can access the property that stores the server's response, responseText.

9. Send a Request To a Server
To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object:
ajaxRequest.open(“GET”, “serverTime.php, true);
ajaxRequest.send(null);

10. Complete AJAX Code
We want the response of the server to be displayed in the “time” text field in the HTML form “myForm”.

11. How to Run the AJAX Code
The onChange attribute in HTML is used to run the ajax code when the value of the field “username” changes.
ajaxFunction is our ajax code in javascript.

12. Example

13. Response from the Server Code

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

15. AJAX PHP Example
In the example below, when a user types a character in the input field, a function called "showHint()" is executed.
The function is triggered by the onkeyup event.

16. HTML Code

17. HTML Code Explanation Code explanation:
First, check if the input field is empty (str.length == 0). If it is, clear the content of the txtHint placeholder and exit the function.
However, if the input field is not empty, do the following:
Create an XMLHttpRequest object
Create the function to be executed when the server response is ready
Send the request off to a PHP file (gethint.php) on the server
Notice that q parameter is added gethint.php?q="+str
The str variable holds the content of the input field

18. The PHP File - "gethint.php"
The PHP file checks an array of names, and returns the corresponding name(s) to the browser:

19. AJAX Database Example
AJAX can be used for interactive communication with a database.

20. AJAX Database Example- Form

21. PHP Database Access Script