1. Interactive Web Application with AJAX
21-Apr-17
[Title of the course]
Interactive Web Application with AJAX
Copyright © SUPINFO. All rights reserved
Copyright © NameOfTheOrganization. All rights reserved.

2. Course objectives By completing this course, you will be able to:
21-Apr-17
Interactive Web Application with AJAX
[Title of the course]
Course objectives
By completing this course, you will be able to:
Define what is AJAX.
Using AJAX for better user experience.
Copyright © NameOfTheOrganization. All rights reserved.

3. Course topics Course’s plan: What is AJAX ? XMLHttpRequest
21-Apr-17
Interactive Web Application with AJAX
[Title of the course]
Course topics
Course’s plan:
What is AJAX ?
XMLHttpRequest
Use AJAX with JQuery
Copyright © NameOfTheOrganization. All rights reserved.

4. What is AJAX ? Interactive Web Application with AJAX 21-Apr-17
[Title of the course]
Interactive Web Application with AJAX
What is AJAX ?
Copyright © NameOfTheOrganization. All rights reserved.

5. Preview These are the chapters that we will approach: Presentation.
21-Apr-17
What is AJAX ?
[Title of the course]
Preview
These are the chapters that we will approach:
Presentation.
Synchronous VS Asynchronous.
History.
Usage examples.
Disadvantages.
Copyright © NameOfTheOrganization. All rights reserved.

6. A J A X synchronous avascript nd ML Presentation
21-Apr-17
What is AJAX ?
[Title of the course]
Presentation A
synchronous J
avascript A nd X ML
AJAX signification is Asynchronous Javascript and XML, it's an acronym to talk about XMLHttpRequest object . AJAX is not a new technology, it's a development method.
AJAX is not a new language or technology. It's a development method.
Copyright © NameOfTheOrganization. All rights reserved.

7. Presentation Client side method to create interactive Web Apps.
21-Apr-17
What is AJAX ?
[Title of the course]
Presentation
Client side method to create interactive Web Apps.
Retrieve data from server asynchronously without interfering with the display of the existing page.
Initially developed to return XML data
But now use to return XHTML, JSON, etc…
XMLHttpRequest object allows data interactions using HTTP request (also GET, POST and HEAD. PUT and DELETE too but they don't work on every browsers). Is goal is to retrieve XML data and others markup language like (X)HTML. But now we can retrieve much data type (JSON, …).
This is a very famous object because it allow interactive websites creation. There is many utilizations, for example : auto-completion, auto-save, area reloading without frames.
But AJAX as a few disadvantages, for examples bookmarks, links, navigation history... In more, web referencing can't be made.
Copyright © NameOfTheOrganization. All rights reserved.

8. Synchronous VS Asynchronous
21-Apr-17
What is AJAX ?
[Title of the course]
Synchronous VS Asynchronous
Synchronous: Web browser sends a request to the server, waits a response and full reloads the page.
Client Side
User Activity
User Activity
User Activity
HTTP Request
HTTP Response
HTTP Request
HTTP Response
Server Side
Data processing
Data processing
Copyright © NameOfTheOrganization. All rights reserved.

9. Synchronous VS Asynchronous
21-Apr-17
What is AJAX ?
[Title of the course]
Synchronous VS Asynchronous
Asynchronous: Web browser doesn't wait and launch in background task.
Client Side
User Activity
User Interface
Data processing
Ajax Engine
Server Side
Data processing
Data processing
Copyright © NameOfTheOrganization. All rights reserved.

10. Synchronous VS Asynchronous
21-Apr-17
What is AJAX ?
[Title of the course]
Synchronous VS Asynchronous
The Geek & Poke explanation :
Copyright © NameOfTheOrganization. All rights reserved.

11. 21-Apr-17
What is AJAX ?
[Title of the course]
History
In the 1990s, most web sites were based on complete HTML pages.
Each user action required that the page be reloaded.
Bad user experience :
All page content disappears then reappears even for a partial change.
Use expensive resources :
Use excessive bandwidth to reload the entire page.
Copyright © NameOfTheOrganization. All rights reserved.

12. History In 1995, Sun Microsystems introduced Java applets
21-Apr-17
What is AJAX ?
[Title of the course]
History
In 1995, Sun Microsystems introduced Java applets
First to make possible asynchronous loading of content.
In 1996, Microsoft introduced the iframe element to HTML which also enabled asynchronous loading.
In 1999, Microsoft created the XMLHTTP ActiveX control in Internet Explorer 5.
XMLHttpRequest component added to ECMAScript standard.
Copyright © NameOfTheOrganization. All rights reserved.

13. Ajax : A New Approach to Web Applications.
21-Apr-17
What is AJAX ?
[Title of the course]
History
Mozilla implements it in May 2002.
Safari in 2004, Konqueror and Opera 8.0 in 2005.
The term Ajax was coined in 2005 by Jesse James Garrett in an article entitled :
Ajax : A New Approach to Web Applications.
In 2006 the W3C released the first draft specification for the XMLHttpRequest object.
Copyright © NameOfTheOrganization. All rights reserved.

14. Usage examples Auto completion of input field. Instantly auto-save.
21-Apr-17
What is AJAX ?
[Title of the course]
Usage examples
Auto completion of input field.
Instantly auto-save.
Site part reloading.
See Google Mail, Google Map, Outlook Web Access, …
Copyright © NameOfTheOrganization. All rights reserved.

15. Disadvantages Basic Web Features problems :
21-Apr-17
What is AJAX ?
[Title of the course]
Disadvantages
Basic Web Features problems :
Previous, Next and Refresh buttons.
Bookmarks.
Referencing problem !
Doesn’t work on Web Browser with JavaScript disabled.
Resource-expensive if misused.
Copyright © NameOfTheOrganization. All rights reserved.

16. Do you have any questions ?
21-Apr-17
What is AJAX ?
[Title of the course]
Stop-and-think
Do you have any questions ?
Copyright © NameOfTheOrganization. All rights reserved.

17. XMLHttpRequest Interactive Web Application with AJAX 21-Apr-17
[Title of the course]
Interactive Web Application with AJAX
XMLHttpRequest
Copyright © NameOfTheOrganization. All rights reserved.

18. XMLHttpRequest Object
21-Apr-17
XMLHttpRequest
[Title of the course]
XMLHttpRequest Object
To use AJAX you need to use a XMLHttpRequest JavaScript object.
Represent an AJAX request !
Work on all modern Web Browsers :
So for IE 6, you need to use an ActiveXObject object.
var xhr = new XMLHttpRequest();
var xhr = new ActiveXObject('MSXML2.XMLHTTP.3.0');
Copyright © NameOfTheOrganization. All rights reserved.

19. XMLHttpRequest Object
21-Apr-17
XMLHttpRequest
[Title of the course]
XMLHttpRequest Object
For compatibility reasons, it’s recommended to create a factory function like this to retrieve a XMLHttpRequest instance :
function getXMLHttpRequest() {
var xhr = null;
if (window.XMLHttpRequest || window.ActiveXObject) {
if (window.ActiveXObject) {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} else {
xhr = new XMLHttpRequest(); }
alert("Impossible to use AJAX!");
return xhr;
Copyright © NameOfTheOrganization. All rights reserved.

20. 21-Apr-17
XMLHttpRequest
[Title of the course]
Request methods
To send a request, XMLHttpRequest instances provide three methods :
void open(method, url) :
Initialize the object with the HTTP method to use and the URI to request.
void setRequestHeader(header, value) :
Set a header value to the request. Must be used after open(…) and before send(…) functions.
void send(data) :
Send the request with data as request body. Must be used after open() function call.
Copyright © NameOfTheOrganization. All rights reserved.

21. Request methods Example : Request with GET method :
21-Apr-17
XMLHttpRequest
[Title of the course]
Request methods
Example :
Request with GET method :
Request with POST method :
Be careful : You must define the Content-Type header for POST requests !
var xhr = getXMLHttpRequest();
xhr.open("GET", "myPage.php?param1=12&param2=plop");
xhr.send(null);
var xhr = getXMLHttpRequest();
xhr.open("POST", "myPage.php");
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xhr.send("myParam1=12&myParam2=plop");
Copyright © NameOfTheOrganization. All rights reserved.

22. Ready State XMLHttpRequest instances provide a readyState attribute.
21-Apr-17
XMLHttpRequest
[Title of the course]
Ready State
XMLHttpRequest instances provide a readyState attribute.
Give information about request progress.
Five possible values :
0: uninitialized.
1: open (send() has not yet been called).
2: send (send() has been called).
3: receiving.
4: Finished (success of send() ).
Copyright © NameOfTheOrganization. All rights reserved.

23. Callback function Sometimes you need to process the request response.
21-Apr-17
XMLHttpRequest
[Title of the course]
Callback function
Sometimes you need to process the request response.
To refresh a portion of the page for instance.
As the request is asynchronous, the send method doesn’t return directly the response to the request.
You can define a callback function thanks to onreadystatechange event !
var xhr = getXMLHttpRequest();
xhr.onreadystatechange = function() {
alert("Ready state changed !"); }
Copyright © NameOfTheOrganization. All rights reserved.

24. 21-Apr-17
XMLHttpRequest
[Title of the course]
Callback function
The method associated with the onreadystatechange will be called each time the readystate attribute will change.
You can know when the request finish to process by checking this attribute.
var xhr = getXMLHttpRequest();
xhr.onreadystatechange = function() {
switch(xhr.readyState) {
case 0: alert("Initialized!"); break;
case 1: alert("Opened!"); break;
case 2: alert("Sent!"); break;
case 3: alert("Receiving!"); break;
case 4: alert("Finished!"); break; } };
...
Copyright © NameOfTheOrganization. All rights reserved.

25. 21-Apr-17
XMLHttpRequest
[Title of the course]
Retrieve the response
To retrieve the response sent by the server, XMLHttpRequest instances provide four attributes :
responseText :
The body of the data received.
responseXML :
An object that implements the Document interface representing the parsed XML response.
status :
Represent the HTTP status code.
statusText :
Represent the HTTP status text sent by the server (appears after the status code).
Copyright © NameOfTheOrganization. All rights reserved.

26. Retrieve the response Some HTTP statuses : XMLHttpRequest Code Message
21-Apr-17
XMLHttpRequest
[Title of the course]
Retrieve the response
Some HTTP statuses :
Code
Message
Descritpion
200 OK
The request is execute succefuly
301
MOVED
The datas have been transfered to a new address
302
FOUND
The datas have been transfered but it’s can be possible they are moved
400
BAD REQUEST
The syntax of the request is not correct
401
UNAUTHORIZED
No authorization to do this request.
403
FORBIDDEN
The access to the resource is forbidden
404
NOT FOUND
The resource is not found
500
INTERNAL ERROR
The server has a problem
Copyright © NameOfTheOrganization. All rights reserved.

27. Retrieve the response Example : XMLHttpRequest
21-Apr-17
XMLHttpRequest
[Title of the course]
Retrieve the response
Example :
var xhr = getXMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
document.getElementById("element_to_update")
.innerHTML = xhr.responseText;
} else {
document.getElementById("error")
.innerHTML = xhr.status + ": "
+ xhr.statusText; } };
xhr.open("GET", "myPage.php");
xhr.send(null);
Copyright © NameOfTheOrganization. All rights reserved.

28. Other methods… Cancels the current request.
21-Apr-17
XMLHttpRequest
[Title of the course]
Other methods…
abort()
Cancels the current request.
getAllResponseHeaders()
Returns the complete set of HTTP headers as a string.
getResponseHeader("field")
Returns the value of the specified HTTP header.
Copyright © NameOfTheOrganization. All rights reserved.

29. Do you have any questions ?
21-Apr-17
XMLHttpRequest
[Title of the course]
Stop-and-think
Do you have any questions ?
Copyright © NameOfTheOrganization. All rights reserved.

30. Exercise Now, you know how to implement AJAX !
21-Apr-17
XMLHttpRequest
[Title of the course]
Exercise
Now, you know how to implement AJAX !
Refactor your PHPBlog application and use AJAX to post new comments on a post.
If the request succeed :
You must update only the part of the page corresponding to the comment list.
Display a message into your page to notice the user that his comment has been added.
If the request failed :
Display a message into your page to notice the user.
Copyright © NameOfTheOrganization. All rights reserved.

31. Use AJAX with JQuery Interactive Web Application with AJAX 21-Apr-17
[Title of the course]
Interactive Web Application with AJAX
Use AJAX with JQuery
Copyright © NameOfTheOrganization. All rights reserved.

32. Presentation The jQuery library has a full suite of AJAX capabilities
21-Apr-17
Use AJAX with JQuery
[Title of the course]
Presentation
The jQuery library has a full suite of AJAX capabilities
Provide an easier and abstract way to use AJAX without use directly XMLHttpRequest
Example :
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function( msg ) {
alert( "Data Saved: " + msg ); }
});
Copyright © NameOfTheOrganization. All rights reserved.

33. Presentation The main function for use AJAX with jQuery is :
21-Apr-17
Use AJAX with JQuery
[Title of the course]
Presentation
The main function for use AJAX with jQuery is :
jQuery.ajax( settings )
Settings are key/value pairs that configure the Ajax request
All settings are optional
Copyright © NameOfTheOrganization. All rights reserved.

34. Settings The main settings are : url :
21-Apr-17
Use AJAX with JQuery
[Title of the course]
Settings
The main settings are :
url :
A string containing the URL to which the request is sent.
async :
By default, all requests are sent asynchronously. If you need synchronous requests, set this option to false.
Copyright © NameOfTheOrganization. All rights reserved.

35. Settings The main settings are : contentType :
21-Apr-17
Use AJAX with JQuery
[Title of the course]
Settings
The main settings are :
contentType :
When sending data to the server, use this content-type Default is "application/x-www-form-urlencoded", which is fine for most cases.
data :
Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the URL for GET-requests.
Copyright © NameOfTheOrganization. All rights reserved.

36. Settings The main settings are : statusCode :
21-Apr-17
Use AJAX with JQuery
[Title of the course]
Settings
The main settings are :
statusCode :
A map of numeric HTTP codes and functions to be called when the response has the corresponding code.
$.ajax({
... ,
statusCode: {
404: function( ) {
alert( "Data Saved: " + msg ); }
});
Copyright © NameOfTheOrganization. All rights reserved.

37. Settings The main settings are :
21-Apr-17
Use AJAX with JQuery
[Title of the course]
Settings
The main settings are :
error(jqXHR, textStatus, errorThrown) :
A function to be called if the request fails.
success(data, textStatus, jqXHR) :
A function to be called if the request succeeds.
complete(jqXHR, textStatus) :
A function to be called when the request finishes (after success and error callbacks are executed).
Copyright © NameOfTheOrganization. All rights reserved.

38. Do you have any questions ?
21-Apr-17
Use AJAX with JQuery
[Title of the course]
Stop-and-think
Do you have any questions ?
Copyright © NameOfTheOrganization. All rights reserved.

39. XMLHttpRequest object Attributes and methods
21-Apr-17
Interactive Web Application with AJAX
[Title of the course]
Part summary
Functioning
History
XMLHttpRequest object
Attributes and methods
Copyright © NameOfTheOrganization. All rights reserved.