La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

11:04:45 Programmation Web 2012-2013 1 AJAX Jérôme CUTRONA

Présentations similaires


Présentation au sujet: "11:04:45 Programmation Web 2012-2013 1 AJAX Jérôme CUTRONA"— Transcription de la présentation:

1 11:04:45 Programmation Web AJAX Jérôme CUTRONA

2 211:04:45 Programmation Web AJAX ? AJAX : Asynchronous JavaScript And XML AJAX : Asynchronous JavaScript And XML (JavaScript asynchrone et XML) JavaScript : langage de script côté client (navigateur) JavaScript : langage de script côté client (navigateur) Asynchrone : par rapport au chargement de la page Web et des portions de page Web Asynchrone : par rapport au chargement de la page Web et des portions de page Web XML : langage à balises permettant, entre autre, de structurer des données XML : langage à balises permettant, entre autre, de structurer des données Permet, grâce à JavaScript, la récupération de données XML (mais aussi texte ou JSON) disponibles sur un serveur Web Permet, grâce à JavaScript, la récupération de données XML (mais aussi texte ou JSON) disponibles sur un serveur Web

3 311:04:45 Programmation Web AJAX ? N'est PAS une technologie N'est PAS une technologie N'est PAS un logiciel N'est PAS un logiciel N'est PAS un greffon (plug-in) N'est PAS un greffon (plug-in) N'est PAS un détergent N'est PAS un détergent C'est l'utilisation conjointe de : C'est l'utilisation conjointe de : HTML HTML CSS CSS DOM / JavaScript DOM / JavaScript XMLHttpRequest (JavaScript) XMLHttpRequest (JavaScript) XML (ou JSON) XML (ou JSON)

4 411:04:45 Programmation Web Asynchrone ? (une vision) Fonctionnement classique du Web : Fonctionnement classique du Web : Chargement d'une page Chargement d'une page Interaction de l'utilisateur (clic, sélection, formulaire, …) Interaction de l'utilisateur (clic, sélection, formulaire, …) Chargement d'une autre page Chargement d'une autre page Interaction de l'utilisateur (clic, sélection, formulaire, …) Interaction de l'utilisateur (clic, sélection, formulaire, …) Chargement d'une autre page Chargement d'une autre page Fonctionnement "AJAX" du Web : Fonctionnement "AJAX" du Web : Chargement d'une page Chargement d'une page Interaction de l'utilisateur (clic, sélection, formulaire, …) Interaction de l'utilisateur (clic, sélection, formulaire, …) Chargement d'une partie de page Chargement d'une partie de page Interaction de l'utilisateur (clic, sélection, formulaire, …) Interaction de l'utilisateur (clic, sélection, formulaire, …) Chargement d'une autre partie de page Chargement d'une autre partie de page......

5 511:04:45 Programmation Web Échanges client/serveur classiques Demande de la page Envoi de la page ClientServeur Traitement url Demande de la page Envoi de la page Traitement Demande de la page Envoi de la page Traitement clic clic

6 611:04:45 Programmation Web Échanges client/serveur en AJAX Demande de la page Envoi de la page ClientServeur Traitement url Demande de données Envoi des données Traitement Demande de données Envoi des données Traitement clic clic JavaScript JavaScript JavaScript JavaScript

7 711:04:45 Programmation Web XMLHTTPRequest Cœur d'AJAX Cœur d'AJAX Objet JavaScript Objet JavaScript En fait, objets JavaScript En fait, objets JavaScript Microsoft : Microsoft : ActiveXObject("Msxml2.XMLHTTP") ActiveXObject("Msxml2.XMLHTTP") ActiveXObject("Microsoft.XMLHTTP") ActiveXObject("Microsoft.XMLHTTP") Les autres : Les autres : XMLHttpRequest() XMLHttpRequest() Permet d'effectuer des requêtes HTTP et d'en récupérer le résultat Permet d'effectuer des requêtes HTTP et d'en récupérer le résultat

8 811:04:45 Programmation Web onreadystatechange Gestionnaire d'événements pour les changements d'état. Il faut assigner une fonction à cette propriété pour traiter sur les données renvoyées. readyState Statut de l'objet. responseText Réponse sous forme de chaîne de caractères. responseXML Réponse sous forme d'objet DOM. status Code numérique de réponse du serveur HTTP. statusText Message accompagnant le code de réponse. XMLHTTPRequest : propriétés

9 911:04:45 Programmation Web abort Abandonne la requête HTTP. getAllResponseHeaders Renvoie l'ensemble des entêtes HTTP de la réponse. getResponseHeader Renvoie la valeur d'un champ d'entête HTTP. open Prépare une requête HTTP en indiquant ses paramètres. send Effectue la requête HTTP, en envoyant les données. setRequestHeader Assigne une valeur à un champ d'entête HTTP. XMLHTTPRequest : méthodes

10 1011:04:45 Programmation Web Utilisation de XMLHTTPRequest 1.Instancier l'objet 2.Initialiser une requête Méthode, URL Méthode, URL Asynchrone ? Asynchrone ? 3.Associer une fonction au traitement du résultat de la requête 4.Effectuer la requête Envoyer des données ? Envoyer des données ? 5.Traiter le résultat Texte ? Texte ? XML / JSON ? XML / JSON ?

11 1111:04:45 Programmation Web Utilisation de XMLHTTPRequest 1.Instancier l'objet 2.Initialiser une requête Méthode, URL Méthode, URL Asynchrone ? Asynchrone ? 3.Associer une fonction au traitement du résultat de la requête 4.Effectuer la requête Envoyer des données ? Envoyer des données ? 5.Traiter le résultat Texte ? Texte ? XML / JSON ? XML / JSON ?

12 1211:04:45 Programmation Web Instancier XMLHTTPRequest function GetXmlHttpObject() { var objXMLHttp = null ; var objXMLHttp = null ; if (window.XMLHttpRequest) { // pour non-IE if (window.XMLHttpRequest) { // pour non-IE objXMLHttp = new XMLHttpRequest() ; objXMLHttp = new XMLHttpRequest() ; } else { else { if (window.ActiveXObject) { if (window.ActiveXObject) { try { // pour IE try { // pour IE objXMLHttp = objXMLHttp = new ActiveXObject("Msxml2.XMLHTTP") ; new ActiveXObject("Msxml2.XMLHTTP") ; } catch (e) { catch (e) { try { // pour une autre version de IE try { // pour une autre version de IE…

13 1311:04:45 Programmation Web Instancier XMLHTTPRequest … objXMLHttp = objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP") ; new ActiveXObject("Microsoft.XMLHTTP") ; } } catch (e) { catch (e) { window.alert("Votre navigateur ne prend window.alert("Votre navigateur ne prend pas en charge l'objet XMLHTTPRequest.") ; pas en charge l'objet XMLHTTPRequest.") ; } } return objXMLHttp ; return objXMLHttp ;} var xmlHttp = GetXmlHttpObject() ; Variable globale

14 1411:04:45 Programmation Web Utilisation de XMLHTTPRequest 1.Instancier l'objet 2.Initialiser une requête Méthode, URL Méthode, URL Asynchrone ? Asynchrone ? 3.Associer une fonction au traitement du résultat de la requête 4.Effectuer la requête Envoyer des données ? Envoyer des données ? 5.Traiter le résultat Texte ? Texte ? XML / JSON ? XML / JSON ?

15 1511:04:45 Programmation Web XMLHTTPRequest::open() Initialiser une requête HTTP Initialiser une requête HTTP open (method, URL [, asyncFlag[, userName [, password]]]) open (method, URL [, asyncFlag[, userName [, password]]]) Paramètres : Paramètres : method : "GET" ou "POST" (ou "HEAD" ) method : "GET" ou "POST" (ou "HEAD" ) URL : relative ou absolue URL : relative ou absolue asyncFlag : mode asynchrone ? true ou false asyncFlag : mode asynchrone ? true ou false userName : nom d'utilisateur userName : nom d'utilisateur password : mot de passe password : mot de passe Remarque : l'URL peut contenir des paramètres, test.php?id=12&a=salut Remarque : l'URL peut contenir des paramètres, test.php?id=12&a=salut

16 1611:04:45 Programmation Web Paramètres d'URL Caractères réservés des URL [/#?&:~…] non admissibles dans les paramètres encodage sous la forme %code_hexadécimal Caractères réservés des URL [/#?&:~…] non admissibles dans les paramètres encodage sous la forme %code_hexadécimal CaractèreCode SPACE%20 <%3C >%3E #%23 %25 {%7B }%7D |%7C \%5C ^%5E ~%7ECaractèreCode[%5B ]%5D `%60 ;%3B /%2F ?%3F =%3D &%26 $%24

17 1711:04:45 Programmation Web Paramètres d'URL en JavaScript Comment échapper une chaîne en JavaScript ? Comment échapper une chaîne en JavaScript ? Écrire une table de transcription (bof…) Écrire une table de transcription (bof…) Utiliser string escape(string) Utiliser string escape(string) escape("J'ai faim !") J%27ai%20faim%20%21 escape("J'ai faim !") J%27ai%20faim%20%21 Comment déséchapper une chaîne ? Comment déséchapper une chaîne ? Écrire une table de transcription inverse (bof…) Écrire une table de transcription inverse (bof…) Utiliser string unescape(string) Utiliser string unescape(string) unescape("J%27ai%20faim%20%21") J'ai faim ! unescape("J%27ai%20faim%20%21") J'ai faim ! var url="test.php?v="+escape(valeur_v) var url="test.php?v="+escape(valeur_v)

18 1811:04:45 Programmation Web Utilisation de XMLHTTPRequest 1.Instancier l'objet 2.Initialiser une requête Méthode, URL Méthode, URL Asynchrone ? Asynchrone ? 3.Associer une fonction au traitement du résultat de la requête 4.Effectuer la requête Envoyer des données ? Envoyer des données ? 5.Traiter le résultat Texte ? Texte ? XML / JSON ? XML / JSON ?

19 1911:04:45 Programmation Web Changements d'état de la requête Chaque changement d'état de la requête engendre un événement Chaque changement d'état de la requête engendre un événement L'état de la requête est reflété par l'état de l'objet XMLHTTPRequest : propriété readyState L'état de la requête est reflété par l'état de l'objet XMLHTTPRequest : propriété readyState 0 non initialisé 0 non initialisé 1 ouverture. La méthode open() a été appelée avec succès 1 ouverture. La méthode open() a été appelée avec succès 2 envoyé. La méthode send() a été appelée avec succès 2 envoyé. La méthode send() a été appelée avec succès 3 en train de recevoir. Des données sont en train d'être transférées, mais le transfert n'est pas terminé 3 en train de recevoir. Des données sont en train d'être transférées, mais le transfert n'est pas terminé 4 terminé. Les données sont chargées 4 terminé. Les données sont chargées

20 2011:04:45 Programmation Web Fonction de traitement du résultat Désigner la fonction qui sera lancée lors des changements d'état de la requête Désigner la fonction qui sera lancée lors des changements d'état de la requête Désigner la fonction qui sera lancée quand la requête sera terminée et donc que les données seront disponibles Désigner la fonction qui sera lancée quand la requête sera terminée et donc que les données seront disponibles XMLHTTPRequest.onreadystatechange XMLHTTPRequest.onreadystatechange function traiter() { if (xmlHttp.readyState == 4) window.alert('Données dispo !'); } xmlHttp. onreadystatechange=traiter; function traiter() { if (xmlHttp.readyState == 4) window.alert('Données dispo !'); } xmlHttp. onreadystatechange=traiter; Requêteterminée

21 2111:04:45 Programmation Web Utilisation de XMLHTTPRequest 1.Instancier l'objet 2.Initialiser une requête Méthode, URL Méthode, URL Asynchrone ? Asynchrone ? 3.Associer une fonction au traitement du résultat de la requête 4.Effectuer la requête Envoyer des données ? Envoyer des données ? 5.Traiter le résultat Texte ? Texte ? XML / JSON ? XML / JSON ?

22 2211:04:45 Programmation Web XMLHTTPRequest::send() Effectue la requête HTTP initialisée avec XMLHTTPRequest::open() Effectue la requête HTTP initialisée avec XMLHTTPRequest::open() Requête de type "GET" ou "HEAD" Requête de type "GET" ou "HEAD" Aucune donnée à envoyer Aucune donnée à envoyer xmlHttp.send(null) ; xmlHttp.send(null) ; Requête de type "POST" Requête de type "POST" données à envoyer données à envoyer xmlHttp.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded') ; xmlHttp.send("v=valeur&x=12"); xmlHttp.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded') ; xmlHttp.send("v=valeur&x=12");

23 2311:04:45 Programmation Web Utilisation de XMLHTTPRequest 1.Instancier l'objet 2.Initialiser une requête Méthode, URL Méthode, URL Asynchrone ? Asynchrone ? 3.Associer une fonction au traitement du résultat de la requête 4.Effectuer la requête Envoyer des données ? Envoyer des données ? 5.Traiter le résultat Texte ? Texte ? XML / JSON ? XML / JSON ?

24 2411:04:45 Programmation Web Traiter le résultat de la requête Traitement effectué dans la fonction associée au changement d'état de la requête quand l'état est 4 (requête terminée) Traitement effectué dans la fonction associée au changement d'état de la requête quand l'état est 4 (requête terminée) Le résultat peut se présenter sous 3 formes : Le résultat peut se présenter sous 3 formes : texte qui peut aussi être du code HTML texte qui peut aussi être du code HTML XML (http://dej/XML/COURS/introduction_XML.pdf) XML (http://dej/XML/COURS/introduction_XML.pdf) JSON JSON Le traitement consiste généralement en une modification de la page Web courante en utilisant JavaScript, le DOM et les CSS Le traitement consiste généralement en une modification de la page Web courante en utilisant JavaScript, le DOM et les CSS

25 2511:04:45 Programmation Web Récupérer le résultat de la requête Sous forme de texte Sous forme de texte texte brut texte brut texte contenant du code HTML texte contenant du code HTML XMLHTTPRequest.responseText XMLHTTPRequest.responseText Sous forme d'un objet DOM XML Sous forme d'un objet DOM XML XMLHTTPRequest.responseXML XMLHTTPRequest.responseXML Serveur : Content-Type: text/xml Serveur : Content-Type: text/xml Sous forme de données JSON Sous forme de données JSON texte contenant du code JSON texte contenant du code JSON eval(XMLHTTPRequest.responseText) eval(XMLHTTPRequest.responseText)

26 2611:04:45 Programmation Web Exploiter des données au format texte Texte brut Texte brut document.mon_formulaire.saisie.value = xmlHttp.responseText document.mon_formulaire.saisie.value = xmlHttp.responseText Texte contenant du code HTML Texte contenant du code HTML document.getElementById('txt').innerHTML = xmlHttp.responseText document.getElementById('txt').innerHTML = xmlHttp.responseText

27 2711:04:45 Programmation Web Réseau Saisie Serveur Exemple d'utilisation d'AJAX function showHint(str) { xmlHttp = GetXmlHttpObject() ; xmlHttp.onreadystatechange=stateChanged ; xmlHttp.open("GET",url,true) ; xmlHttp.send(null) ; } Traitement function stateChanged() { if (xmlHttp.readyState == 4) { if (xmlHttp.readyState == 4) { document.getElementById("txtHint").innerHTML document.getElementById("txtHint").innerHTML =xmlHttp.responseText ; } =xmlHttp.responseText ; }}

28 2811:04:45 Programmation Web Objet XML : Objet XML : getElementsByTagName(n) Collection de nœuds getElementsByTagName(n) Collection de nœuds Collection de nœuds : Collection de nœuds : length nombre d'éléments length nombre d'éléments [x] accès au x éme élément [x] accès au x éme élément Nœud : Nœud : firstChild Premier fils firstChild Premier fils childNodes Collection de fils childNodes Collection de fils hasChildNodes() Possède des fils ? hasChildNodes() Possède des fils ? nodeValue Valeur du nœud nodeValue Valeur du nœud nodeName Nom du nœud nodeName Nom du nœud getAttribute(a) Valeur de l'attribut getAttribute(a) Valeur de l'attribut Exploiter des données au format XML

29 2911:04:45 Programmation Web Introduction (ou rappel) XML Tarte aux pommes Tarte aux pommes Desjardin Desjardin Eric Eric Ça ressemble à du HTML où : Ça ressemble à du HTML où : on utilise ses propres balises on utilise ses propres balises la syntaxe est rigoureuse la syntaxe est rigoureuse Ce document ne peut pas safficher directement Ce document ne peut pas safficher directement On utilise des doutils pour manipuler linformation de ce document On utilise des doutils pour manipuler linformation de ce document

30 3011:04:45 Programmation Web Introduction (ou rappel) XML Normalisation de HTML en XML XHTML Normalisation de HTML en XML XHTML XML a été conçu pour décrire, stocker et échanger des données XML a été conçu pour décrire, stocker et échanger des données HTML Structure orientée présentation Structure orientée présentation Jeu de basiles fini et normalisé Jeu de basiles fini et normalisé Rendu graphique dépendant du navigateur Rendu graphique dépendant du navigateur Réutilisation limitée Réutilisation limitée Cible : Web Cible : Web Écriture laxiste Écriture laxiste Stockage : Fichier Stockage : FichierXML Toutes structures, données Toutes structures, données Jeu de balises extensible Jeu de balises extensible Pas de présentation directe (nécessite une feuille de style) Pas de présentation directe (nécessite une feuille de style) Exploitation sémantique Exploitation sémantique Cible : Web, PDF, échange,… Cible : Web, PDF, échange,… Rédaction de contenu Rédaction de contenu Stockage : Fichier, BD, natif Stockage : Fichier, BD, natif

31 3111:04:45 Programmation Web Introduction (ou rappel) XML Déclaration XML Déclaration XML Tout élément doit avoir une balise de fermeture Tout élément doit avoir une balise de fermeture C'est un paragraphe C'est un paragraphe Les noms d'éléments sont sensibles à la casse Les noms d'éléments sont sensibles à la casse et sont deux éléments différents et sont deux éléments différents Les éléments doivent être correctement appairés Les éléments doivent être correctement appairés Ceci est incorrect Ceci est incorrect Un élément racine qui enserre tous les autres il doit exister et est unique dans le document ex : … Un élément racine qui enserre tous les autres il doit exister et est unique dans le document ex : …

32 3211:04:45 Programmation Web Introduction (ou rappel) XML Ce qui est entre la balise ouvrante et la balise fermante représente le contenu de l'élément Ce qui est entre la balise ouvrante et la balise fermante représente le contenu de l'élément L'ordre des éléments est significatif même si ici Chiffres peut être vu comme un conteneur L'ordre des éléments est significatif même si ici Chiffres peut être vu comme un conteneur Un élément peut contenir plusieurs éléments identiques Un élément peut contenir plusieurs éléments identiques Un Un Deux Deux

33 3311:04:45 Programmation Web Introduction (ou rappel) XML Un élément peut être qualifié par des attributs Un élément peut être qualifié par des attributs Un attribut a un nom ET une valeur Un attribut a un nom ET une valeur L'ordre des attributs n'a pas d'importance L'ordre des attributs n'a pas d'importance Les valeurs des attributs doivent être encadrés par des guillemets ou des apostrophes Les valeurs des attributs doivent être encadrés par des guillemets ou des apostrophes Un élément ne peut pas avoir deux fois le même attribut Un élément ne peut pas avoir deux fois le même attribut verra verra

34 3411:04:45 Programmation Web Introduction (ou rappel) XML Le prologue d'un document XML contient tout ce qui précède l'élément racine et peut contenir : Le prologue d'un document XML contient tout ce qui précède l'élément racine et peut contenir : la déclaration XML la déclaration XML des instructions de traitement des instructions de traitement des commentaires des commentaires une clause DTD une clause DTD Instructions de traitement Instructions de traitement Association à une référence externe à la structure (DTD) Association à une référence externe à la structure (DTD)

35 3511:04:45 Programmation Web Introduction (ou rappel) XML Commentaires XML Commentaires XML Entités prédéfinies < > & " ' Entités prédéfinies < > & " ' Entités des caractères ne faisant pas partie du jeu utilisé Mise en œ vre => Mise en œuvre Entités des caractères ne faisant pas partie du jeu utilisé Mise en œ vre => Mise en œuvre Entités de texte définies dans la DTD ©right; Entités de texte définies dans la DTD ©right; Entité référence à des fichiers binaires Entité référence à des fichiers binaires

36 3611:04:45 Programmation Web Introduction (ou rappel) XML Noms des entités : Noms des entités : Peuvent contenir des chiffres, des lettres ou d'autres caractères Peuvent contenir des chiffres, des lettres ou d'autres caractères Ne peuvent PAS commencer par un chiffre ou un caractère de ponctuation Ne peuvent PAS commencer par un chiffre ou un caractère de ponctuation Ne peuvent PAS commencer par la chaîne xml (dans toutes les casses possibles) Ne peuvent PAS commencer par la chaîne xml (dans toutes les casses possibles) Ne peuvent PAS contenir des espaces Ne peuvent PAS contenir des espaces Ne doivent PAS contenir le caractère " : " qui est utilisé par les espaces de nom Ne doivent PAS contenir le caractère " : " qui est utilisé par les espaces de nom

37 3711:04:45 Programmation Web Exemple XML DOM Aquilon Aquilon 1 1 Bobo Bobo 3 3

38 11:04:45 Programmation Web Exemple XML DOM liste animalidani="AC001-03" noman visites Aquilon 1 animalidani="AC001-01" noman visites Bobo3 ¶·· ¶···· ¶···· ¶·· ¶···· ¶···· ¶····¶···· ¶·· Aquilon Aquilon 1 1 Bobo Bobo 3 3 38

39 11:04:45 Programmation Web Exemple XML DOM liste animalidani="AC001-03" noman visites Aquilon 1 animalidani="AC001-01" noman visites Bobo3 ¶·· ¶···· ¶···· ¶·· ¶···· ¶···· ¶····¶···· ¶·· 3939 xmlHttp.responseXML.getElementsByTagName( 'animal') 'animal') [0].getAttribute('idani').getElementsByTagName( 'noman ')[0].firstChild.nodeValue

40 4011:04:45Programmation Web JSON (JavaScript Object Notation) Format de structure de données Format de structure de données Utilise la syntaxe des objets JavaScript Utilise la syntaxe des objets JavaScript {"menu": {"id": "file", "value": "File" "popup": {"item": [ {"value": "New" }, {"value": "Open"}, {"value": "Close"}] }}} {"menu": {"id": "file", "value": "File" "popup": {"item": [ {"value": "New" }, {"value": "Open"}, {"value": "Close"}] }}} Équivalent XML

41 4111:04:45 Programmation Web JSON (JavaScript Object Notation) Deux structures : Deux structures : Objet Objet {} {} {chaîne : valeur} {chaîne : valeur} {chaîne : valeur, chaîne : valeur, …} {chaîne : valeur, chaîne : valeur, …} Tableau Tableau [] [] [valeur] [valeur] [valeur, valeur, …] [valeur, valeur, …] Valeur : Valeur : chaîne|nombre|objet|tableau|true|false|null chaîne|nombre|objet|tableau|true|false|null

42 4211:04:45 Programmation Web JSON (JavaScript Object Notation) object object {} {} { members } { members } members members pair pair pair, members pair, members pair pair string : value string : value array array [] [] [ elements ] [ elements ] elements elements value value value, elements value, elements value value string string number number object object array array true true false false null null string string "" "" " chars " " chars " chars chars char char char chars char chars char char any-Unicode-character- except-"-or-\-or- control-character any-Unicode-character- except-"-or-\-or- control-character \" \" \\ \\ \/ \/ \b \b \f \f \n \n \r \r \t \t \u four-hex-digits \u four-hex-digits

43 4311:04:45 Programmation Web JSON (JavaScript Object Notation) number number int int int frac int frac int exp int exp int frac exp int frac exp int int digit digit digit1-9 digits digit1-9 digits - digit - digit - digit1-9 digits - digit1-9 digits frac frac. digits. digits exp exp e digits e digits digits digits digit digit digits digit digit digits e e e+ e+ e- e- E E+ E+ E- E-

44 4411:04:45 Programmation Web JSON (JavaScript Object Notation)

45 4511:04:45 Programmation Web JSON (JavaScript Object Notation)

46 4611:04:45 Programmation Web JSON (JavaScript Object Notation)

47 4711:04:45 Programmation Web JSON (JavaScript Object Notation)

48 4811:04:45 Programmation Web Exploiter des données au format JSON Syntaxe des objets JavaScript Syntaxe des objets JavaScript Évaluer une chaîne contenant du code JSON Création d'un objet Évaluer une chaîne contenant du code JSON Création d'un objet var myObject = eval('('+myJSONtext+')'); var myObject = eval('('+myJSONtext+')'); Accès aux attributs de l'objet { "menu": { "id": "file", "value": "File" "popup": { "item": … myObject.menu.id 'file' Accès aux attributs de l'objet { "menu": { "id": "file", "value": "File" "popup": { "item": … myObject.menu.id 'file'

49 4911:04:45 Programmation Web JavaScript Objet avec prototype.js prototype.js est une bibliothèque JavaScript prototype.js est une bibliothèque JavaScript Écrite par Sam Stephenson Écrite par Sam Stephenson Orientée objet Orientée objet Nombreux tâches pénibles encapsulées Nombreux tâches pénibles encapsulées Encapsule AJAX de façon élégante Encapsule AJAX de façon élégante 1800 lignes / 43 Ko 1800 lignes / 43 Ko

50 5011:04:45 Programmation Web prototype.js

51 5111:04:45 prototype.js Fonctions utilitaires Fonctions utilitaires $("id") document.getElementById("id") $("id1", "id2", …) array(document.getElementById("id1"), document.getElementById("id2"), …) $("id") document.getElementById("id") $("id1", "id2", …) array(document.getElementById("id1"), document.getElementById("id2"), …) $F(id) document.getElementById("id").value $F(id) document.getElementById("id").value

52 5211:04:45 Programmation Web prototype.js Ajax.Request Ajax.Request Objet encapsulant l'utilisation habituelle d'AJAX Objet encapsulant l'utilisation habituelle d'AJAX new Ajax.Request( url, params ) url : l'url à interroger params : objet anonyme {method : 'post' |'get', parameters : param | data, onComplete : callback asynchronous : true | false} new Ajax.Request( url, params ) url : l'url à interroger params : objet anonyme {method : 'post' |'get', parameters : param | data, onComplete : callback asynchronous : true | false} callback (xmlHttp) callback (xmlHttp)

53 5311:04:45 Programmation Web Exemple prototype.js AJAX avec prototype.js AJAX avec prototype.js

Annonces Google