Introduction à AJAX
M. DIENG Abdoulaye
adieng@gmail.com
Objectif général
Comprendre le principe de fonctionnement d'AJAX
Objectifs opérationnels
• Connaître les avantages et inconvénients d’AJAX
• Connaître les attributs et méthodes de l’objet...
Sommaire
1. Présentation d’AJAX
a) Définition
b) Intérêt
c) Fonctionnement
2. Objet XMLHttpRequest
3. Construction d’une r...
Présentation d’AJAX
définition
• Inventé début 2005 par Jesse J. Garrett, le terme AJAX
(Asynchronous JavaScript And XML) ...
Présentation d’AJAX
avantages
• Rechargement partiel de la page
l’objet XMLHttpRequest assure la récupération et l’inserti...
Présentation d’AJAX
inconvénients
• Pas de mémorisation des actions dans l’historique
les différents contenus d’une applic...
Présentation d’AJAX
fonctionnement
Sommaire
1. Présentation d’AJAX
2. Objet XMLHttpRequest
a) Présentation
b) Propriétés
c) Méthodes
3. Construction d’une re...
Objet XMLHttpRequest
présentation
• La communication des applications Ajax avec le serveur
repose essentiellement sur l’ob...
Objet XMLHttpRequest
quelques méthodes
• abort() : stoppe la requête et réinitialise la valeur de
readyState à 0
• getAllR...
Objet XMLHttpRequest
quelques propriétés
• onreadystatechange : notifie de l’état de la requête et de ses
évènements (asso...
Sommaire
1. Présentation d’AJAX
2. Objet XMLHttpRequest
3. Construction d’une interaction AJAX
a) Création d'une instance ...
Construction d’une interaction AJAX
les étapes
1. Création d’un déclencheur et d’au moins une zone ou sera
affichée la rép...
Construction d’une interaction AJAX
Création d’un déclencheur et d’une zone d’affichage de la réponse
Cette étape consiste...
Construction d’une interaction AJAX
Création de l'objet XMLHttpRequest
function creationXHR() {
var resultat=null;
try { /...
Construction d’une interaction AJAX
désignation de la fonction de rappel
• La fonction de rappel (ou callback) devra être ...
Construction d’une interaction AJAX
initialisation de la requête
• La requête est initialisée par la méthode open() qui re...
Construction d’une interaction AJAX
envoi de la requête
• La requête est envoyée par la méthode send() qui reçoit :
– ou b...
Construction d’une interaction AJAX
traitement de la requête par le serveur
• La requête peut être traitée par un script ....
Construction d’une interaction AJAX
traitement de la réponse par le navigateur
• La réponse est traitée par la fonction de...
Prochain SlideShare
Chargement dans…5
×

Introduction à ajax

698 vues

Publié le

objectif général : Comprendre le principe de fonctionnement d'AJAX

objectifs opérationnels :
- Connaître les avantages et inconvénients d’AJAX
- Connaître les attributs et méthodes de l’objet XMLHttpRequest
- Construire une interaction AJAX

Publié dans : Logiciels
1 commentaire
1 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
698
Sur SlideShare
0
Issues des intégrations
0
Intégrations
8
Actions
Partages
0
Téléchargements
0
Commentaires
1
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Introduction à ajax

  1. 1. Introduction à AJAX M. DIENG Abdoulaye adieng@gmail.com
  2. 2. Objectif général Comprendre le principe de fonctionnement d'AJAX
  3. 3. Objectifs opérationnels • Connaître les avantages et inconvénients d’AJAX • Connaître les attributs et méthodes de l’objet XMLHttpRequest • Construire une interaction AJAX
  4. 4. Sommaire 1. Présentation d’AJAX a) Définition b) Intérêt c) Fonctionnement 2. Objet XMLHttpRequest 3. Construction d’une requête
  5. 5. Présentation d’AJAX définition • Inventé début 2005 par Jesse J. Garrett, le terme AJAX (Asynchronous JavaScript And XML) désigne la conjonction des technologies suivantes : – XHTML pour la structuration sémantique du contenu d’une page Web; – CSS pour la mise en forme du contenu d’une page Web; – DOM pour la manipulation des éléments d’une page Web; – L’objet XMLHttpRequest de JavaScript qui permet d’assurer des transferts asynchrones entre le client et le serveur; – XML pour les formats de données à transférer; – JavaScript qui permet l’interaction de ces différentes technologies.
  6. 6. Présentation d’AJAX avantages • Rechargement partiel de la page l’objet XMLHttpRequest assure la récupération et l’insertion dans la page en cours des seules données à modifier. • Économie de la bande passante l’élimination du transfert de nombreuses informations redondantes, allège fortement le trafic réseau. • Augmentation de la réactivité de l’application • Non blocage de l’application pendant le traitement de la requête l’échange XMLHttpRequest asynchrone permet à l’internaute de continuer à travailler pendant de traitement de la requête.
  7. 7. Présentation d’AJAX inconvénients • Pas de mémorisation des actions dans l’historique les différents contenus d’une application Ajax s’affiche toujours dans la même page. • Problème d’indexation des contenus Seul le premier contenu d’une page sera : – indexé par les moteurs de recherche; – enregistré comme favoris par les navigateurs. • Dépendance de l’activation de JavaScript sur le navigateur
  8. 8. Présentation d’AJAX fonctionnement
  9. 9. Sommaire 1. Présentation d’AJAX 2. Objet XMLHttpRequest a) Présentation b) Propriétés c) Méthodes 3. Construction d’une requête
  10. 10. Objet XMLHttpRequest présentation • La communication des applications Ajax avec le serveur repose essentiellement sur l’objet XMLHttpRequest. • XMLHttpRequest a d'abord été développé par Microsoft, en tant qu'objet ActiveX, pour Internet Explorer 5.0. (sep 1998) • Il a ensuite été repris et implémenté en tant qu’objet Javascript par les autres navigateurs. • La création de l'objet se fait différemment selon le navigateur • Sa création sous IE nécessite de tester plusieurs versions d’IE. • Toutefois, après la création de l'objet, les méthodes et propriétés sont les mêmes pour tous les navigateurs.
  11. 11. Objet XMLHttpRequest quelques méthodes • abort() : stoppe la requête et réinitialise la valeur de readyState à 0 • getAllResponseHeaders() : retourne une chaîne de caractères contenant toutes les en-têtes de réponse • getResponseHeader(headerField) : retourne la valeur d’un champ d’en-tête • open(requestMethod, url, asynchronousFlag) : prépare l’envoi de la requête • send(bodyContent) : envoie le corps du message (éventuellement null par exemple lors de l’exploitation de la méthode GET) • setRequestHeader(headerField, headerValue) : ajoute une paire champ/valeur à l’en-tête lors de l’envoi de la requête
  12. 12. Objet XMLHttpRequest quelques propriétés • onreadystatechange : notifie de l’état de la requête et de ses évènements (associée à une fonction de traitement). • readyState : état de l’objet XHR au cours de la requête (0 : non initialisé, 1 : requête en cours d’envoi, 2 : requête envoyée, 3 : réponse en cours de réception, 4 : complétude de la réponse). • responseText : réponse du serveur sous format chaîne de caractères. • responseXML : réponse du serveur sous format XML. • status : code de la réponse HTTP reçue depuis le serveur. • statusText : libellé du code de la réponse HTTP reçue depuis le serveur.
  13. 13. Sommaire 1. Présentation d’AJAX 2. Objet XMLHttpRequest 3. Construction d’une interaction AJAX a) Création d'une instance de l'objet XMLHttpRequest b) Désignation de la fonction de rappel c) Initialisation de la requête d) Envoi de la requête e) Traitement de la requête par le serveur f) Traitement de la réponse
  14. 14. Construction d’une interaction AJAX les étapes 1. Création d’un déclencheur et d’au moins une zone ou sera affichée la réponse de l'action utilisateur (fichier .html) 2. Création de l'objet XMLHttpRequest (fichier .js à inclure dans le fichier .html) 3. Désignation de la fonction de rappel (ou callback) (code javascript à inclure dans le fichier .html) 4. Initialisation de la requête (code javascript à inclure dans le fichier .html) 5. Envoi de la requête (code javascript à inclure dans le fichier .html) 6. Traitement de la requête par le serveur (fichier .php dans le même domaine que le fichier .html) 7. Traitement de la réponse par le navigateur (fonction javascript à inclure dans le fichier .html)
  15. 15. Construction d’une interaction AJAX Création d’un déclencheur et d’une zone d’affichage de la réponse Cette étape consiste à la création d’une page (X)HTML intégrant : • un déclencheur (un lien, bouton ou n'importe quel contrôle que l'utilisateur peut manipuler pour lancer une action). Exemple : • Une ou +sieurs zones munie chacune d’un identifiant unique où sera affichée la réponse de l'action de l’utilisateur. Exemple : <p> Entrez un entier SVP :<input id="entier" /> </p> <p> <input type="button" onclick="parite();" value="pair ou impair?" /> </p> <p> <span id="nbr">...</span> est <span id="resultat">...</span> </p>
  16. 16. Construction d’une interaction AJAX Création de l'objet XMLHttpRequest function creationXHR() { var resultat=null; try { // Test pour les navigateurs : Mozilla, Opera, ... resultat= new XMLHttpRequest(); } catch (Error) { try { // Test pour les navigateurs Internet Explorer > 5.0 resultat= new ActiveXObject("Msxml2.XMLHTTP"); } catch (Error) { try { // Test pour le navigateur Internet Explorer 5.0 resultat= new ActiveXObject("Microsoft.XMLHTTP"); } catch (Error) { resultat= null; } } } return resultat; } L’objet XMLHttpRequest est créé par l’instruction: objetXHR = creationXHR()
  17. 17. Construction d’une interaction AJAX désignation de la fonction de rappel • La fonction de rappel (ou callback) devra être appelée à chaque fois que l’état de l’objet XMLHttpRequest change (requête en cours d’envoi, requête envoyée, réponse en cours de réception, complétude de la réponse). • Pour cela, on renseigne la propriété onreadystatechange de l'objet. Par exemple : objetXHR.onreadystatechange = actualiserPage; • Cette fonction est surtout utilisée pour le traitement de la réponse complète du serveur
  18. 18. Construction d’une interaction AJAX initialisation de la requête • La requête est initialisée par la méthode open() qui reçoit : – la méthode d’envoi (GET ou POST) ; – l'adresse du programme chargé de traiter la requête, ainsi qu’éventuellement, la liste des paramètres à passer à celui- ci, dans le cas où la requête est effectuée en mode GET ; – false(synchrone) ou true (asynchrone : mode par défaut). • Exemple avec POST : objetXHR.open("post","parite.php",true); • Exemple avec GET : var entier=document.getElementById("entier").value; objetXHR.open("get","parite.php?entier="+entier,true);
  19. 19. Construction d’une interaction AJAX envoi de la requête • La requête est envoyée par la méthode send() qui reçoit : – ou bien NULL si la méthode d’envoi est GET ; – ou bien la liste des paramètres à passer au programme chargé de traiter la requête, si la méthode d’envoi est POST. • Exemple avec GET : objetXHR.send(NULL); • Exemple avec POST : var entier=document.getElementById("entier").value; objetXHR.setRequestHeader("Content-Type","application/x- www-form-urlencoded"); objetXHR.send("entier="+entier);
  20. 20. Construction d’une interaction AJAX traitement de la requête par le serveur • La requête peut être traitée par un script .php • Exemple : (parite.php) <?php header("Content-Type: text/plain");//la réponse est du texte if(!empty($_REQUEST)){ extract($_REQUEST); if($entier%2==0){ echo 'pair'; } else{ echo 'impair'; } } ?>
  21. 21. Construction d’une interaction AJAX traitement de la réponse par le navigateur • La réponse est traitée par la fonction de rappel. • Exemple : function actualiserPage() { if (objetXHR.readyState == 4) { if (objetXHR.status == 200) { var entier= document.getElementById("entier"); var nbr= document.getElementById("nbr"); var resultat= document.getElementById("resultat"); nbr.innerHTML=entier; resultat.innerHTML=objetXHR.responseText; } } }

×