Problème à signaler:


Télécharger cours Programmation Web Avancée AJAX



★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:



Programmation Web Avancée AJAX

Thierry Hamon

Bureau H202 - Institut Galilée

Tél. : 33 1.48.38.35.53

Bureau 150 – LIM&BIO – EA 3969

Université Paris 13 - UFR Léonard de Vinci

74, rue Marcel Cachin, F-93017 Bobigny cedex

Tél. : 33 1.48.38.73.07, Fax. : 33 1.48.38.73.55

 

Introduit en 2005 par Jesse James Garrett

Applications Web avec interface utilisateur

Déportation d’une partie des traitements liés à l’interface du code coté client

Réduction des ressources utilisées coté serveur Economie de bande passante

Exemple d’application Web AJAX :

Google Mail, Maps, Earth, etc.

Liste de suggestions automatiques

Traitement de texte

 Regroupe un ensemble de technologie Web utilisées conjointement (HTML, CSS, DOM, Javascript, XMLHttpRequest, XML)

 Permet la récupération de données sur le serveur de manière asynchrone, sans interférer avec les données dans la page courante (utilisation de l’objet XMLHttpRequest)

 Utilise comme format d’échange, XML, des fichiers textes et aussi JSON

Deux composants (Application Web Classique) :

Serveur (implémentation JAVA ou PHP par exemple)

Contrôle général de l’application

Propose des ressources statiques : Modèle du document, bibliothèque de scripts, feuilles de style Traitement dynamique des données

Composition dynamique de l’interface

Client (implémentation Javascript par exemple)

Gestion des évènements utilisateur

Composition dynamique de l’interface

Dialogue : HTTP, (X)HTML

 

Deux composants (Application Web AJAX) :

Serveur (implémentation JAVA ou PHP par exemple)

Contrôle général de l’application

Propose des ressources statiques : Modèle du document, bibliothèque de scripts, feuilles de style Traitement dynamique des données

Client (implémentation Javascript par exemple)

Contrôle délégués en fonction du type de vue

Gestion des évènements utilisateur

Composition dynamique de l’interface Traitement des données rec¸ues

Dialogue : HTTP, XML, JSON

Schéma

 

Source: http:

 

Illustration

1   Requête asynchrone au serveur dans une fonction JavaScript, déclenchée par un événement

2   Transfert asynchrone de données en XML

3   Traitement dynamique du côté client pour affichage inclusion au document HTML, transformation XSLT, etc.

4   Requête asynchrone sur un document XML en utilisant un objet XMLHttpRequest (Mozilla) ou un contrôle ActiveX XMLHTTP (IE)

5   Puis communication AJAX

Communication AJAX Client :

Envoi de la requête :

Création de l’objet requête (XMLHttpRequest)

Spécification des éléments de la requête (URL, méthode, headers HTTP, paramètres)

Association d’un gestionnaire d’événements Envoi de l’objet

Réception de la réponse :

A chaque modification de l’état de la requête : tester si dans l’état ready

Traitement des données rec¸ues (Ajout à l’interface,

transformation XSL)

Communication AJAX

Serveur :

 Définition des actions à réaliser lors de la réception d’une requête asynchrone AJAX

 

Objet XMLHttpRequest

API utilisée par JavaScript et d’autres langages de scripts pour transférer des données au format XML, texte ou JSON entre le client (navigateur) et le serveur Web de manière asynchrone généralement. Mais possibilité d’utilisation synchrone



Création de l’objet XMLHttpRequest : méthode ActiveXObject

(IE) et objet Javascript XMLHttpRequest

création de l’objet requête

var req = null ; function getRequest ()

{ i f         ( window . XMLHttpRequest )

{

req = new XMLHttpRequest ( ) ;

}

        else      i f      ( typeof          ActiveXObject                   != ” undefined ”)

{ req=new ActiveXObject (” Microsoft .XMLHTTP” ) ;

}

        return      req ;

}

création de l’objet requête

function                  basicAjaxExample () {

var xmlHttp ; try {

            xmlHttp=new XMLHttpRequest ( ) ;            //       Firefox ,        Opera      8.0+ ,     S a f a r i

} catch ( e ) { try {

            xmlHttp=new               ActiveXObject (”Msxml2 .XMLHTTP” ) ;             //     IE      6.0+

} catch ( e ) { try {

                xmlHttp=new                 ActiveXObject (” Microsoft .XMLHTTP” ) ;               //     IE     5.5+

} catch ( e ) { a l e r t (”Your browser does not support AJAX! ” ) ; return f a l s e ;

}

}

}

}

Chargement asychrone - simple

function               GetDataUsingAJAX          ( req ,     e l t )

{

// e l t : contenu d ’un champs i f ( req != n u l l )

{

// Association de la fonction de gestion de l ’ état var u r l=” http ://www. univ?paris13 . f r / monscript . php? e l t=” + e l t ;

// méthode sans paramètre req . onreadystatechange = stateChange ; req . open (”GET” , url , true ) ; req . send ( n u l l ) ;

}

}

function               stateChanged ( req )

{ i f ( req . readyState==4) {

document . getElementById (” txt ” ) . innerHTML=req . responseText ; }

}

Chargement asychrone - XML

function               GetDataUsingAJAX          ( req ,     e l t )

{

// e l t : element XML du document i f ( req != n u l l )

{

// Association de la fonction de gestion de l ’ état var u r l=” http ://www. univ?paris13 . f r / monscript . php? e l t=” + e l t ;

// méthode avec paramètres req . onreadystatechange = function () {stateChange ( e l t )};



req . open (”GET” , url , true ) ; // pour l e s requetes XML req . setRequestHeader (”Accept” , ” a p p l i c a t i o n /xml” ) ; req . send ( n u l l ) ;

}

}

Gestion de l’état - XML

function              stateChange       ( e l t )

{ // e l t : element XML du document i f ( req . readyState == 4) { // READY STATE COMPLETE i f ( req . responseXML != n u l l ) { var docXML= req . responseXML ;

} else {

              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 ; }

}

Transformation XSLT

// Après chargement asynchrone des documents XML et XSLT function transform XSLT (XMLDoc, XSLDoc , id )

{ i f (XMLDoc == n u l l || XSLDoc == n u l l ) {return ;}

try {

// I n t e r n e t Explorer i f ( window . ActiveXObject )

{ var target = document . getElementById ( id ) ; target . innerHTML = xml . transformNode ( x s l ) ;

} else i f ( window . XSLTProcessor ) { // S a f a r i / Mozilla var fragment ;

var                      x s l t P r o c e s s o r = new XSLTProcessor ( ) ; x s l t P r o c e s s o r . importStylesheet ( x s l ) ;

fragment = x s l t P r o c e s s o r . transformToFragment (xml , document ) ; var target = document . getElementById ( id ) ; target . appendChild ( fragment ) ;

}

} catch ( e ) { return e ;

}

}

 

Status

Renvoie l’état de la requête

200 : OK, page trouvée 404 : page non trouvée

onreadystatechange

Association d’une fonction recevant et traitant les données retournées par le serveur après une requête

Utilisation d’un pointeur de fonction

readyState

Gestion de l’état de la réponse du serveur A chaque changement d’état, la fonction associée à onreadystatechange est exécutée

Valeurs possibles :

Etat

Description

0

Requête non initialisée

1

Connexion établie

2

Requête re¸cue

3

Réponse en cours/Traitement de la requête en cours

4

Réponse envoyée/Terminé



responseXML

Retourne un objet DOM du XML renvoyé par le serveur

responseText

Retourne une chaˆ?ne de caractères contenant les données chargées

A utiliser si on ne souhaite pas traiter les données en

Javascript mais uniquement les afficher (par exemple, données

HTML)

 

Méthode de l’objet XMLHttpRequest

Utilisation de 2 méthodes pour l’envoi

 open() – préparation de la requête 3 arguments :

1 Méthode utilisée pour l’envoi de la requête (GET ou POST) 2                        URL du script coté server

3      booléen indiquant si la requête doit être envoyée de manière asynchrone ou non

 send() – envoie de la requête au serveur 1 argument :

1 données à passer au script coté serveur méthode GET : null méthode POST : variable ou chaˆ?ne de caractères

JavaScript Object Notation (JSON)

Format alternatif à XML

Natif en Javascript

Permet l’échange de données entre client et serveur sans analyse (contrairement au XML).

JSON vs. XML :

JSON : facilité de lecture et simplicité de mise en oeuvre XML : extensible et reconnu dans tous les langages de programmation

Syntaxe

Eléments :

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érales : null, false, true, valeur numérique, chaˆ?ne de caractères (entre ")

Membre :

"nom" : "valeur"

Exemple de fichier JSON

                                                           <?xml           version=” 1.0 ” ?>

{

<root>

       ”menu” :     ” F i c h i e r ” ,

<menu>F i c h i e r</menu>

        ”commandes” :       [

<commands>

{

<item>

                     ” t i t l e ” :       ”Nouveau” ,

<t i t l e>Nouveau</ value>

” action ” : ”CreateDoc”

<action>CreateDoc</ action>

},

</item>

{

<item>

                     ” t i t l e ” :       ” Ouvrir ” ,

<t i t l e>Ouvrir</ value>

                     ” action ” :         ”OpenDoc”



<action>OpenDoc</ action>

},

</item>

{

<item>

                     ” t i t l e ” :       ”Fermer” ,

<t i t l e>Fermer</ value>

                     ” action ” :          ”CloseDoc”

<action>CloseDoc</ action>

}

</item>

]

</commands>

}

</ root>

Utilisation d’un fichier JSON

coté client

Récupération des données avec la méthode eval() et utilisation d’éléments et de la syntaxe Javascript :

req . open (”GET” , ” f i c h i e r . json ” , true ) ; // requête var doc = eval ( ’ ( ’ + req . responseText + ’ ) ’ ) ; // récupération

    var               nomMenu = document . getElementById ( ’ jsmenu ’ ) ;               //       recherche

        nomMenu. value = doc . menu . value ;                                                       //        as signa tion

doc . commands [ 0 ] . t i t l e // l e c t u r e de la valeur ” t i t l e ” dans l e tableau doc . commands [ 0 ] . action // l e c t u r e de la valeur ” action ” dans l e tableau Fichier :

{ ”menu” :         ” F i c h i e r ” ,

     ”commandes” :       [

     { ” t i t l e ” :        ”Nouveau” ,

” action ” : ”CreateDoc”

},

     { ” t i t l e ” :         ” Ouvrir ” ,

         ” action ” :         ”OpenDoc”

},

     { ” t i t l e ” :         ”Fermer” ,

         ” action ” :          ”CloseDoc”

}

]

}

Utilisation d’un fichier JSON

coté serveur

 Utilisation de librairie propres à chaque langage (voir ) : Java : .*

Perl : JSON

PHP : (interne en 5.2), json etc.

Avantages et inconvénients d’AJAX

Avantages :

plus interactivité au niveau du client réponse plus rapide réduction des transactions client/serveur (récupération des scripts et des feuilles de style une fois pour toute) séparation des méthodes pour la transmission de l’information et des formats utilisés pour représenter les informations Inconvénients :

Pas d’enregistrement dans l’historique du navigateur des pages modifiées dynamiquement

Solution en modifiant la partie ancre (#) de l’URL

Difficulté à bookmarker l’état particulier d’une page Pas d’indexation possible des pages par les moteurs de recherche

Si un navigateur ne supporte pas Javascript et AJAX, la page est inutilisable

Alternatives

 Flex et Flash : concurrents de AJAX

Mais possibilité de combiner leur utilisation voir Goowy (Bureau virtuel)



 YAML (YAML Ain’t Markup Language) : format d’échange basé sur l’utlisation de caractères spéciaux:

: & ! ? - --- [ ] *, etc.

Fichier JSON : contenu YAML valide (et non l’inverse), sauf les commentaires

Format YAML moins lisible que JSON (?)

 

Pour aller plus loin

Description d’AJAX :

Exemples et tutoriels du W3C:

Frameworks : voir openAjax (IBM) : Dojo

Ruby / Ruby on Rails (RoR)

Plugins Eclipse : Rich Ajax Platform, Direct Web Remoting

PHP : Bibliothèques :

SAJAX

Google Web Toolkit (AJAXSLT )

Article de Jesse James Garrett introduisant AJAX:

 



427