Interactive Web Application with AJAX 21-Apr-17 [Title of the course] Interactive Web Application with AJAX www.supinfo.com Copyright © SUPINFO. All rights reserved Copyright © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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

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

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.

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 © 2004-2005 NameOfTheOrganization. All rights reserved.