Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Programmation Web AJAX Thierry Hamon Bureau H202 Institut Galil´ ee - Universit

Programmation Web AJAX Thierry Hamon Bureau H202 Institut Galil´ ee - Universit´ e Paris 13 & LIMSI-CNRS hamon@limsi.fr http://perso.limsi.fr/hamon/Teaching/ProgWeb-20132014/ 1/25 Asynchronous Javascript And XML (AJAX) Introduction Introduit en 2005 par Jesse James Garrett Applications Web avec interface utilisateur D´ eportation d’une partie des traitements li´ es ` a l’interface du code cot´ e client R´ eduction des ressources utilis´ ees cot´ e serveur Economie de bande passante Exemple d’application Web AJAX : Google Mail, Maps, Earth, etc. Liste de suggestions automatiques Traitement de texte 2/25 Asynchronous Javascript And XML (AJAX) Introduction Regroupe un ensemble de technologie Web utilis´ ees conjointement (HTML, CSS, DOM, Javascript, XMLHttpRequest, XML) Permet la r´ ecup´ eration de donn´ ees sur le serveur de mani` ere asynchrone, sans interf´ erer avec les donn´ ees dans la page courante (utilisation de l’objet XMLHttpRequest) Utilise comme format d’´ echange, XML, des ﬁchiers textes et aussi JSON 3/25 Asynchronous Javascript And XML (AJAX) Introduction Deux composants (Application Web Classique) : Serveur (impl´ ementation JAVA ou PHP par exemple) Contrˆ ole g´ en´ eral de l’application Propose des ressources statiques : Mod` ele du document, biblioth` eque de scripts, feuilles de style Traitement dynamique des donn´ ees Composition dynamique de l’interface Client (impl´ ementation Javascript par exemple) Gestion des ´ ev` enements utilisateur Composition dynamique de l’interface Dialogue : HTTP, (X)HTML 4/25 Asynchronous Javascript And XML (AJAX) Introduction Deux composants (Application Web AJAX) : Serveur (impl´ ementation JAVA ou PHP par exemple) Contrˆ ole g´ en´ eral de l’application Propose des ressources statiques : Mod` ele du document, biblioth` eque de scripts, feuilles de style Traitement dynamique des donn´ ees Client (impl´ ementation Javascript par exemple) Contrˆ ole d´ el´ egu´ es en fonction du type de vue Gestion des ´ ev` enements utilisateur Composition dynamique de l’interface Traitement des donn´ ees re¸ cues Dialogue : HTTP, XML, JSON 4/25 Fonctionnement Sch´ ema Source : http://www.codeproject.com/KB/showcase/FarPointAJAX.aspx 5/25 Fonctionnement Illustration 1 Requˆ ete asynchrone au serveur dans une fonction JavaScript, d´ eclench´ ee par un ´ ev´ enement 2 Transfert asynchrone de donn´ ees en XML 3 Traitement dynamique du cˆ ot´ e client pour aﬃchage inclusion au document HTML, transformation XSLT, etc. 4 Requˆ ete asynchrone sur un document XML en utilisant un objet XMLHttpRequest (Mozilla) ou un contrˆ ole ActiveX XMLHTTP (IE) 5 Puis communication AJAX 6/25 Fonctionnement Communication AJAX Client : Envoi de la requˆ ete : Cr´ eation de l’objet requˆ ete (XMLHttpRequest) Sp´ eciﬁcation des ´ el´ ements de la requˆ ete (URL, m´ ethode, headers HTTP, param` etres) Association d’un gestionnaire d’´ ev´ enements Envoi de l’objet R´ eception de la r´ eponse : A chaque modiﬁcation de l’´ etat de la requˆ ete : tester si dans l’´ etat ready Traitement des donn´ ees re¸ cues (Ajout ` a l’interface, transformation XSL) Serveur : D´ eﬁnition des actions ` a r´ ealiser lors de la r´ eception d’une requˆ ete asynchrone AJAX 7/25 Objet XMLHttpRequest API utilis´ ee par JavaScript et d’autres langages de scripts pour transf´ erer des donn´ ees au format XML, texte ou JSON entre le client (navigateur) et le serveur Web de mani` ere asynchrone g´ en´ eralement. Mais possibilit´ e d’utilisation synchrone (mais est-ce vraiment utile ?) Cr´ eation de l’objet XMLHttpRequest : m´ ethode ActiveXObject (IE) et objet Javascript XMLHttpRequest 8/25 Exemples de code Cr´ eation de l’objet requˆ ete var req = n u l l ; f u n c t i o n getRequest () { i f ( window . XMLHttpRequest ) { req = new XMLHttpRequest () ; } else i f ( typeof ActiveXObject != "undefined") { req=new ActiveXObject ("Microsoft.XMLHTTP") ; } return req ; } 9/25 Exemples de code Chargement asychrone - simple f u n c t i o n GetDataUsingAJAX ( e l t ) { // elt : contenu d’un champs i f ( xmlHttp != n u l l ) { // Association de la fonction de gestion de l’´ etat var u r l="http :// www.univ -paris13.fr/monscript.php?elt=" + e l t ; // m´ ethode sans param` etre xmlHttp . onreadystatechange = stateChanged ; xmlHttp . open ( "GET" , url , true ) ; xmlHttp . send ( n u l l ) ; } } f u n c t i o n stateChanged () { i f ( xmlHttp . r e ad y St at e==4) { document . getElementById ( "txt" ) . innerHTML=xmlHttp . responseText ; } } 10/25 Exemples de code Chargement asychrone - XML f u n c t i o n GetDataUsingAJAX ( e l t ) { // elt : element XML du document i f ( req != n u l l ) { // Association de la fonction de gestion de l’´ etat var u r l="http :// www.univ -paris13.fr/monscript.php?elt=" + e l t ; // m´ ethode avec param` etres req . onreadystatechange = f u n c t i o n () {stateChange ( e l t ) }; req . open ( "GET" , url , true ) ; // pour les requetes XML req . setRequestHeader ( "Accept" , "application /xml" ) ; req . send ( n u l l ) ; } } 11/25 Exemples de code Gestion de l’´ etat - XML f u n c t i o n stateChange ( e l t ) { // elt : element XML du document i f ( req . r ead y St at e == 4) { // READY_STATE_COMPLETE i f ( req . responseXML != n u l l ) { var docXML= req . responseXML ; } e l s e { var docXML= req . responseText ; docXML=parseFromString (docXML) ; } var docXMLresult = traiteXML (docXML) ; var s t r = (new XMLSerializer () ) . s e r i a l i z e T o S t r i n g ( docXMLresult ) ; document . getElementById ( e l t ) . innerHTML += s t r ; } } 12/25 Propri´ et´ es de l’objet XMLHttpRequest Status Renvoie l’´ etat de la requˆ ete 200 : OK, page trouv´ ee 404 : page non trouv´ ee onreadystatechange Association d’une fonction recevant et traitant les donn´ ees retourn´ ees par le serveur apr` es une requˆ ete Utilisation d’un pointeur de fonction 13/25 Propri´ et´ es de l’objet XMLHttpRequest readyState Gestion de l’´ etat de la r´ eponse du serveur A chaque changement d’´ etat, la fonction associ´ ee ` a onreadystatechange est ex´ ecut´ ee Valeurs possibles : Etat Description 0 Requˆ ete non initialis´ ee 1 Connexion ´ etablie 2 Requˆ ete re¸ cue 3 R´ eponse en cours/Traitement de la requˆ ete en cours 4 R´ eponse envoy´ ee/Termin´ e 14/25 Propri´ et´ es de l’objet XMLHttpRequest responseXML Retourne un objet DOM du XML renvoy´ e par le serveur responseText Retourne une chaˆ ıne de caract` eres contenant les donn´ ees charg´ ees A utiliser si on ne souhaite pas traiter les donn´ ees en Javascript mais uniquement les aﬃcher (par exemple, donn´ ees HTML) 15/25 M´ ethode de l’objet XMLHttpRequest Utilisation de 2 m´ ethodes pour l’envoi open() – pr´ eparation de la requˆ ete 3 arguments : 1 M´ ethode utilis´ ee pour l’envoi de la requˆ ete (GET ou POST) 2 URL du script cot´ e server 3 bool´ een indiquant si la requˆ ete doit ˆ etre envoy´ ee de mani` ere asynchrone ou non send() – envoie de la requˆ ete au serveur 1 argument : 1 donn´ ees ` a passer au script cot´ e serveur m´ ethode GET : null m´ ethode POST : variable ou chaˆ ıne de caract` eres 16/25 JavaScript Object Notation (JSON) Format alternatif ` a XML Natif en Javascript Permet l’´ echange de donn´ ees entre client et serveur sans analyse (contrairement au XML). JSON vs. XML : JSON : facilit´ e de lecture et simplicit´ e de mise en oeuvre XML : extensible et reconnu dans tous les langages de programmation 17/25 Syntaxe El´ ements : Objet : contient des objets sous forme d’une liste de membres { nommembre1 : valmembre1 , nommembre2 : valmembre2 , . . . } tableaux sous forme d’une liste de valeurs [ valeur1 , valeur2 , . . . ] Variable scalaire de type Number, String ou Boolean Tableaux [ valeur1, valeur2, ...] (valeur : objet, tableau, etc.) Valeurs litt´ erales : null, false, true, valeur num´ erique, chaˆ ıne de caract` eres (entre ") Membre : "nom" : "valeur" 18/25 Exemple de ﬁchier JSON { "menu" : "Fichier" , "commandes" : [ { "title" : "Nouveau" , "action" : "CreateDoc" } , { "title" : "Ouvrir" , "action" : "OpenDoc" } , { "title" : "Fermer" , "action" : "CloseDoc" } ] } <?xml v e r s i o n="1.0" ?> <root> <menu >F i c h i e r</menu > <commands > <item> uploads/s3/ ajax.pdf