SlideShare une entreprise Scribd logo
Ajax
                         Sujets spéciaux en TI

                    Le Web 2.0 : concepts et outils

                    École de technologie supérieure

                                  par

                           Claude Coulombe


GTI-780 / MTI-780                                     ETS - Montréal - 2009
Web traditionnel – Cliquez & attendez!




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Web traditionnel – Cliquez & attendez!
   Applications Web traditionnelles sont lentes
   Chargement d'une nouvelle page
    à chaque action (cycle HTTP)
   Navigateurs Web sont de simples
    terminaux HTML
   Basé sur le paradigme de la page
    ou document
   Chargement séquentiel d'une séries
    de pages
   Les usagers attendent...




GTI-780 / MTI-780        * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Ajax – Une véritable percée!




                    AJAX
                                                                Le premier à utiliser le terme AJAX
                                                                fut Jesse James Garrett en février 2005



GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com                     ETS - Montréal - 2009
Ajax – Une véritable percée!
 Ajax  (Asynchronous JavaScript & XML)
 Fini le pénible rechargement de pages!
 Réalise des requêtes asynchrones au serveur
  et fait la mise-à-jour de la page Web sans faire
  de chargement complet
 Applications Web plus réactives et plus
  dynamiques
 Objet XMLHttpRequest inventé par M$
 Basé sur du code-client en JavaScript



GTI-780 / MTI-780                      ETS - Montréal - 2009
Comprendre Ajax



             Ajax




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Ajax – Diagramme de collaboration
                                                                                                   Fureteur client
                    Fureteur client                                                                   Interface utilisateur
                                                                                                                     Appel JavaScript
                     Interface utilisateur                                                    HTML + CSS

                                                                                                         Moteur Ajax
                               Requête HTTP
                                                                                                                   Requête HTTP
             Réponse HTTP
             (HTML + CSS)
                                                                                           Réponse
                                                                                           XML / JSON / Texte
                         Serveur Web
                                                                                                        Serveur Web et
                                                                                                       XML / JSON/ Texte
                       Base de données,
                      systèmes de gestion

                        Serveur                                                                           Base de données,
                                                                                                         systèmes de gestion

                                                                                                           Serveur
       Application Web traditionnelle
                                                                                          Application Web Ajax
GTI-780 / MTI-780      Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php        ETS - Montréal - 2009
Ajax – Diagramme de séquence - Web traditionnel

 En mode synchrone, le fureteur est gelé en attendant la réponse du serveur.




GTI-780 / MTI-780   Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php   ETS - Montréal - 2009
Ajax – Diagramme de séquence – Application Web Ajax

En mode asynchrone, l'exécution dans le fureteur sur le poste client se poursuit sans attendre la réponse
du serveur. La réponse sera traitée par une fonction de retour (fonction Callback) quand elle arrivera.
L'état de la requête est donné par l'attribut readyState de l'objet XMLHttpRequest.




GTI-780 / MTI-780    Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php   ETS - Montréal - 2009
Ajax – Diagramme de séquence


     En mode synchrone, le
     fureteur est gelé en attendant
     la réponse du serveur.




En mode asynchrone, l'exécution dans le
fureteur sur le poste client se poursuit sans
attendre la réponse du serveur. La réponse
sera traitée par une fonction de retour
(fonction Callback) quand elle arrivera.
L'état de la requête est donné par l'attribut
readyState de l'objet XMLHttpRequest.



 GTI-780 / MTI-780         Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php   ETS - Montréal - 2009
Ajax – Technologies impliquées
   CSS (Cascading Style Sheet) pour la présentation
   API DOM (Document Object Model) pour accéder et
    modifier les éléments de la page
   JavaScript pour les traitements sur le poste client
   L'objet JavaScript XMLHttpRequest* qui échange des
    données XML** avec le serveur de façon
    asynchrone***
   Java (JEE), PHP, Ruby, .NET ou un autre langage peut
    être utilisé du coté serveur



                    * On peut aussi utilisr un iFrame caché
                    ** Échange de données en format XML, HTML, JSON ou du simple texte
GTI-780 / MTI-780   ***                                                                  ETS - Montréal - 2009
Ajax – Code XHTML
1) Ecrire le code XHTML de la page Web en isolant le code JavaScript et le style CSS dans
des fichiers séparés selon les principes du Unobtrusive JavaScript
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
    <head>
       <title>Test Ajax Simple</title>
       <!-- http://localhost:8080/ServeurAjaxSimple/testAjaxSimple.html -->
       <script type="text/javascript" src="ajax.js"> </script>
       <script type="text/javascript" src="texte-utils.js"> </script>
    </head>
    <body>
       <h3>Test Ajax Simple</h3>
         <fieldset>
            <legend>Formulaire</legend>
            <div>
              <!--L'usage de return false; a pour but de laisser le controle complet au code JavaScript -->
              <form id="testForm" method="get" onsubmit="return false;">
                <div id="titre">R&eacute;sultat de la requ&ecirc;te</div>
                  <br/>
                  <!-- Zone de la page Web à rafraîchir →
                  <div id="reponseDuServeur">0</div>
                  <br/>
                <div>
                  <input id="submitButton" type="button" value="Appeler serveur" />
                </div>
              </form>
            </div>
         </fieldset>
    </body>
  </html>
GTI-780 / MTI-780                   * Source Clipart : http://www.clipart.com               ETS - Montréal - 2009
Ajax – Code JavaScript - Initialisation
2) Ecrire le code JavaScript en créant les liens entre les éléments de la page Web
et les fonctions JavaScript selon les principes du Unobtrusive JavaScript


/* Requête basée sur un objet XMLHttpRequest ou XHR */
var requeteXHR = null;

/* Association de la fonction getReponseServeur    */
/* à l'événement onclick de l'élément submitButton */
/* Dans le pur style du Unobtrusive JavaScript     */
window.onload = init;

function init() {
   document.getElementById('submitButton').onclick = getReponseServeur;
}




GTI-780 / MTI-780          * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Ajax – Code JS – création de l'objet XHR
/* Création d'une requête basée sur un objet JavaScript XMLHttpRequest */
function creerRequeteXHR() {
   try {
       /* Constructeur pour fureteur non Microsoft incluant Firefox */
       requeteXHR = new XMLHttpRequest();
   }
   catch (essaiMicrosoft) {
       try {
          /* Constructeur pour fureteur MS IE 7+ */
          requeteXHR = new ActiveXObject("Msxml2.XMLHTTP");
       }
       catch (autreMicrosoft) {
          try {
             /* Constructeur pour autre fureteur MS IE */
             requeteXHR = new ActiveXObject("Microsoft.XMLHTTP");
          }
          catch (echec) {
             requeteXHR = null;
          }
       }
   }
   /* Echec de la création d'un objet XMLHttpRequest */
   if (requeteXHR == null) {
       alert("Impossible de créer l'objet requête XMLHttpRequest!");
   }
}
GTI-780 / MTI-780           * Source Clipart : http://www.clipart.com       ETS - Montréal - 2009
Ajax – Code JS – Appel & Callback
/* La fonction getReponseServeur() envoie une requête au serveur                   */
/* et fournit une fonction Callback pour traiter la réponse lorsqu'elle sera prête */
function getReponseServeur() {
   creerRequeteXHR();
   /* Pour contourner le problème du cache de l'URL on ajoute un paramètre bidon */
   var url = "reponse" + "?parametrebidon=" + new Date().getTime();
   requeteXHR.open("GET", url, true);
   /* On associe une fonction de retour (Callback) a l'evenement onreadystatechange */
   requeteXHR.onreadystatechange = actualiserPageCallback;
   /* Ici on envoie une requête vide car == null */
   requeteXHR.send(null);
}
/* Fonction de retour (Callback) qui s'exécute au retour de la réponse par le serveur */
function actualiserPageCallback() {
   /* L'état readyState == 4 signifie que le serveur a retourné une réponse */
   if (requeteXHR.readyState == 4) {
       /* Le status == 200 signifie que la requête HTTP est réussie, sinon status retourne un code d'erreur */
       if (requeteXHR.status == 200) {
           var nouveauNombre = requeteXHR.responseText;
           /* Accéder à l'élément à rafraîchir dans la page */
           var ancienNombreElement = document.getElementById("reponseDuServeur");
           /* Rachaîchir l'élément reponseDuServeur du formulaire */
           remplacerTexte(ancienNombreElement, nouveauNombre);
       }
       else {
           /* Echec de la requête HTTP, un code d'erreur est retourné */
           alert("*** Erreur! Le statut de la requête est : " + requeteXHR.status);
       }
   }
}
GTI-780 / MTI-780                      * Source Clipart : http://www.clipart.com           ETS - Montréal - 2009
Ajax – Code JS – Utilitaires
/* Fonctions utilitaires du livre Head First Ajax */
/* de Brett McLaughlin chez O'Reilly Media 2006 */

function getTexte(noeud) {
   var texte = "";
   if (noeud != null) {
       /* Tester s'il y a des noeuds enfants */
       if (noeud.childNodes) {
           /* Parcourir les noeuds enfants */
           for (var i = 0; i < noeud.childNodes.length; i++) {
              var noeudEnfant = noeud.childNodes[i];
              if (noeudEnfant.nodeValue != null) {
                  /* Accumule les textes des noeuds enfants */
                  texte = texte + noeudEnfant.nodeValue;
              }
           }
       }
   }
   return texte;
}
GTI-780 / MTI-780       * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Ajax – Code JS – Utilitaires (suite)
/* Fonctions utilitaires du livre Head First Ajax */
/* de Brett McLaughlin chez O'Reilly Media 2006 */

function remplacerTexte(noeud, texte) {
   if (noeud != null) {
       effacerTexte(noeud);
       var nouveauNoeud = document.createTextNode(texte);
       noeud.appendChild(nouveauNoeud);
   }
}

function effacerTexte(noeud) {
   if (noeud != null) {
       /* Tester s'il y a des noeuds enfants */
       if (noeud.childNodes) {
           /* Parcourir les noeuds enfants */
           for (var i = 0; i < noeud.childNodes.length; i++) {
              var noeudEnfant = noeud.childNodes[i];
              noeud.removeChild(noeudEnfant);
           }
       }
   }
}

GTI-780 / MTI-780            * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Ajax – Code Java – Servlet
package qc.ets.web2.ajax;

import   javax.servlet.*;
import   javax.servlet.http.*;
import   java.io.*;
import   java.util.*;

public class ServletAjaxSimple extends HttpServlet {
  public void init(ServletConfig config) throws ServletException {
      // Passer l'objet ServletConfig à la superclasse
      super.init(config);
  }
  // Traitement des requêtes HTTP Get
  public void doGet(HttpServletRequest request, HttpServletResponse response) throws
       ServletException, IOException {
      doPost(request, response);
  }
  // Traitement des requêtes HTTP Post
  public void doPost(HttpServletRequest request, HttpServletResponse response) throws
      ServletException, IOException {
         response.setContentType("text/html");
         PrintWriter out = response.getWriter();
         // Génération d'un nombre aléatoire entre 1 et 10
         int nouveauNombreAleatoire = (((int) Math.round(Math.random()*9)) + 1);
         out.println(nouveauNombreAleatoire);
         out.close();
  }
}GTI-780 / MTI-780                                                               ETS - Montréal - 2009
 GTI-780 / MTI-780                * Source Clipart : http://www.clipart.com         ETS - Montréal - 2009
Ajax – Configuration – web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4"
    xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    <servlet>
        <servlet-name>Servlet Ajax Simple</servlet-name>
        <servlet-class>qc.ets.web2.ajax.ServletAjaxSimple</servlet-class>
    </servlet>
    <!-- Mapping Servlet Ajax Simple -->
    <servlet-mapping>
        <servlet-name>Servlet Ajax Simple</servlet-name>
        <url-pattern>/reponse</url-pattern>
    </servlet-mapping>
</web-app>




  GTI-780 / MTI-780      * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Ajax - Avantages & inconvénients




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Ajax - Inconvénients
   Effet « buzzword »
   Problèmes de compatibilité entre les différents fureteurs
   Ne fonctionne pas si JavaScript est désactivé
   Les données chargées de façon dynamique ne sont pas
    indexées par les moteurs de recherche
   Si le traitement du côté serveur est long, le traitement
    asynchrone d'Ajax fait que les changements se font avec un
    délai
   Le bouton de retour en arrière, l'URL ne change pas et les
    signets ne fonctionnent pas
   Pas d'accès* en dehors du domaine du serveur
   Plus exigeant sur le poste client (vieux PC ?)

GTI-780 / MTI-780        * Note : En anglais « Same Origin Policy   ETS - Montréal - 2009
Ajax - Avantages
   Réponses rapides aux actions de l'utilisateur
   Applications Web riches, rapides et légères
   Pas de long téléchargement, ni d'installation
   Permet de modifier partiellement la page affichée par le
    fureteur pour la mettre à jour sans avoir à recharger la page
    entière.
   Réduit la quantité d'information demandée au serveur
   Fait davantage de traitement du côté client (en JavaScript)
    et moins sur le serveur et le réseau
   Donc économie du serveur et de la bande passante

GTI-780 / MTI-780                                   ETS - Montréal - 2009
Questions




                                   ?

GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009

Contenu connexe

Tendances

Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
ENSET, Université Hassan II Casablanca
 
Ajax intro 2pp
Ajax intro 2ppAjax intro 2pp
Ajax intro 2pp
RYMAA
 
Introduction à Angular JS
Introduction à Angular JSIntroduction à Angular JS
Introduction à Angular JS
Antoine Rey
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJSAbdoulaye Dieng
 
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Eric Bourdet
 
Service WEB de type REST avec Java
Service WEB de type REST avec JavaService WEB de type REST avec Java
Service WEB de type REST avec Java
Francois ANDRE
 
les servlets-java EE
les  servlets-java EEles  servlets-java EE
les servlets-java EE
Yassine Badri
 
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Abdelouahed Abdou
 
REST JUG Toulouse 20100615
REST JUG Toulouse 20100615REST JUG Toulouse 20100615
REST JUG Toulouse 20100615JUG Toulouse
 
Java Server Faces (JSF)
Java Server Faces (JSF)Java Server Faces (JSF)
Java Server Faces (JSF)
Heithem Abbes
 
comment realiser un Service Web
comment realiser un Service Web comment realiser un Service Web
comment realiser un Service Web Nazih Heni
 
Cours 2/3 - Architecture Web
Cours 2/3 - Architecture WebCours 2/3 - Architecture Web
Cours 2/3 - Architecture Web
Adyax
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
ENSET, Université Hassan II Casablanca
 
Soap, wsdl et uddi
Soap, wsdl et uddiSoap, wsdl et uddi
Soap, wsdl et uddi
miraprincesse
 
Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...
Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...
Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...Jean-Laurent de Morlhon
 
Services rest & jersey
Services rest & jerseyServices rest & jersey
Services rest & jersey
Mathieu Hicauber
 
Marzouk jsp
Marzouk jspMarzouk jsp
Marzouk jsp
abderrahim marzouk
 
Mini projet individuel php
Mini projet individuel phpMini projet individuel php
Mini projet individuel phpKhadim Mbacké
 

Tendances (20)

Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
 
Ajax intro 2pp
Ajax intro 2ppAjax intro 2pp
Ajax intro 2pp
 
Introduction à Angular JS
Introduction à Angular JSIntroduction à Angular JS
Introduction à Angular JS
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
 
Tutoriel ajax jquery
Tutoriel ajax jqueryTutoriel ajax jquery
Tutoriel ajax jquery
 
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
 
Service WEB de type REST avec Java
Service WEB de type REST avec JavaService WEB de type REST avec Java
Service WEB de type REST avec Java
 
les servlets-java EE
les  servlets-java EEles  servlets-java EE
les servlets-java EE
 
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
 
REST JUG Toulouse 20100615
REST JUG Toulouse 20100615REST JUG Toulouse 20100615
REST JUG Toulouse 20100615
 
Java Server Faces (JSF)
Java Server Faces (JSF)Java Server Faces (JSF)
Java Server Faces (JSF)
 
comment realiser un Service Web
comment realiser un Service Web comment realiser un Service Web
comment realiser un Service Web
 
Cours 2/3 - Architecture Web
Cours 2/3 - Architecture WebCours 2/3 - Architecture Web
Cours 2/3 - Architecture Web
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
 
Soap
SoapSoap
Soap
 
Soap, wsdl et uddi
Soap, wsdl et uddiSoap, wsdl et uddi
Soap, wsdl et uddi
 
Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...
Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...
Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...
 
Services rest & jersey
Services rest & jerseyServices rest & jersey
Services rest & jersey
 
Marzouk jsp
Marzouk jspMarzouk jsp
Marzouk jsp
 
Mini projet individuel php
Mini projet individuel phpMini projet individuel php
Mini projet individuel php
 

En vedette

Ajax PPT
Ajax PPTAjax PPT
Ajax PPT
Hub4Tech.com
 
Ajax et Accessibilite
Ajax et AccessibiliteAjax et Accessibilite
Ajax et Accessibilitemikeh
 
Omelette TIE Contribution
Omelette TIE ContributionOmelette TIE Contribution
Omelette TIE Contribution
Bandana_Banerjee
 
Web social - GTI780 & MTI780 - ETS - A08
Web social - GTI780 & MTI780 - ETS - A08Web social - GTI780 & MTI780 - ETS - A08
Web social - GTI780 & MTI780 - ETS - A08
Claude Coulombe
 
Introduction à GWT - GTI780 & MTI780 - ETS - A09
Introduction à GWT - GTI780 & MTI780 - ETS - A09Introduction à GWT - GTI780 & MTI780 - ETS - A09
Introduction à GWT - GTI780 & MTI780 - ETS - A09
Claude Coulombe
 
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Claude Coulombe
 
Plates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel librePlates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel libre
Claude Coulombe
 
Solutions Linux Développement Rapide Java
Solutions Linux Développement Rapide JavaSolutions Linux Développement Rapide Java
Solutions Linux Développement Rapide Java
Laurent Guérin
 

En vedette (9)

Ajax PPT
Ajax PPTAjax PPT
Ajax PPT
 
Ajax et Accessibilite
Ajax et AccessibiliteAjax et Accessibilite
Ajax et Accessibilite
 
Omelette TIE Contribution
Omelette TIE ContributionOmelette TIE Contribution
Omelette TIE Contribution
 
Web social - GTI780 & MTI780 - ETS - A08
Web social - GTI780 & MTI780 - ETS - A08Web social - GTI780 & MTI780 - ETS - A08
Web social - GTI780 & MTI780 - ETS - A08
 
Introduction à GWT - GTI780 & MTI780 - ETS - A09
Introduction à GWT - GTI780 & MTI780 - ETS - A09Introduction à GWT - GTI780 & MTI780 - ETS - A09
Introduction à GWT - GTI780 & MTI780 - ETS - A09
 
Werkstuk ajax
Werkstuk ajaxWerkstuk ajax
Werkstuk ajax
 
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
 
Plates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel librePlates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel libre
 
Solutions Linux Développement Rapide Java
Solutions Linux Développement Rapide JavaSolutions Linux Développement Rapide Java
Solutions Linux Développement Rapide Java
 

Similaire à Ajax GTI780 & MTI780 ETS A09

Normes avancées du Web - GTI780 & MTI780 - ETS - A08
Normes avancées du Web  - GTI780 & MTI780 - ETS - A08Normes avancées du Web  - GTI780 & MTI780 - ETS - A08
Normes avancées du Web - GTI780 & MTI780 - ETS - A08
Claude Coulombe
 
Web 2.0 & Génie Logiciel - GTI780 & MTI780 - ETS - A09
Web 2.0 & Génie Logiciel  - GTI780 & MTI780 - ETS - A09Web 2.0 & Génie Logiciel  - GTI780 & MTI780 - ETS - A09
Web 2.0 & Génie Logiciel - GTI780 & MTI780 - ETS - A09
Claude Coulombe
 
cours web developpement statique AJAX 2024
cours web developpement statique AJAX  2024cours web developpement statique AJAX  2024
cours web developpement statique AJAX 2024
YounesOuladSayad1
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
ENSET, Université Hassan II Casablanca
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)
Tugdual Grall
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Marouan OMEZZINE
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependances
ENSET, Université Hassan II Casablanca
 
Spring MVC
Spring MVCSpring MVC
Spring MVC
Abdelhakim Bachar
 
Quoi de neuf dans ASP.NET 4.5
Quoi de neuf dans ASP.NET 4.5Quoi de neuf dans ASP.NET 4.5
Quoi de neuf dans ASP.NET 4.5
Microsoft
 
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
Mohamed Nemili
 
Ter Web Service Intro
Ter Web Service IntroTer Web Service Intro
Ter Web Service Intro
Riadh Tebourbi (Ai1990)
 
Java EE _ Servlet et vue (1).pdf
Java EE _ Servlet et vue (1).pdfJava EE _ Servlet et vue (1).pdf
Java EE _ Servlet et vue (1).pdf
ColombieColombie
 
Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?
GreenIvory
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
WebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet ApplicationsWebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet ApplicationsVincent Perrin
 
HTML 5 et CSS3, créez, animez et enrichissez vos sites Web
HTML 5 et CSS3, créez, animez et enrichissez vos sites WebHTML 5 et CSS3, créez, animez et enrichissez vos sites Web
HTML 5 et CSS3, créez, animez et enrichissez vos sites Web
Microsoft
 
Java script Introduction
Java script IntroductionJava script Introduction
Java script Introduction
Mohamed MHAMDI
 
Asp.Net Dans Plateforme Ms
Asp.Net Dans Plateforme MsAsp.Net Dans Plateforme Ms
Asp.Net Dans Plateforme MsGregory Renard
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
codedarmor
 

Similaire à Ajax GTI780 & MTI780 ETS A09 (20)

Normes avancées du Web - GTI780 & MTI780 - ETS - A08
Normes avancées du Web  - GTI780 & MTI780 - ETS - A08Normes avancées du Web  - GTI780 & MTI780 - ETS - A08
Normes avancées du Web - GTI780 & MTI780 - ETS - A08
 
Web 2.0 & Génie Logiciel - GTI780 & MTI780 - ETS - A09
Web 2.0 & Génie Logiciel  - GTI780 & MTI780 - ETS - A09Web 2.0 & Génie Logiciel  - GTI780 & MTI780 - ETS - A09
Web 2.0 & Génie Logiciel - GTI780 & MTI780 - ETS - A09
 
cours web developpement statique AJAX 2024
cours web developpement statique AJAX  2024cours web developpement statique AJAX  2024
cours web developpement statique AJAX 2024
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependances
 
Spring MVC
Spring MVCSpring MVC
Spring MVC
 
Quoi de neuf dans ASP.NET 4.5
Quoi de neuf dans ASP.NET 4.5Quoi de neuf dans ASP.NET 4.5
Quoi de neuf dans ASP.NET 4.5
 
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
 
Ter Web Service Intro
Ter Web Service IntroTer Web Service Intro
Ter Web Service Intro
 
Java EE _ Servlet et vue (1).pdf
Java EE _ Servlet et vue (1).pdfJava EE _ Servlet et vue (1).pdf
Java EE _ Servlet et vue (1).pdf
 
Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
WebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet ApplicationsWebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet Applications
 
HTML 5 et CSS3, créez, animez et enrichissez vos sites Web
HTML 5 et CSS3, créez, animez et enrichissez vos sites WebHTML 5 et CSS3, créez, animez et enrichissez vos sites Web
HTML 5 et CSS3, créez, animez et enrichissez vos sites Web
 
Java script Introduction
Java script IntroductionJava script Introduction
Java script Introduction
 
Asp.Net Dans Plateforme Ms
Asp.Net Dans Plateforme MsAsp.Net Dans Plateforme Ms
Asp.Net Dans Plateforme Ms
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 

Plus de Claude Coulombe

Augmenter la persévérance dans les CLOM / MOOC? Possible!
Augmenter la persévérance dans les CLOM / MOOC? Possible!Augmenter la persévérance dans les CLOM / MOOC? Possible!
Augmenter la persévérance dans les CLOM / MOOC? Possible!
Claude Coulombe
 
Séminaire polytechnique 12nov15
Séminaire polytechnique 12nov15Séminaire polytechnique 12nov15
Séminaire polytechnique 12nov15
Claude Coulombe
 
Clom portfolios - ACFAS 2013
Clom portfolios - ACFAS 2013Clom portfolios - ACFAS 2013
Clom portfolios - ACFAS 2013
Claude Coulombe
 
De nouvelles plateformes technologiques pour les CLOM
De nouvelles plateformes technologiques pour les CLOMDe nouvelles plateformes technologiques pour les CLOM
De nouvelles plateformes technologiques pour les CLOM
Claude Coulombe
 
Infonuagique retour d'expérience
 Infonuagique   retour d'expérience Infonuagique   retour d'expérience
Infonuagique retour d'expérienceClaude Coulombe
 
De nouvelles plateformes technologiques pour les CLOM / MOOCs
De nouvelles plateformes technologiques pour les CLOM / MOOCsDe nouvelles plateformes technologiques pour les CLOM / MOOCs
De nouvelles plateformes technologiques pour les CLOM / MOOCs
Claude Coulombe
 
GWT, quoi de neuf? Présentation au GDG/GTUG Montréal - 26 juin 2013
GWT, quoi de neuf?  Présentation au GDG/GTUG Montréal - 26 juin 2013GWT, quoi de neuf?  Présentation au GDG/GTUG Montréal - 26 juin 2013
GWT, quoi de neuf? Présentation au GDG/GTUG Montréal - 26 juin 2013
Claude Coulombe
 
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
Claude Coulombe
 
Présentation GWT au JUG Montréal 14 avril 2011
Présentation GWT au JUG Montréal 14 avril 2011Présentation GWT au JUG Montréal 14 avril 2011
Présentation GWT au JUG Montréal 14 avril 2011
Claude Coulombe
 
Gwt intro-101
Gwt intro-101Gwt intro-101
Gwt intro-101
Claude Coulombe
 
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
Claude Coulombe
 
Web social - GTI780 & MTI780 - ETS - A09
Web social - GTI780 & MTI780 - ETS - A09Web social - GTI780 & MTI780 - ETS - A09
Web social - GTI780 & MTI780 - ETS - A09
Claude Coulombe
 
GWT Approfondissement - GTI780 & MTI780 - ETS - A09
GWT Approfondissement  - GTI780 & MTI780 - ETS - A09GWT Approfondissement  - GTI780 & MTI780 - ETS - A09
GWT Approfondissement - GTI780 & MTI780 - ETS - A09
Claude Coulombe
 
jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09
Claude Coulombe
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
Claude Coulombe
 
Web 2.0 GTI780 & MTI780 ETS A09
Web 2.0  GTI780 & MTI780  ETS  A09Web 2.0  GTI780 & MTI780  ETS  A09
Web 2.0 GTI780 & MTI780 ETS A09
Claude Coulombe
 
Mcetech 2009 - Open Social
Mcetech 2009 - Open SocialMcetech 2009 - Open Social
Mcetech 2009 - Open Social
Claude Coulombe
 
GWT Approfondissement - GTI780 & MTI780 - ETS - A08
GWT Approfondissement - GTI780 & MTI780 - ETS - A08GWT Approfondissement - GTI780 & MTI780 - ETS - A08
GWT Approfondissement - GTI780 & MTI780 - ETS - A08
Claude Coulombe
 
Introduction à GWT - GTI780 & MTI780 - ETS - A08
Introduction à GWT - GTI780 & MTI780 - ETS - A08Introduction à GWT - GTI780 & MTI780 - ETS - A08
Introduction à GWT - GTI780 & MTI780 - ETS - A08
Claude Coulombe
 
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Claude Coulombe
 

Plus de Claude Coulombe (20)

Augmenter la persévérance dans les CLOM / MOOC? Possible!
Augmenter la persévérance dans les CLOM / MOOC? Possible!Augmenter la persévérance dans les CLOM / MOOC? Possible!
Augmenter la persévérance dans les CLOM / MOOC? Possible!
 
Séminaire polytechnique 12nov15
Séminaire polytechnique 12nov15Séminaire polytechnique 12nov15
Séminaire polytechnique 12nov15
 
Clom portfolios - ACFAS 2013
Clom portfolios - ACFAS 2013Clom portfolios - ACFAS 2013
Clom portfolios - ACFAS 2013
 
De nouvelles plateformes technologiques pour les CLOM
De nouvelles plateformes technologiques pour les CLOMDe nouvelles plateformes technologiques pour les CLOM
De nouvelles plateformes technologiques pour les CLOM
 
Infonuagique retour d'expérience
 Infonuagique   retour d'expérience Infonuagique   retour d'expérience
Infonuagique retour d'expérience
 
De nouvelles plateformes technologiques pour les CLOM / MOOCs
De nouvelles plateformes technologiques pour les CLOM / MOOCsDe nouvelles plateformes technologiques pour les CLOM / MOOCs
De nouvelles plateformes technologiques pour les CLOM / MOOCs
 
GWT, quoi de neuf? Présentation au GDG/GTUG Montréal - 26 juin 2013
GWT, quoi de neuf?  Présentation au GDG/GTUG Montréal - 26 juin 2013GWT, quoi de neuf?  Présentation au GDG/GTUG Montréal - 26 juin 2013
GWT, quoi de neuf? Présentation au GDG/GTUG Montréal - 26 juin 2013
 
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
L'infonuagique éducative – Promesses et Défis! - Colloque tice 04mai2012
 
Présentation GWT au JUG Montréal 14 avril 2011
Présentation GWT au JUG Montréal 14 avril 2011Présentation GWT au JUG Montréal 14 avril 2011
Présentation GWT au JUG Montréal 14 avril 2011
 
Gwt intro-101
Gwt intro-101Gwt intro-101
Gwt intro-101
 
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
Tendances Futures du Web - GTI780 & MTI780 - ETS - A09
 
Web social - GTI780 & MTI780 - ETS - A09
Web social - GTI780 & MTI780 - ETS - A09Web social - GTI780 & MTI780 - ETS - A09
Web social - GTI780 & MTI780 - ETS - A09
 
GWT Approfondissement - GTI780 & MTI780 - ETS - A09
GWT Approfondissement  - GTI780 & MTI780 - ETS - A09GWT Approfondissement  - GTI780 & MTI780 - ETS - A09
GWT Approfondissement - GTI780 & MTI780 - ETS - A09
 
jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
 
Web 2.0 GTI780 & MTI780 ETS A09
Web 2.0  GTI780 & MTI780  ETS  A09Web 2.0  GTI780 & MTI780  ETS  A09
Web 2.0 GTI780 & MTI780 ETS A09
 
Mcetech 2009 - Open Social
Mcetech 2009 - Open SocialMcetech 2009 - Open Social
Mcetech 2009 - Open Social
 
GWT Approfondissement - GTI780 & MTI780 - ETS - A08
GWT Approfondissement - GTI780 & MTI780 - ETS - A08GWT Approfondissement - GTI780 & MTI780 - ETS - A08
GWT Approfondissement - GTI780 & MTI780 - ETS - A08
 
Introduction à GWT - GTI780 & MTI780 - ETS - A08
Introduction à GWT - GTI780 & MTI780 - ETS - A08Introduction à GWT - GTI780 & MTI780 - ETS - A08
Introduction à GWT - GTI780 & MTI780 - ETS - A08
 
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08
 

Ajax GTI780 & MTI780 ETS A09

  • 1. Ajax Sujets spéciaux en TI Le Web 2.0 : concepts et outils École de technologie supérieure par Claude Coulombe GTI-780 / MTI-780 ETS - Montréal - 2009
  • 2. Web traditionnel – Cliquez & attendez! GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 3. Web traditionnel – Cliquez & attendez!  Applications Web traditionnelles sont lentes  Chargement d'une nouvelle page à chaque action (cycle HTTP)  Navigateurs Web sont de simples terminaux HTML  Basé sur le paradigme de la page ou document  Chargement séquentiel d'une séries de pages  Les usagers attendent... GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 4. Ajax – Une véritable percée! AJAX Le premier à utiliser le terme AJAX fut Jesse James Garrett en février 2005 GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 5. Ajax – Une véritable percée!  Ajax (Asynchronous JavaScript & XML)  Fini le pénible rechargement de pages!  Réalise des requêtes asynchrones au serveur et fait la mise-à-jour de la page Web sans faire de chargement complet  Applications Web plus réactives et plus dynamiques  Objet XMLHttpRequest inventé par M$  Basé sur du code-client en JavaScript GTI-780 / MTI-780 ETS - Montréal - 2009
  • 6. Comprendre Ajax Ajax GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 7. Ajax – Diagramme de collaboration Fureteur client Fureteur client Interface utilisateur Appel JavaScript Interface utilisateur HTML + CSS Moteur Ajax Requête HTTP Requête HTTP Réponse HTTP (HTML + CSS) Réponse XML / JSON / Texte Serveur Web Serveur Web et XML / JSON/ Texte Base de données, systèmes de gestion Serveur Base de données, systèmes de gestion Serveur Application Web traditionnelle Application Web Ajax GTI-780 / MTI-780 Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php ETS - Montréal - 2009
  • 8. Ajax – Diagramme de séquence - Web traditionnel En mode synchrone, le fureteur est gelé en attendant la réponse du serveur. GTI-780 / MTI-780 Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php ETS - Montréal - 2009
  • 9. Ajax – Diagramme de séquence – Application Web Ajax En mode asynchrone, l'exécution dans le fureteur sur le poste client se poursuit sans attendre la réponse du serveur. La réponse sera traitée par une fonction de retour (fonction Callback) quand elle arrivera. L'état de la requête est donné par l'attribut readyState de l'objet XMLHttpRequest. GTI-780 / MTI-780 Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php ETS - Montréal - 2009
  • 10. Ajax – Diagramme de séquence En mode synchrone, le fureteur est gelé en attendant la réponse du serveur. En mode asynchrone, l'exécution dans le fureteur sur le poste client se poursuit sans attendre la réponse du serveur. La réponse sera traitée par une fonction de retour (fonction Callback) quand elle arrivera. L'état de la requête est donné par l'attribut readyState de l'objet XMLHttpRequest. GTI-780 / MTI-780 Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php ETS - Montréal - 2009
  • 11. Ajax – Technologies impliquées  CSS (Cascading Style Sheet) pour la présentation  API DOM (Document Object Model) pour accéder et modifier les éléments de la page  JavaScript pour les traitements sur le poste client  L'objet JavaScript XMLHttpRequest* qui échange des données XML** avec le serveur de façon asynchrone***  Java (JEE), PHP, Ruby, .NET ou un autre langage peut être utilisé du coté serveur * On peut aussi utilisr un iFrame caché ** Échange de données en format XML, HTML, JSON ou du simple texte GTI-780 / MTI-780 *** ETS - Montréal - 2009
  • 12. Ajax – Code XHTML 1) Ecrire le code XHTML de la page Web en isolant le code JavaScript et le style CSS dans des fichiers séparés selon les principes du Unobtrusive JavaScript <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test Ajax Simple</title> <!-- http://localhost:8080/ServeurAjaxSimple/testAjaxSimple.html --> <script type="text/javascript" src="ajax.js"> </script> <script type="text/javascript" src="texte-utils.js"> </script> </head> <body> <h3>Test Ajax Simple</h3> <fieldset> <legend>Formulaire</legend> <div> <!--L'usage de return false; a pour but de laisser le controle complet au code JavaScript --> <form id="testForm" method="get" onsubmit="return false;"> <div id="titre">R&eacute;sultat de la requ&ecirc;te</div> <br/> <!-- Zone de la page Web à rafraîchir → <div id="reponseDuServeur">0</div> <br/> <div> <input id="submitButton" type="button" value="Appeler serveur" /> </div> </form> </div> </fieldset> </body> </html> GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 13. Ajax – Code JavaScript - Initialisation 2) Ecrire le code JavaScript en créant les liens entre les éléments de la page Web et les fonctions JavaScript selon les principes du Unobtrusive JavaScript /* Requête basée sur un objet XMLHttpRequest ou XHR */ var requeteXHR = null; /* Association de la fonction getReponseServeur */ /* à l'événement onclick de l'élément submitButton */ /* Dans le pur style du Unobtrusive JavaScript */ window.onload = init; function init() { document.getElementById('submitButton').onclick = getReponseServeur; } GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 14. Ajax – Code JS – création de l'objet XHR /* Création d'une requête basée sur un objet JavaScript XMLHttpRequest */ function creerRequeteXHR() { try { /* Constructeur pour fureteur non Microsoft incluant Firefox */ requeteXHR = new XMLHttpRequest(); } catch (essaiMicrosoft) { try { /* Constructeur pour fureteur MS IE 7+ */ requeteXHR = new ActiveXObject("Msxml2.XMLHTTP"); } catch (autreMicrosoft) { try { /* Constructeur pour autre fureteur MS IE */ requeteXHR = new ActiveXObject("Microsoft.XMLHTTP"); } catch (echec) { requeteXHR = null; } } } /* Echec de la création d'un objet XMLHttpRequest */ if (requeteXHR == null) { alert("Impossible de créer l'objet requête XMLHttpRequest!"); } } GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 15. Ajax – Code JS – Appel & Callback /* La fonction getReponseServeur() envoie une requête au serveur */ /* et fournit une fonction Callback pour traiter la réponse lorsqu'elle sera prête */ function getReponseServeur() { creerRequeteXHR(); /* Pour contourner le problème du cache de l'URL on ajoute un paramètre bidon */ var url = "reponse" + "?parametrebidon=" + new Date().getTime(); requeteXHR.open("GET", url, true); /* On associe une fonction de retour (Callback) a l'evenement onreadystatechange */ requeteXHR.onreadystatechange = actualiserPageCallback; /* Ici on envoie une requête vide car == null */ requeteXHR.send(null); } /* Fonction de retour (Callback) qui s'exécute au retour de la réponse par le serveur */ function actualiserPageCallback() { /* L'état readyState == 4 signifie que le serveur a retourné une réponse */ if (requeteXHR.readyState == 4) { /* Le status == 200 signifie que la requête HTTP est réussie, sinon status retourne un code d'erreur */ if (requeteXHR.status == 200) { var nouveauNombre = requeteXHR.responseText; /* Accéder à l'élément à rafraîchir dans la page */ var ancienNombreElement = document.getElementById("reponseDuServeur"); /* Rachaîchir l'élément reponseDuServeur du formulaire */ remplacerTexte(ancienNombreElement, nouveauNombre); } else { /* Echec de la requête HTTP, un code d'erreur est retourné */ alert("*** Erreur! Le statut de la requête est : " + requeteXHR.status); } } } GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 16. Ajax – Code JS – Utilitaires /* Fonctions utilitaires du livre Head First Ajax */ /* de Brett McLaughlin chez O'Reilly Media 2006 */ function getTexte(noeud) { var texte = ""; if (noeud != null) { /* Tester s'il y a des noeuds enfants */ if (noeud.childNodes) { /* Parcourir les noeuds enfants */ for (var i = 0; i < noeud.childNodes.length; i++) { var noeudEnfant = noeud.childNodes[i]; if (noeudEnfant.nodeValue != null) { /* Accumule les textes des noeuds enfants */ texte = texte + noeudEnfant.nodeValue; } } } } return texte; } GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 17. Ajax – Code JS – Utilitaires (suite) /* Fonctions utilitaires du livre Head First Ajax */ /* de Brett McLaughlin chez O'Reilly Media 2006 */ function remplacerTexte(noeud, texte) { if (noeud != null) { effacerTexte(noeud); var nouveauNoeud = document.createTextNode(texte); noeud.appendChild(nouveauNoeud); } } function effacerTexte(noeud) { if (noeud != null) { /* Tester s'il y a des noeuds enfants */ if (noeud.childNodes) { /* Parcourir les noeuds enfants */ for (var i = 0; i < noeud.childNodes.length; i++) { var noeudEnfant = noeud.childNodes[i]; noeud.removeChild(noeudEnfant); } } } } GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 18. Ajax – Code Java – Servlet package qc.ets.web2.ajax; import javax.servlet.*; import javax.servlet.http.*; import java.io.*; import java.util.*; public class ServletAjaxSimple extends HttpServlet { public void init(ServletConfig config) throws ServletException { // Passer l'objet ServletConfig à la superclasse super.init(config); } // Traitement des requêtes HTTP Get public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } // Traitement des requêtes HTTP Post public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); // Génération d'un nombre aléatoire entre 1 et 10 int nouveauNombreAleatoire = (((int) Math.round(Math.random()*9)) + 1); out.println(nouveauNombreAleatoire); out.close(); } }GTI-780 / MTI-780 ETS - Montréal - 2009 GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 19. Ajax – Configuration – web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <servlet> <servlet-name>Servlet Ajax Simple</servlet-name> <servlet-class>qc.ets.web2.ajax.ServletAjaxSimple</servlet-class> </servlet> <!-- Mapping Servlet Ajax Simple --> <servlet-mapping> <servlet-name>Servlet Ajax Simple</servlet-name> <url-pattern>/reponse</url-pattern> </servlet-mapping> </web-app> GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 20. Ajax - Avantages & inconvénients GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  • 21. Ajax - Inconvénients  Effet « buzzword »  Problèmes de compatibilité entre les différents fureteurs  Ne fonctionne pas si JavaScript est désactivé  Les données chargées de façon dynamique ne sont pas indexées par les moteurs de recherche  Si le traitement du côté serveur est long, le traitement asynchrone d'Ajax fait que les changements se font avec un délai  Le bouton de retour en arrière, l'URL ne change pas et les signets ne fonctionnent pas  Pas d'accès* en dehors du domaine du serveur  Plus exigeant sur le poste client (vieux PC ?) GTI-780 / MTI-780 * Note : En anglais « Same Origin Policy ETS - Montréal - 2009
  • 22. Ajax - Avantages  Réponses rapides aux actions de l'utilisateur  Applications Web riches, rapides et légères  Pas de long téléchargement, ni d'installation  Permet de modifier partiellement la page affichée par le fureteur pour la mettre à jour sans avoir à recharger la page entière.  Réduit la quantité d'information demandée au serveur  Fait davantage de traitement du côté client (en JavaScript) et moins sur le serveur et le réseau  Donc économie du serveur et de la bande passante GTI-780 / MTI-780 ETS - Montréal - 2009
  • 23. Questions ? GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009