AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML...
Transcript of AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML...
![Page 1: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/1.jpg)
Magali Contensin
JoSy AJAX et bibliothèques JS pour les ASR
AJAX
3 novembre 2011
![Page 2: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/2.jpg)
Plan
Comment actualiser une partie d'une page web ?
Principe
Quelques applications
Etapes
Sécurité
Support par les navigateurs
Inconvénients
Avantages
Outils
![Page 3: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/3.jpg)
Actualiser une partie d’une page web
?
![Page 4: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/4.jpg)
Actualiser une partie d’une page web
Solution 1 : côté serveur - requête HTTP
1
![Page 5: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/5.jpg)
Actualiser une partie d’une page web
Solution 1 : côté serveur - requête HTTP
serveur
pays=Angleterre
1
2
Requête HTTP
![Page 6: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/6.jpg)
Actualiser une partie d’une page web
Solution 1 : côté serveur - requête HTTP
serveur
pays=Angleterre
1
2
3
Requête HTTP
HTML Réponse HTTP
![Page 7: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/7.jpg)
Actualiser une partie d’une page web
Solution 1 : côté serveur - requête HTTP
serveur
pays=Angleterre
1
2
3 4
Requête HTTP
HTML Réponse HTTP
![Page 8: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/8.jpg)
Actualiser une partie d’une page web
Solution 1 : côté serveur - requête HTTP
serveur
pays=Angleterre
1
2
3 4
Requête HTTP
HTML
Ergonomie Réseau Serveur
Réponse HTTP
![Page 9: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/9.jpg)
Actualiser une partie d’une page web
Solution 2 : côté client - JavaScript + DOM
serveur
1
JS
DOM
select
Marseille Toulouse Paris
option option option
HTML
Pays : Allemagne Villes : Berlin, Munich
Pays : Angleterre Villes : Londres, Manchester
…
![Page 10: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/10.jpg)
Pays : Allemagne Villes : Berlin, Munich
Pays : Angleterre Villes : Londres, Manchester
…
Actualiser une partie d’une page web
Solution 2 : côté client - JavaScript + DOM
serveur
1
2 JS
DOM
select
Marseille Toulouse Paris
option option option
HTML
![Page 11: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/11.jpg)
select
Marseille Toulouse Paris
option option option
Actualiser une partie d’une page web
Solution 2 : côté client - JavaScript + DOM
serveur
1
2 JS
DOM
3
select
Londres Manchester
option option
HTML
Pays : Allemagne Villes : Berlin, Munich
Pays : Angleterre Villes : Londres, Manchester
…
JS
![Page 12: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/12.jpg)
Actualiser une partie d’une page web
Solution 2 : côté client - JavaScript + DOM
serveur
Pays : Allemagne Villes : Berlin, Munich
Pays : Angleterre Villes : Londres, Manchester
…
1
2
3
JS
DOM
Réseau Navigateur
JS
select
Marseille Toulouse Paris
option option option
select
Londres Manchester
option option
HTML JS
![Page 13: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/13.jpg)
Actualiser une partie d’une page web
Solution 3 : IFRAME
serveur
cadre flottant
1 HTML
![Page 14: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/14.jpg)
Actualiser une partie d’une page web
Solution 3 : IFRAME
serveur
2
cadre flottant
1 HTML
Requête HTTP
![Page 15: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/15.jpg)
Actualiser une partie d’une page web
Solution 3 : IFRAME
serveur
2
cadre flottant
3 HTML
1 HTML
Requête HTTP
![Page 16: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/16.jpg)
Actualiser une partie d’une page web
Solution 3 : IFRAME
serveur
2
4
cadre flottant
3
1 HTML
HTML
Requête HTTP
![Page 17: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/17.jpg)
Actualiser une partie d’une page web
Solution 3 : IFRAME
serveur
2
5
cadre flottant
4
3
1 HTML
HTML
Requête HTTP
Requête HTTP
![Page 18: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/18.jpg)
Actualiser une partie d’une page web
Solution 3 : IFRAME
serveur
2
cadre flottant
4 5
3
6
HTML
HTML
1 HTML
Requête HTTP
Requête HTTP
![Page 19: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/19.jpg)
Actualiser une partie d’une page web
Solution 3 : IFRAME
serveur
1
2
cadre flottant
4 5
3
Navigateur
HTML
Forms
HTML
HTML 6
Requête HTTP
Requête HTTP
![Page 20: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/20.jpg)
Actualiser une partie d’une page web
AJAX
![Page 21: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/21.jpg)
Principe
serveur
1 HTML
AJAX
![Page 22: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/22.jpg)
Principe
serveur
1 2 HTML
AJAX
![Page 23: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/23.jpg)
Principe
serveur
1
pays=Angleterre
2
3 Requête XMLHTTP
JS
HTML
AJAX
![Page 24: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/24.jpg)
Principe
serveur
4
Londres, Manchester
Texte brut ou extrait de code HTML ou JSON ou XML
1
pays=Angleterre
2
3 Requête XMLHTTP
JS
HTML
AJAX
![Page 25: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/25.jpg)
Principe
serveur
pays=Angleterre
2
3
4
5
Requête XMLHTTP
Londres, Manchester
JS + DOM
1
JS
Texte brut ou extrait de code HTML ou JSON ou XML
HTML
AJAX
![Page 26: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/26.jpg)
Principe
Asynchronous
Javascript
And
XML
Combinaison de technologies :
(X)HTML & CSS – présentation et contenu
DOM – manipulation du contenu
Objet XMLHttpRequest – communication avec le serveur
XML – échange de données (pas obligatoire – texte, JSON)
JavaScript
Jesse James Garrett - 2005
Ajax: A New Approach to Web Applications
asynchrone
I
synchrone
AJAX
![Page 27: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/27.jpg)
Quelques applications
liste de tâches Google maps
agenda
chat
AJAX
![Page 28: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/28.jpg)
Etape 1 – page web HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test</title> <script type="text/javascript" src="ajax.js"></script> </head> <body> <form action="traite_form.php" method="post"> <div> Choisir une agence : <br />
Nom <input type="text" name="nom" /> <br /> Pays <select name="pays" onchange="showCities(this.value, 'cities')"> <option value="" selected="selected"></option> <option value="Allemagne">Allemagne</option> <option value="Angleterre">Angleterre</option> <option value="Belgique">Belgique</option> <option value="Espagne">Espagne</option> <option value="France">France</option> <option value="Italie">Italie</option> </select> <span id="cities"></span> <br /> <input type="submit" value="Envoyer" class="button" />
</div> </form> </body> </html>
JS
JS
1. Page web HTML - Inclure un script JavaScript - Définir l’action - Identifier la zone à modifier
![Page 29: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/29.jpg)
Etape 2 – script côté serveur (E/S)
serveur
http://.../liste_villes.php?pays=Angleterre
Requête XMLHTTP
Londres;Manchester
JS Réponse XMLHTTP
liste_villes.php
2. Script côté serveur
- Entrées : données de la requête - Sortie : JSON/texte/XML
![Page 30: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/30.jpg)
function showCities(pays, id_elt) {
var node = null; var xml_http = null; try { node = document.getElementById(id_elt); if (pays.length == 0) { // si aucun pays selectionne node.innerHTML = ''; return; } xml_http = new XMLHttpRequest();
<span id="cities"></span>
Etape 3 – script JavaScript
} // fin fonction showCities
Angleterre cities 3. Script JS
a) Créer la fonction appelée dans l’événement de la page HTML
![Page 31: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/31.jpg)
function showCities(pays, id_elt) {
var node = null; var xml_http = null; try { node = document.getElementById(id_elt); if (pays.length == 0) { // si aucun pays selectionne node.innerHTML = ''; return; } xml_http = new XMLHttpRequest();
<span id="cities"></span>
Etape 3 – script JavaScript
} // fin fonction showCities
texte br texte input br texte select span br input
option … option
div
form
body
html
texte
head
title script
Angleterre cities
span node
3. Script JS
a) Créer la fonction appelée dans l’événement de la page HTML
![Page 32: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/32.jpg)
function showCities(pays, id_elt) {
var node = null; var xml_http = null; try { node = document.getElementById(id_elt); if (pays.length == 0) { // si aucun pays selectionne node.innerHTML = ''; return; } xml_http = new XMLHttpRequest();
<span id="cities"></span>
Etape 3 – script JavaScript
} // fin fonction showCities
span
Angleterre cities
node
3. Script JS
b) Créer l’objet XMLHttpRequest
![Page 33: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/33.jpg)
Etape 3 – script JavaScript
function showCities(pays, id_elt) {
var node = null; var xml_http = null; try { node = document.getElementById(id_elt); if (pays.length == 0) { // si aucun pays selectionne node.innerHTML = ''; return; } xml_http = new XMLHttpRequest(); xml_http.onreadystatechange = function(){ } // fin fonction anonyme
} // fin fonction showCities
<span id="cities"></span>
span
Angleterre cities
node
3. Script JS
c) Définir le gestionnaire d’événements (appelé quand l’état de l’objet change)
Etats de l’objet
0 : UNSENT – objet construit 1 : OPENED – objet initialisé (méthode open) 2 : HEADERS_RECEIVED – requête envoyée au serveur (méthode send) 3 : LOADING – réponse en cours de chargement 4 : DONE – terminé
![Page 34: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/34.jpg)
Etape 3 – script JavaScript
function showCities(pays, id_elt) {
var node = null; var xml_http = null; try { node = document.getElementById(id_elt); if (pays.length == 0) { // si aucun pays selectionne node.innerHTML = ''; return; } xml_http = new XMLHttpRequest(); xml_http.onreadystatechange = function(){ var tab_villes = new Array(); var code_html = ''; if ((this.readyState == 4) && (this.status == 200)) { } // fin etat 4 DONE et reponse HTTP 200 } // fin fonction anonyme
} // fin fonction showCities
<span id="cities"></span>
span
Angleterre cities
node
3. Script JS
c) Définir le gestionnaire d’événement - Attendre que la réponse HTTP soit complète
Etats de l’objet
0 : UNSENT – objet construit 1 : OPENED – objet initialisé (méthode open) 2 : HEADERS_RECEIVED – requête envoyée au serveur (méthode send) 3 : LOADING – réponse en cours de chargement 4 : DONE – terminé
![Page 35: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/35.jpg)
Etape 3 – script JavaScript
function showCities(pays, id_elt) {
var node = null; var xml_http = null; try { node = document.getElementById(id_elt); if (pays.length == 0) { // si aucun pays selectionne node.innerHTML = ''; return; } xml_http = new XMLHttpRequest(); xml_http.onreadystatechange = function(){ var tab_villes = new Array(); var code_html = ''; if ((this.readyState == 4) && (this.status == 200)) { if (this.responseText.length > 0){ tab_villes = this.responseText.split(';'); } // fin etat 4 DONE et reponse HTTP 200 } // fin fonction anonyme
} // fin fonction showCities
Londres;Manchester
<span id="cities"></span>
span
Angleterre cities
node
3. Script JS c) Définir le gestionnaire d’événement - Attendre que la réponse HTTP soit complète - Récupérer la réponse envoyée par le serveur : format texte/JSON : propriété responseText format XML : propriété responseXML
![Page 36: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/36.jpg)
Etape 3 – script JavaScript
function showCities(pays, id_elt) {
var node = null; var xml_http = null; try { node = document.getElementById(id_elt); if (pays.length == 0) { // si aucun pays selectionne node.innerHTML = ''; return; } xml_http = new XMLHttpRequest(); xml_http.onreadystatechange = function(){ var tab_villes = new Array(); var code_html = ''; if ((this.readyState == 4) && (this.status == 200)) { if (this.responseText.length > 0){ tab_villes = this.responseText.split(';'); } // fin etat 4 DONE et reponse HTTP 200 } // fin fonction anonyme
} // fin fonction showCities
Londres;Manchester
<span id="cities"></span>
Londres Manchester
0 1
span
Angleterre cities
node
tab_villes
3. Script JS c) Définir le gestionnaire d’événement - Attendre que la réponse HTTP soit complète - Récupérer la réponse envoyée par le serveur - Modifier le contenu de la page (manipulation de l’arbre du document)
![Page 37: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/37.jpg)
Etape 3 – script JavaScript
function showCities(pays, id_elt) {
var node = null; var xml_http = null; try { node = document.getElementById(id_elt); if (pays.length == 0) { // si aucun pays selectionne node.innerHTML = ''; return; } xml_http = new XMLHttpRequest(); xml_http.onreadystatechange = function(){ var tab_villes = new Array(); var code_html = ''; if ((this.readyState == 4) && (this.status == 200)) { if (this.responseText.length > 0){ tab_villes = this.responseText.split(';'); for (var i = 0; i < tab_villes.length; i++) { code_html += '<option value="' + i + '">' + tab_villes[i] + '</option>'; } node.innerHTML = 'Ville <select name="city">' + code_html + '</select>'; } else { node.innerHTML = 'echec'; } } // fin etat 4 DONE et reponse HTTP 200 } // fin fonction anonyme
} // fin fonction showCities
<span id="cities"></span> <option value="0">Londres</option> <option value="1">Manchester</option>
0 1
span
Angleterre cities
Londres Manchester
node
tab_villes
code_html
3. Script JS c) Définir le gestionnaire d’événement - Attendre que la réponse HTTP soit complète - Récupérer la réponse envoyée par le serveur - Modifier le contenu de la page (manipulation de l’arbre du document)
![Page 38: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/38.jpg)
Etape 3 – script JavaScript
function showCities(pays, id_elt) {
var node = null; var xml_http = null; try { node = document.getElementById(id_elt); if (pays.length == 0) { // si aucun pays selectionne node.innerHTML = ''; return; } xml_http = new XMLHttpRequest(); xml_http.onreadystatechange = function(){ var tab_villes = new Array(); var code_html = ''; if ((this.readyState == 4) && (this.status == 200)) { if (this.responseText.length > 0){ tab_villes = this.responseText.split(';'); for (var i = 0; i < tab_villes.length; i++) { code_html += '<option value="' + i + '">' + tab_villes[i] + '</option>'; } node.innerHTML = 'Ville <select name="city">' + code_html + '</select>'; } else { node.innerHTML = 'echec'; } } // fin etat 4 DONE et reponse HTTP 200 } // fin fonction anonyme
} // fin fonction showCities
<span id="cities"></span> Ville <select name="city"> <option value="0">Londres</option> <option value="1">Manchester</option> </select>
span
Angleterre cities
node
3. Script JS c) Définir le gestionnaire d’événement - Attendre que la réponse HTTP soit complète - Récupérer la réponse envoyée par le serveur - Modifier le contenu de la page (manipulation de l’arbre du document)
![Page 39: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/39.jpg)
Etape 3 – script JavaScript
function showCities(pays, id_elt) {
var node = null; var xml_http = null; try { node = document.getElementById(id_elt); if (pays.length == 0) { // si aucun pays selectionne node.innerHTML = ''; return; } xml_http = new XMLHttpRequest(); xml_http.onreadystatechange = function(){ var tab_villes = new Array(); var code_html = ''; if ((this.readyState == 4) && (this.status == 200)) { if (this.responseText.length > 0){ tab_villes = this.responseText.split(';'); for (var i = 0; i < tab_villes.length; i++) { code_html += '<option value="' + i + '">' + tab_villes[i] + '</option>'; } node.innerHTML = 'Ville <select name="city">' + code_html + '</select>'; } else { node.innerHTML = 'echec'; } } // fin etat 4 DONE et reponse HTTP 200 } // fin fonction anonyme
} // fin fonction showCities
<span id="cities"> Ville <select name="city"> <option value="0">Londres</option> <option value="1">Manchester</option> </select> </span>
option option
texte select
span
Londres Manchester
Angleterre cities
node
3. Script JS c) Définir le gestionnaire d’événement - Attendre que la réponse HTTP soit complète - Récupérer la réponse envoyée par le serveur - Modifier le contenu de la page (manipulation de l’arbre du document)
![Page 40: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/40.jpg)
Etape 3 – script JavaScript
function showCities(pays, id_elt) {
var node = null; var xml_http = null; try { node = document.getElementById(id_elt); if (pays.length == 0) { // si aucun pays selectionne node.innerHTML = ''; return; } xml_http = new XMLHttpRequest(); xml_http.onreadystatechange = function(){ var tab_villes = new Array(); var code_html = ''; if ((this.readyState == 4) && (this.status == 200)) { if (this.responseText.length > 0){ tab_villes = this.responseText.split(';'); for (var i = 0; i < tab_villes.length; i++) { code_html += '<option value="' + i + '">' + tab_villes[i] + '</option>'; } node.innerHTML = 'Ville <select name="city">' + code_html + '</select>'; } else { node.innerHTML = 'echec'; } } // fin etat 4 DONE et reponse HTTP 200 } // fin fonction anonyme
// envoyer la requete xml_http.open("GET", "liste_villes.php?pays=" + pays, true); // asynchrone xml_http.send(null); // GET -> pas de donnees
} catch (e) { return; } } // fin fonction showCities
Angleterre
3. Script JS d) Envoyer la requête au serveur web - Récupérer les données à envoyer au serveur - Initialiser (méthode open) - Envoyer (méthode send)
![Page 41: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/41.jpg)
xml_http.onreadystatechange = function(){
var tab_villes = new Array(); var code_html = '';
if (this.readyState < 4){ node.innerHTML = "<img src='loader.gif' alt='loading…'>"; } else { // si etat 4 DONE et que code reponse HTTP 200 manipuler le DOM pour afficher le select … } } // fin fonction anonyme
Etape 3 – script JavaScript
Prendre en compte la latence
Informer l’utilisateur qu’une opération est en cours en tâche de fond
![Page 42: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/42.jpg)
Sécurité
Mêmes problèmes de sécurité qu’une application web standard
Problèmes supplémentaires
Surface d’attaque plus étendue (nombre de points d’entrées)
Communication bi-directionnelle (entrées côté serveur et client)
Code JavaScript lisible par tout client
Injections :
DOM
JSON
JavaScript (XSS)
![Page 43: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/43.jpg)
Sécurité – bonnes pratiques
Sécuriser les communications (https si confidentialité)
Vérifier l’authentification et les privilèges dans tout script appelé par une
requête XMLHTTP
Filtrer les entrées
listes blanches
faire les vérifications dans le script final et dans les scripts appelés par les requêtes
XMLHTTP
vérifier les données retournées par le serveur avant de les utiliser sur le client
(Injection DOM, XSS, JSON)
Protéger les sorties
Ne jamais faire de modification de données sur le serveur sans demander
l’autorisation à l’utilisateur
Attention au déni de service (cas des suggestions)
Utiliser innerText plutôt que innerHTML pour du texte simple
Attention aux scripts disponibles sur internet, leur préférer un framework
AJAX utilisé par une large communauté
![Page 44: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/44.jpg)
Support par les navigateurs
IE 5 introduit un contrôle ActiveX XMLHTTP
XMLHttpRequest
Firefox
Mozilla >= 1.0 (Netscape 7)
Chrome
Safari >= 1.2
Opera >= 8.0
IE >= 7
![Page 45: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/45.jpg)
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
IE 6.0 IE 7.0 IE 8.0 IE 9.0
Firefox 2.0 Firefox 3.0 Firefox 3.5 Firefox 3.6
Firefox 4.0 Firefox 5.0 Firefox 6.0 Firefox 7.0
Chrome 5.0 Chrome 6.0 Chrome 7.0 Chrome 8.0
Chrome 9.0 Chrome 10.0 Chrome 11.0 Chrome 12.0
Chrome 13.0 Chrome 14.0 Chrome 15.0 Safari 4.0
Safari 4.1 Safari 5.0 Safari 5.1 Opera 10.x
Opera 11.x Proprietary or Undetectable
55% 23%
15%
5% 2% Total Market Share Microsoft IE
Firefox
Chrome
Safari
Opera
Propriétaires & indétectables
Autres
http://www.netmarketshare.com
3ème trimestre 2011
IE Firefox Chrome
Support par les navigateurs
![Page 46: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/46.jpg)
Support par les navigateurs
function getXmlHttpObject(){
var xml_http_obj = null;
try { xml_http_obj = new XMLHttpRequest(); // Firefox, IE >= 7, Safari, Opera, Chrome } catch(e){ try{ xml_http_obj = new ActiveXObject("Msxml2.XMLHTTP"); // IE 6 } catch(e){ alert ("Browser does not support Ajax"); } } return xml_http_obj; }
![Page 47: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/47.jpg)
Inconvénients
navigateur
JavaScript activé
support de l’objet XMLHttpRequest
=> prévoir une version qui fonctionne sans Ajax
navigation
historique de navigation (boutons back/forward)
=> fonction de callback qui restaure la page
signets
sécurité
JavaScript activé
pas d’indexation du contenu dynamique
latence
![Page 48: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/48.jpg)
Avantages
Amélioration de l’expérience utilisateur
mise à jour locale de la page
supprime l’effet de rafraîchissement de la page entière
diminution des temps d’attente (réponse plus rapide aux actions de l’utilisateur )
contrôle en temps réel du contenu des formulaires
asynchrone => permet de continuer à remplir un formulaire
Réduction de la bande passante
seule l’information nécessaire est transmise
Réduction de la charge du serveur
une partie des traitements est réalisée par le client (mise en page du résultat)
le serveur n’a pas à générer la totalité de la page à chaque demande
Aucune installation nécessaire (pas de plugin)
AJAX, utilisé à bon escient, fournit une expérience utilisateur similaire à
celle des applications installées sur l’ordinateur.
![Page 49: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/49.jpg)
Outils
Ajax loader icon
Frameworks Ajax :
jQuery, Dojo, Prototype, …
Onglet Net Firebug
![Page 50: AJAX - RESINFO · ou JSON ou XML HTML AJAX. Principe A synchronous J avascript A nd X ML Combinaison de technologies : (X)HTML & CSS – présentation et contenu DOM – manipulation](https://reader034.fdocuments.in/reader034/viewer/2022042807/5f7778d3a5b121270c3ceb01/html5/thumbnails/50.jpg)
En savoir plus
W3C XMLHttpRequest – candidate recommendation 2010
http://www.w3.org/TR/XMLHttpRequest
Ajax: A New Approach to Web Applications – J.J. Garrett 2005
http://adaptivepath.com/ideas/ajax-new-approach-web-applications
Ajax Tutorial
http://www.xul.fr/en-xml-ajax.html
Ajax loader icon
http://www.ajaxload.info
Liste Frameworks Ajax
http://en.wikipedia.org/wiki/List_of_Ajax_frameworks
http://www.xul.fr/ajax-librairies.html
Firebug
http://getfirebug.com/network
OWASP – Ajax and Other « Rich » Interface Technologies
https://www.owasp.org/index.php/Ajax_and_Other_%22Rich%22_Interface_Technologies
OWASP Ajax Security Guidelines
https://www.owasp.org/index.php/OWASP_AJAX_Security_Guidelines