Ajax1 A. Obaid - Programmation web (INF2005) AJAX.

Présentation au sujet: "Ajax1 A. Obaid - Programmation web (INF2005) AJAX."— Transcription de la présentation:

1 Ajax1 A. Obaid - Programmation web (INF2005) AJAX

2 Ajax2 A. Obaid - Programmation web (INF2005) AJAX l Asynchronous JavaScript And XML. –Technologie pour créer des pages web interactives –Basées sur XML, HTML et JavaScript l Utilise: –HTML pour le marquage –XML pour représenter les résultats –CSS pour la présentation –JavaScript pour récupérer les données et les afficher

3 Ajax3 A. Obaid - Programmation web (INF2005) Rôle de JavaScript l Définit une objet pour envoyer des requêtes HTTP l Initie la requête l Obtient l'objet de requête (Request) l Désigne une fonction callBack pour traiter la réponse l Définit des événements d'arrivée de la réponses l Initie des requêtes GET ou POST l Attend que la réponse soit arrivée l Manipule la réponse et extrait le résultat l Traite le résultat l Construit les éléments d'affichage

4 Ajax4 A. Obaid - Programmation web (INF2005) Modèle Ajax Interface usager Serveur web/XML Documents Web Navigateur Machine JavaScript XML Requête HTTP HTML + CSS Appel JavaScript Programme Interface usager Serveur web Documents Web HTML + CSS Requête HTTP Navigateur Programme

5 Ajax5 A. Obaid - Programmation web (INF2005) Interactions asynchrones l Lorsqu'on soumet un formulaire, JavaScript envoie une requête à un serveur, obtient le résultat et rafraichit l'écran avec les nouvelles données –Sans l'intervention explicite de l'usager l L'usager peut continuer à utiliser l'application web pendant que le navigateur cherche de l'information du serveur. l Formulaire sans bouton submit Name: Time:

6 Ajax6 A. Obaid - Programmation web (INF2005) Transaction Ajax l Une transaction consiste en –Ouverture de la connexion avec open() u On y spécifie la méthode (GET, POST ou HEAD): –L'envoi de données avec send() (si POST) –La réception de la réponse du serveur

7 Ajax7 A. Obaid - Programmation web (INF2005) Transactions Ajax Server: Microsoft-IIS/5.1 Date: Fri, 17 Nov 2010 17:47:47 GMT Content-Type: text/xml Accept-Ranges: bytes Last-Modified: Fri, 17 Nov 2010 14:07:51 GMT Content-Length: 21 xmlhttp.open("HEAD","Demo.jsp",true); xmlhttp.send(null); xmlhttp.open("GET","Demo.jsp?Prenom=Abdel&Nom=Obaid",true); Server: Microsoft-IIS/5.1 Date: Fri, 17 Nov 2010 17:47:47 GMT Content-Type: text/xml Accept-Ranges: bytes Last-Modified: Fri, 17 Nov 2010 14:07:51 GMT Content-Length: 200 … Donnees de la response … xmlhttp.send(null);

8 Ajax8 A. Obaid - Programmation web (INF2005) Transactions Ajax xmlhttp.open("POST","Demo.jsp",true); Server: Microsoft-IIS/5.1 Date: Fri, 17 Nov 2010 17:47:47 GMT Content-Type: text/xml Accept-Ranges: bytes Last-Modified: Fri, 17 Nov 2010 14:07:51 GMT Content-Length: 200 … Donnees de la response … xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;"); xmlhttp.send("FPrenom=Abdel&Nom=Obaid");

9 Ajax9 A. Obaid - Programmation web (INF2005) L'objet XMLHttpRequest l Contient la requête du client Ajax l Les méthodes utilisées pour créer un objet XMLHttpRequest dépendent du navigateur l Internet Explorer: u new ActiveXObject("Microsoft.XMLHTTP"); l FireFox, Safari, …: u new XMLHttpRequest();

10 Ajax10 A. Obaid - Programmation web (INF2005) Envoi de la requête var requete; function obtenirObjetRequete() { if (window.ActiveXObject) { return(new ActiveXObject("Microsoft.XMLHTTP")); } else if (window.XMLHttpRequest) { return(new XMLHttpRequest()); } … } function envoyerRequete() { requete = obtenirObjetRequete(); requete.onreadystatechange = traiterReponse ; requete.open("GET", "URL", true); requete.send(null); } function traiterReponse () { if (requete.readyState == 4) { alert("Reponse recue : "+ requete.responseText); }

11 Ajax11 A. Obaid - Programmation web (INF2005) Exemple function ajaxFunction() { var xmlHttp; try { requete=new XMLHttpRequest(); // Firefox, Opera, Safari } catch (e) { try { requete=new ActiveXObject("Msxml2.XMLHTTP"); // IE } catch (e) { try { requete=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Votre navigateur ne supporte pas AJAX!"); return false; } } } } Name: Time:

12 Ajax12 A. Obaid - Programmation web (INF2005) Requête HTTP l Les requêtes se font grâce à des l'objet de requête dans un script JavaScript et les méthodes open() et send(): –open() a 3 paramètres: u Méthode HTTP (GET, POST,...) u URL de la page demandée (ex. Page PHP) u Flag de synchronisme (true/false). –send() a un paramètre: données envoyées au serveur si la méthode POST ou null si la méthode set GET.. httpRequest.open('POST', 'http://www.info.uqam.ca/document.type', true); httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); httpRequest.send("prenom=Abdel&nom=Obaid&tel=514-1234567" );

13 Ajax13 A. Obaid - Programmation web (INF2005) Réponses asynchrones l En asynchrone, on n'attend pas la réponse. On doit écrire un code pour attendre. –Fonction Callback qui attend l'arrivée d'un événement "Changement dans l'état de la réponse" u État de la réponse désigné par la propriété readyState qui prend une valeur ente 0 et 4. –Une valeur de 4, signifie que la réponse du serveur a été reçue entièrement et qu’elle est prête pour le traitement. l L'événement est capturé par la propriété onreadystatechange de l'objet requete –On lui spécifie la fonction Callbak requete = new XMLHttpRequest(); requete.overrideMimeType('text/xml'); requete t.onreadystatechange = fonctionDeTraitement; if (requete.readyState == 4) { …// Réponse reçue } else { …// pas encore prête }

14 Ajax14 A. Obaid - Programmation web (INF2005) Traitement de la réponse l L’état de la réponse est désigné par une valeur de 0 à 4. –4: réponse du serveur reçue entièrement et prête pour le traitement. –0 : requête non initialisée –1 : en cours de chargement –2 : données chargées –3 : données en cours d'interaction if (requete.readyState == 4) { …// Réponse reçue } else { …// pas encore prête }

15 Ajax15 A. Obaid - Programmation web (INF2005) Réponse du serveur l Les propriétés responseText et responseXML de XMLHttpRequest contiennent la réponse du serveur. l responseText. Contient la réponse en tant que chaine de caractères. u On peut la mettre sous forme texte HTML l responseXML : contient la réponse sous forme de document XML. u On peut la manipuler avec les API DOM appropriées.

16 Ajax16 A. Obaid - Programmation web (INF2005) Propriétés de XMLHttpRequest l Onreadystatechange: –appelée pour traiter la réponse du serveur l readyState: –Contient l’état de la réponse du serveur. A chaque fois que cette propriété change, la fonction onreadystatechange sera exécutée. l responseText: –stocke les données reçues en format texte responseXML: Stocke les données reçues en tant qu'objet XML l getAllResponseHeaders() : –retourne les valeurs des entêtes HTTP l getResponseHeader(header) : –retourne la valeur d'un lentête HTTP. l setRequestHeader(entete,valeur) : –assigne une valeur à un entête. l send(Données) : –envoie un requête au serveur dont l'URL est spécifiée dans open():

17 Ajax17 A. Obaid - Programmation web (INF2005) Exemple – Affichage de readyState function etat() { var requete; var vContenu = document.getElementById("contenu"); requete = new XMLHttpRequest(); requete.open("HEAD", "http://www.uqam.ca", true); requete.onreadystatechange= function() { vContenu.innerHTML += "Etat: " + requete.readyState + " "; } requete.send(null); } ajax_etat.hml

18 Ajax18 A. Obaid - Programmation web (INF2005) Exemple – Lecture de données texte function Requete (URL) { var requeteHTTP= false; if (window.XMLHttpRequest) { requeteHTTP = new XMLHttpRequest(); if (requeteHTTP.overrideMimeType) { requeteHTTP.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { try { requeteHTTP = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { requeteHTTP = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } if (!requeteHTTP) { alert('Abandon : Impossible de créer une instance XMLHTTP'); return false; } requeteHTTP.onreadystatechange = changerContenu(requeteHTTP); requeteHTTP.open('GET',URL, true); requeteHTTP.send(null); }

19 Ajax19 A. Obaid - Programmation web (INF2005) Exemple – Lecture de données texte function lire() var requete; try{ requete = new XMLHttpRequest(); }catch (e){ try{ requete = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ requete = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ alert("Votre navigateur ne supporte pas Ajax !"); return false; }

20 Ajax20 A. Obaid - Programmation web (INF2005) Exemple – Lecture de données texte requete.onreadystatechange = function(){ if(requete.readyState == 4){ document.getElementById("texte").innerHTML=requete.responseText; } requete.open("GET", "texte1.txt", true); requete.send(null); } Lire le fichier texte

21 Ajax21 A. Obaid - Programmation web (INF2005) Traitement des requêtes l On peut traiter les requêtas en utilisant plusieurs technologies : –Servlets et JSP –Langages de programmation classique (C, C++) –Langages dédiés: PHP, Ruby,...

22 Ajax22 A. Obaid - Programmation web (INF2005) Exemple avec POST function obtenirObjectRequete() { if (window.ActiveXObject) { return(new ActiveXObject("Microsoft.XMLHTTP")); } else if (window.XMLHttpRequest) { return(new XMLHttpRequest()); } else {return(null);} } function envoyerRequete(param) { requete = obtenirObjectRequete(); requete.onreadystatechange = traiterReponse; requete.open("POST", "chercher2.php", true); requete.setRequestHeader("Content-type","application/x-www-form-urlencoded"); requete.send("nomProf="+param); } function traiterReponse() { if ((requete.readyState== 4) && (requete.status==200)) { document.getElementById("Contenu").innerHTML= requete.responseText; } ajax4_2.html

23 Ajax23 A. Obaid - Programmation web (INF2005) Exemple avec POST <?php $profs = array ( "Obaid"=>array( "PK-4740", "3206","Teleinformatique" ), "Tremblay"=>array ("PK-4435","8213","Genie logiciel"), "Laforest"=>array("PK-4725","7790","Combinatoire"); ); $leProf=$_POST["nomProf"]; // nomProf dans le formulaire if (isset($profs[$leProf][0]) ){ echo "Nom du professeur: ". $leProf." "; echo "Bureau: ". $profs[$leProf][0]." "; echo "Téléphone: ". $profs[$leProf][1]." "; echo "Domaine: ". $profs[$leProf][2]." "; } else { echo "Ce prof n'existe pas !"; } ?> chercher2.php

24 Ajax24 A. Obaid - Programmation web (INF2005) Envoi de la réponse en XML l Le serveur peut lire les données d'un fichier XML. l Le serveur peut lire des données d'un fichier et en extraire certains selon les critères de l'usager. l Le serveur peut produire du code XML dynamiquement.

25 Ajax25 A. Obaid - Programmation web (INF2005) Exemple- Données XML Obaid PK-4740 3206 Teleinformatique Reseaux sans fil … Laforest PK-4740 3206 Algorithmique Combinatoire profs.xml

26 Ajax26 A. Obaid - Programmation web (INF2005) Réponses en XML l On récupère les résultat XML grâce à l'objet responseXML. l On identifie les éléments DOM recherchés: lesProfs=reponse.getElementsByTagName("prof"); l On parcourt l'arbre à partir de ces éléments: for (i=0;i<lesProfs.length;i++) { texteHTML=texteHTML+ " "+ lesProfs[i].childNodes[0].nodeValue+" : " + lesProfs[i].childNodes[1].nodeValue+" " } l On place le résultat dans la page HTML: document.getElementById("contenu").innerHTML=texteHTML ajax_xml.html

27 Ajax27 A. Obaid - Programmation web (INF2005) Reponses XML ajax_xml.html #Contenu { color: red; font-size: x-large; } function obtenirObjectRequeteXML() { if (window.ActiveXObject) { return(new ActiveXObject("Microsoft.XMLHTTP") ); } else if (window.XMLHttpRequest) { return(new XMLHttpRequest()); } else { return(null); } } function envoyerRequeteXML(param) { requete = obtenirObjectRequeteXML(); requete.onreadystatechange = traiterReponseXML; requete.open("GET", "profs.xml", true); requete.send(null); }

28 Ajax28 A. Obaid - Programmation web (INF2005) function envoyerRequeteXML(param) { requete = obtenirObjectRequeteXML(); requete.onreadystatechange = traiterReponseXML; requete.open("GET", "profs.xml", true); requete.send(null); } function traiterReponseXML() { if ((requete.readyState == 4) && (requete.status == 200)) { reponseEnXML=requete.responseXML; var sortieXML=""; listeElements=reponseEnXML.getElementsByTagName("nom"); for (i=0;i<listeElements.length;i++) { sortieXML=sortieXML + listeElements[i].childNodes[0].nodeValue + " "; } document.getElementById("Contenu").innerHTML=sortieXML; } Reponses XML

29 Ajax29 A. Obaid - Programmation web (INF2005) Produire des données XML l Le serveur produit du contenu XML l Le client extrait les données qui l'intéressent <?php header("Content-Type: text/xml"); echo " \n"; $fleurs=array("Anemones", "BoutonsdOr", "Chevrefeuille", "Coquelicots", "Crocus", "Jacinthes", "Jonquilles", "Marguerite", "Mimosa", "Narcisse", "Orchidees", "Primeveres", "Tulip es", "Violettes", "Zinnia"); echo " \n"; foreach ($fleurs as $f) { echo " "; echo $f; echo " \n"; } echo " "; ?> fleurs.php

30 Ajax30 A. Obaid - Programmation web (INF2005) Recevoir des données XML img { width: 100px;} var cimages=new Array(); cimages["Primeveres"]="primevere.jpg"; cimages["Jonquilles"]="jonquille.jpg"; cimages["Narcisse"]="narcisse.jpg"; cimages["Tulipes"]="tulipe.jpg"; cimages["Jacinthes"]="jacinthe.jpg"; cimages["Crocus"]="crocus.jpg"; … var lesFleurs; function cherche() { var requete = new XMLHttpRequest(); requete.onreadystatechange = function(){ if(requete.readyState==4 && requete.status==200) { xmlDoc = requete.responseXML; lesFleurs = xmlDoc.getElementsByTagName("fleur"); rangerFleurs(); }} fleurs.html

31 Ajax31 A. Obaid - Programmation web (INF2005) Recevoir des données XML requete.open("GET", "fleurs.php", true); requete.send(null); } function rangerFleurs(){ var listeFleurs ; listeFleurs=" " ; var n, i=1; for (n = 0; n < lesFleurs.length; n++ ) { var uneFleur = lesFleurs[n].firstChild.nodeValue; var photo="photos/"+cimages[uneFleur]; listeFleurs += " " + uneFleur + " "+ " "; if (i%4==0) listeFleurs+= " "; i++; } listeFleurs = listeFleurs + " " ; document.getElementById("conteneur").innerHTML=listeFleurs; } … fleurs.html

32 Ajax32 A. Obaid - Programmation web (INF2005) Invocation par saisie partielle l On peut activer la recherche dans un document XML en utilisant une partie d'un nom –Comme Google suggest l On utilise l'événement on keyUp –Des qu'on entre un caractère on récupère le contenu courant d'un champ Nom:

33 Ajax33 A. Obaid - Programmation web (INF2005) Récupération de données l Pour retrouver les éléments sur la base d'un contenu partiel dans le serveur (PHP) on utilise la méthode substr() –Pour retrouve un donne partielle fournie par le client dans une valeurs. if(substr($valeur,0, strlen($donnee))==$donnee) { … }

34 Ajax34 A. Obaid - Programmation web (INF2005) Exemple l Le client émet une donnée partielle (de noms de fleurs) et attend les résultats de manière asynchrone. l Le serveur émet les noms de fleurs qui commencent par cette donnée partielle l Le client affiche ces fleurs et les images qui leur sont associées. fleurs1.html fleurs1.php