5 Ajax

ASYNCHRONOUS JAVASCRIPT
AND XML
(CONCEPTION ET DVELOPPEMENT
D APPLICATIONS WEB RICHES)

LI ONEL MDI NI
SEPTEMBRE- DCEMBRE 201 2
MIF13
Programmation Web
Plan du cours
Introduction et rappels JavaScript
Programmation XML en JavaScript
Retour sur lAPI DOM (Document Object Model)
Utilisation du DOM XML en JavaScript
Asynchronous Javascript And XML (AJAX)
Mcanismes de requtes asynchrones
Composants dune application
Quelques patterns de conception en AJAX
Outils de conception et de dveloppement
JavaScript avanc
Quelques exemples de fonctionnalits HTML5
Conclusion
Introduction
Objectif : concevoir des applications Web riches
Web-based
Paradigme client-serveur, HTTP
Programmation ct serveur et ct client
Exprience utilisateur proche des applications natives
Interface utilisateur fluide, ergonomique, dynamique
Traitement de linterface ct client (JavaScript, CSS , DOM)
changes client-serveur asynchrones (AJAX)
Logique mtier complexe
Outils volus de modlisation, conception, dveloppement
IDE, POO, UML, design patterns, mthodes agiles, XP
O placer la logique mtier ? La couche donnes ?
Rappels JavaScript / ECMAScript
Loffre ct client (rappel)
Moteur de rendu : cf. cours 2
Moteur de scripting :
Version de base : ECMAScript-262 (1999)
Plusieurs versions dcoulant de cette spcification
3 (1999), 4 (abandonn), 5 (2009), Harmony (work in progress)
Chaque moteur implmente une version diffrente du langage :
http://en.wikipedia.org/wiki/JavaScript#Versions
JavaScript 2.0 sera totalement compatible avec ECMAScript Harmony
Moteurs JavaScript (~1.8)
SpiderMonkey (FireFox), V8 (Chrome), Nitro (Safari) : ECMAScript 5
Moteur JScript (9.0) implment dans :
Trident (MicroSoft IE) : ECMAScript 5
Caractristiques
Interprt
Fonctionnel
Orient prototype
object-based plutt qu object-oriented
Typage dynamique : types associs aux instances et non aux classes
vnementiel
Mcanismes de callback
Pattern observer : eventListener
Fonctionnalits
Reflection
E4X : ECMAScript for XML (ECMA-357)
JSON

Programmation oriente prototype
POO sans classe : on ne manipule que des objets
Objets reprsents sous forme de dictionnaires (tableaux
associatifs)
Proprits
Pas de distinction entre les proprits (attributs/mthodes) d'un objet
On peut remplacer le contenu des proprits et en ajouter d'autres
Rutilisation des comportements (hritage)
se fait en clonant les objets existants, qui servent de prototypes
Sources
http://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_proto
type
http://en.wikipedia.org/wiki/Prototype-based_programming
Programmation oriente prototype
Prototype : objet partir duquel on cre de nouveaux objets
Exemple de code
// Example of true prototypal inheritance style in JavaScript.
// "ex nihilo" object creation using the literal object notation {}.

var foo = {name: "foo", one: 1, two: 2};
var bar = {three: 3};

// For the sake of simplicity, let us pretend that the following line works
regardless of the engine used:
// bar.__proto__ = foo;
// bar.[[ prototype ]] = foo // foo is now the prototype of bar.
bar = Object.create( foo ); // JS 1.8.5

// If we try to access foo's properties from bar from now on, we'll succeed.
bar.one // Resolves to 1.

// The child object's properties are also accessible.
bar.three // Resolves to 3.

// Own properties shadow prototype properties
bar.name = "bar";
foo.name // unaffected, resolves to "foo"
bar.name // Resolves to "bar

Source : http://en.wikipedia.org/wiki/Prototype-based_programming
}
Comment programmer proprement en orient-
objet
Plutt object-based qu object-oriented
Pour programmer en objet, il faut simuler des objets
Crer des constructeurs
Encapsuler les donnes (avec this )
Utiliser des inner functions lintrieur du constructeur
Exemple
http://www.sitepoint.com/article/oriented-programming-1/
Fonctions de rappel (callback)
Dfinition
Fonction qui est passe en paramtre une autre fonction afin que
cette dernire puisse en faire usage
Exemple : soient une fonction A et une fonction B
Lors de lappel de A, on lui passe en paramtre la fonction B : A(B)
Lorsque A sexcutera, elle pourra excuter la fonction B
Intrt : faire excuter du code
Sans savoir ce quil va faire (dfini par un autre programmeur)
En suivant une interface de programmation qui dfinit
Le nombre et le type des paramtres en entre
Le type de la valeur en sortie
Source :
http://www.epershand.net/developpement/algorithmie/explication-utilite-
fonctions-callback
Fonctions de rappel (callback)
La fonction qui reoit une callback en paramtre doit respecter
son interface
fonctionNormale(fonctionCallBack) { fonctionCallback(argument); }
2 syntaxes pour le passage dune fonction callback en argument
dune autre fonction
Sans paramtre : directement le nom de la fonction
fonctionNormale(fonctionCallback);
Avec paramtre : encapsulation dans une fonction anonyme
fonctionNormale(function() { fonctionCallback(arg1); });
Programmation vnementielle
Deux processus en parallle
Principale : droulement des traitements et association des
vnements des fonctions de callback
Callbacks : rcuprent et traitent les vnements
Deux syntaxes
DOM 0 : attributs HTML / proprits JavaScript spcifiques
onclick, onload
(http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.3)
DOM 2 : ajout deventListeners en JavaScript
monElement.addEventListener("click", maFonctionCallback, false);
Remarques :
Le troisime paramtre indique le type de propagation dans larbre DOM
Internet Explorer utilise la mthode attachEvent() au lieu de
addEventListener()
Source : http://www.alsacreations.com/article/lire/578-La-gestion-des-evenements-en-JavaScript.html
Programmation vnementielle
Lobjet Event
Dnote un changement dtat de lenvironnement
Peut tre provoqu par lutilisateur ou par lapplication
Peut tre intercept laide de code JavaScript
Possde un flux dvnement : propagation dans larbre DOM
Capture : du nud Document au nud vis par lvnement
Cible : sur le nud vis
Bouillonnement (bubling) : remonte jusquau nud document
Principales proprits
type : type de lvnement ("click", "load", "mouseover")
target : lment cible (lment a pour un lien cliqu)
stopPropagation : arrte le flux dun vnement
preventDefault : empche le comportement par dfaut (navigation quand
un lien est cliqu)
Source : http://www.alsacreations.com/article/lire/578-La-gestion-des-evenements-en-JavaScript.html
Outils de programmation avec XML
Dfinitions
Quest-ce quun parser ?
Un module logiciel [] utilis pour lire les documents XML et
pour accder leur contenu et leur structure.
Quest-ce quune application ?
On suppose qu'un processeur XML effectue son travail pour le
compte d'un autre module, appel l'application.

http://babel.alis.com/web_ml/xml/REC-xml.fr.html#dt-xml-proc
Outils de programmation avec XML
Communications entre parsers et applications
Rappel : Application Programming Interface
Outils
Protocole de communication
Schma des changes de donnes

Document
change
de
donnes Parser API Application
<?xml version
<!DOCTYPE Doc
<Document>
<Element>
Contenu
</Element>
</Document>
Donnes
Requtes
Rponses
Erreurs
LAPI DOM (Document Object Model)
Gnralits
Modle objet de document
Motivations
Rendre les applications W3 dynamiques
Accder aux documents HTML et XML depuis un langage de
programmation
Utilisations courantes
Intgr aux navigateurs
Utilis en programmation comme API XML
Origine : DOM working group (W3C)
Dbut : 1997 ; fin :
But : standardiser les tentatives existantes
Principes fondamentaux
Reprsentation arborescente dun document
Tout le document est charg en mmoire
Navigation dans la structure arborescente
Reprsentation des nuds par des interfaces
Proprits
Mthodes
Recommandations sous forme de niveaux
Niveau 0 : avant
Niveau 1 : octobre 1998
Niveau 2 : depuis novembre 2000
Niveau 3 : depuis janvier 2004
Fonctionnalits
Interfaces

DOM Core :

DOM XML :

DOMImplementation NodeList Node NamedNodeMap
DocumentFragment Document Element Attr CharacterData
Text Comment
Node
DocumentType Entity EntityReference ProcessingInstruction Notation
Text
CDATASection
Interfaces DOM (Core et XML) les plus utilises
Node : tout type de nud de larbre DOM
Constantes
Tous les types de nuds dfinis (exemple : node.ELEMENT_NODE)
Proprits
nodeName, nodeType, NodeValue, ChildNodes, textContent
Mthodes
insertBefore(), replaceChild(), removeChild(), appendChild(),
cloneNode()
NodeList : comme son nom lindique
Proprits : length, item(i)
Document : le nud racine de larbre DOM
Drive de Node
Proprits
doctype, documentElement, encoding
Mthodes
createElement(name), createTextNode(), createAttribute(name),
getElementById(id), getElementsByTagName(name)
DocumentFragment : partie dun document ; cf. Node
Element : un lment, au sens HTML ou XML
Proprit : tagName
Mthodes
getAttribute(name), setAttribute(name, value), hasAttribute(name),
getAttributeNode(name), setAttributeNode(node),
removeAttribute(name), removeAttributeNode(node),
Attr : un attribut
Proprits : name, value, ownerElement
Text : nud textuel (sous-nud dun lment)
Proprits
data, length (hrites de CharacterData)
Mthodes
appendData(), insertData(), deleteData(), replaceData(),
substringData() (hrites de CharacterData)
replaceWholeText()

Hirarchisation des interfaces dun document XML
Dplacement
dans une
arborescence
DOM
(interfaces du
module Core)
parentNode
previousSibling
Node
childNodes
firstChild
item(0)
lastChild
nextSibling
item(0)
item(Node.childNodes.length - 1)
Conclusion sur le DOM
Utilisation du DOM XML en JavaScript
Utilisation directe des proprits
DOM XML relativement standardis sur les navigateurs rcents
Exemple : document.getElementById()
En revanche, DOM HTML plus dpendant du navigateur
Exemple : monElement.innerHTML += ;
ninterprtait pas le nouveau code HTML sous IE 6 et 7
Rfrences sur le DOM
http://www.w3.org/DOM/
http://www.w3schools.com/dom/
Composants dune application Web classique
Ct serveur
Contrleur gnral de lapplication (index.jsp)
Ressources statiques
Modle de document, bibliothques de scripts, feuilles de style
Traitements dynamiques des donnes (couche mtier)
Composition dynamique de linterface (couche vue)
Ct client
Gestion des vnements utilisateur
H
T
T
P
,

(
X
)
H
T
M
L

Composants dune application Web AJAX
Ct serveur
Contrleur gnral de lapplication (index.php)
Ressources statiques
Modle de document, bibliothques de scripts, feuilles de style
Traitements dynamiques des donnes (couche mtier)
Ct client
Contrleurs dlgus relatifs un type de vue
Gestion des vnements utilisateur
Traitement des donnes reues (couche mtier)
H
T
T
P
,

X
M
L
,

J
S
O
N

Gnralits sur AJAX
Applications web avec interface utilisateur
Dporter un maximum de code sur le client
Rduction des ressources consommes ct serveur
Rduction de la bande passante rseau
Applications Web AJAX les plus connues
Google (Mail, Map, Earth)
Suggestions automatiques
Traitement de texte

Exemple
http://www.standards-schmandards.com/exhibits/ajax/
Fonctionnement
Requte asynchrone au serveur dans une fonction JavaScript
(dclenche par un vnement quelconque)
Transfert asynchrone de donnes en XML
Traitement dynamique ct client
Affichage (inclusion au document HTML, transformation XSLT)
Logique applicative (fonctions JavaScript ddies)
Spcificit de la technologie AJAX
Requte asynchrone sur un document XML via un
Objet XMLHttpRequest (Mozilla)
Contrle ActiveX XMLHTTP (IE)
Fonctionnement
tapes dune communication AJAX ct client
Envoi de la requte
Crer un objet requte
Spcifier les lments de la requte
URL, mthode , headers HTTP, paramtres
Lui associer un gestionnaire dvnement
Lenvoyer
Rception de la rponse
chaque changement dtat de la requte, tester si ltat est
ready
Traiter les donnes reues
Ajout linterface, transformation XSL
Fonctionnement
tapes dune communication AJAX ct serveur
Que doit faire un serveur Web la rception dune requte
asynchrone AJAX ?
Exemple de code : cration dun objet requte
var req = null;

function getRequest()
{
if (window.XMLHttpRequest)
{
req = new XMLHttpRequest();
}
else if (typeof ActiveXObject != "undefined")
{
req=new ActiveXObject("Microsoft.XMLHTTP");
}
return req;
}
Safari / Mozilla

Internet Explorer
Exemple de code : chargement asynchrone
function GetDataUsingAJAX (HttpMethod, url, params, elt)
{
if(req != null)
{
// mthode avec paramtres
req.onreadystatechange = function() {stateChange(elt)};
// mthode sans paramtre
// req.onreadystatechange = stateChange;

req.open(HttpMethod, url, true);
req.setRequestHeader("Accept", "application/xml");
req.send(params);
}
}
Association
dune fonction
de callback
aux
changements
dtat de la
rponse
Exemple de code : gestion de ltat
function stateChange (elt)
{
if(req.readyState == 4) {
if (req.responseXML != null) {
var docXML= req.responseXML;
} else {
var docXML= req.responseText;
docXML=parseFromString(docXML);
}
var docXMLresult = traiteXML(docXML);
var str = (new XMLSerializer()).serializeToString(docXMLresult);
document.getElementById(elt).innerHTML += str;
}
}
READY_STATE_COMPLETE
Exemple de code : transformation XSLT
//Aprs chargement asynchrone des documents XML et XSLT
function transform XSLT (XMLDoc, XSLDoc, id)
{
if(XMLDoc == null || XSLDoc == null) {return;}
try {
if (window.ActiveXObject)
{
var target = document.getElementById(id);
target.innerHTML = xml.transformNode(xsl);
}

Internet Explorer
Exemple de code : transformation XSLT
} else if (window.XSLTProcessor) {
var fragment;
var xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
fragment = xsltProcessor.transformToFragment(xml, document);
var target = document.getElementById(id);

target.appendChild(fragment);
}
} catch (e) {
return e;
}
}
Safari / Mozilla
Implmentation de la logique applicative
Programmation dun ensemble de fonctions JavaScript
Rcriture de fonctionnalits existantes
Mlange de la logique mtier et des fonctionnalits techniques
Pas forcment lpreuve des changements technologiques
Rutilisabilit moyenne
Code parfois un peu fouillis
Utiliser / sapproprier des outils existants
Langages / EDI spcifiques (ou plugins de votre EDI prfr)
Lirairies / frameworks open source
Standardisation de la communication avec les langages de
programmation ct serveur : JSON
Spcification lie ECMAScript RFC 4627
Implmente par tous les navigateurs
Permet de srialiser des types de donnes (alternative XML)
Dfinit des types de donnes de faon simple
Indpendant du langage de programmation utilis
Permet les changes de donnes entre serveur et client
Syntaxe : des inclusions
dobjets sous forme dune liste de membres
{ nommembre1 : valmembre1, nommembre2: valmembre2, }
de tableaux sous forme dune liste de valeurs
[ valeur1, valeur2, valeur3, ]
Exemple de fichier
au format JSON :

Equivalence en XML :
Source :
http://www.xul.fr/ajax-format-json.html
{ "menu": "Fichier", "commandes":
[ { "title": "Nouveau",
"action":"CreateDoc" }, {
"title": "Ouvrir", "action":
"OpenDoc" }, { "title": "Fermer",
"action": "CloseDoc" } ] }
<?xml version="1.0" ?>
<root>
<menu>Fichier</menu>
<commands>
<item>
<title>Nouveau</value>
<action>CreateDoc</action>
</item>
<item>
<title>Ouvrir</value>
<action>OpenDoc</action>
</item>
<item>
<title>Fermer</value>
<action>CloseDoc</action>
</item>
</commands>
</root>
Utilisation ct client :

Utilisation ct serveur : librairies ad hoc
req.open("GET", "fichier.json", true); // requte

var doc = eval('(' + req.responseText + ')'); // rcupration

var nomMenu = document.getElementById('jsmenu'); // recherche
nomMenu.value = doc.menu.value; // assignation

doc.commands[0].title // lire la valeur "title" dans le tableau
doc.commands[0].action // lire la valeur "action" dans le tableau
Quelques rgles de conception en AJAX
Utiliser des design patterns
Adaptateur
Le plus utilis
Testez la fonctionnalit utiliser, pas le navigateur
MVC
De prfrence type 2 (avec contrleurs dlgus)
Isoler les parties du modle
Rpartir les traitements de chaque partie entre serveur et client
Indiquer la vue comment restituer les objets du modle
Observateur
Permet de dfinir un modle vnementiel
Si celui de JavaScript est insuffisant
Il en existe plusieurs dans des librairies open source (W3C)

Outils de conception et de dveloppement
Bibliothques
Ensembles de fonctions JavaScript ralisant des traitements
spcifiques
Peuvent tre rutilises dans des applications
Frameworks AJAX
Programmation dans un autre langage
Gnration du code JavaScript
Mcanismes de communication standard entre client et serveur
Rfrence : http://www.ajaxpatterns.org/
AJAX a aussi ses inconvnients
Toute une application dans la mme page
Bouton Back inutilisable
Dfinition de bookmarks sur une vue particulire impossible
Gnration dynamique des contenus
Indexation par des moteurs de recherche impossible
Tlchargement du code applicatif sur le client
Temps de latence importants au lancement de lapplication
Ncessite davoir activ JavaScript
Prvoir une solution de repli acceptable lorsquil est dsactiv
Complexit des dveloppements
Appropriation et utilisation des diffrentes technos parfois coteuse

Source : http://dico.developpez.com/html/1710-Internet-Ajax-
Javascript-Asynchrone-et-XML.php
Scurit
Dporter de la logique applicative sur le client prsente des
risques
Remarque
Lenvoi dune requte asynchrone XHR un autre serveur que celui
ayant dlivr le script est impossible (en principe)
Types dattaques
Usurpation de session/didentit :
on ne peut jamais tre sr que le client est celui quil prtend tre
la partie applicative tournant sur le client est-elle rellement celle
envoye par le serveur ?
Double validation (mots de passe)
Scurit
Types dattaques
Cross-site scripting (XSS)
http://cwe.mitre.org/top25/index.html#CWE-79
https://www.owasp.org/index.php/XSS
violation de la same-origin policy
excution de scripts malicieux dans le contexte dun site trust
exemple: injection de scripts dans les commentaires des forums
Revenir au HTML de base pour les donnes sensibles
Vrifier le contenu saisi par les utilisateurs
Cross-site request forgery (CSRF)
http://cwe.mitre.org/top25/index.html#CWE-352
https://www.owasp.org/index.php/CSRF
utiliser lauthentification dun utilisateur pour raliser des actions
son insu
souvent permise par lauthentification par cookies
Utiliser des champs hidden ou len-tte HTTP Referer
JavaScript avanc
Fonctionnalits en lien avec la spcification HTML5
Philosophie
Rapprocher les fonctionnements des navigateurs de ceux des OS
Exemples de fonctionnalits
Slecteurs CSS : accs standardis aux contenus de la page
Workers : threads
WebSockets : streaming, server push, connexion avec dautres clients (P2P)
WebStorage : mulation BD pour stockage des donnes de session
(sessionStorage) ou dune application (localStorage)
GeoLocation
DragnDrop
Implmentations variables selon les moteurs/navigateurs
Utilisables travers des bibliothques (Comet)
plus de dtails : http://blog.xebia.fr/2010/03/18/html5-les-api-
javascript/
Conclusion
Quelques rgles pour dvelopper une application
Web riche
Outils de dveloppement
Utilisez les ressources votre disposition
Choisissez une bibliothque aussi standard que possible
Il existe aussi des feuilles de style CSS open source
Exemple : http://www.oswd.org/
Vrifiez la compatibilit avec les navigateurs viss
Compatibilit avec les navigateurs
Testez la fonctionnalit utiliser, pas le navigateur
Utilisez des faades aussi souvent que possible
Restez calmes : http://webilus.com/tableau/repartition-du-
temps-passe-pour-un-webdesign-moderne

Conclusion
De plus en plus dapplications Web riches
Charge rpartie entre client et serveur
Outils de conception et de dveloppement matures
Bonne ergonomie grce aux technologies CSS, JavaScript
Standardisation
Indpendance vis--vis de lOS
Ne correspond pas aux stratgies des vendeurs dOS ou de logiciels
Disponibles sur Internet
Indpendance vis--vis de la machine utilise

Perspectives
Quelles applications Web pour demain ?
Deux types dapplications Web
RIA : Rich Internet Application
Sexcute dans un navigateur
Doit tre compatible avec une majorit de navigateurs
RDA : Rich Desktop Application
Sexcute dans un complment install sur le poste de travail
Microsoft SilverLight
Adobe AIR
Moins de restrictions de scurit
Ne pas perdre de vue larrive de linformatique ubiquitaire
PDA, Smartphones, connexions par rseaux GSM
Ressources client rduites : matrielles et logicielles
Fonctionnalits et usages spcifiques : contextualisation,
golocalisation
Quelques rfrences
Spcifications
En rgle gnrale, la vrit est ici : http://www.w3.org
Sauf quand elle est ailleurs :
http://www.ecmascript.org/
https://developer.mozilla.org/fr, http://xulplanet.com/references/objref/
http://msdn.microsoft.com/en-us/library/hbxc2t98(VS.85).aspx
Tutoriels
XPath : http://www.zvon.org/xxl/XPathTutorial/General_fre/examples.html
XSL : http://www.w3schools.com/xsl/
DOM : http://www.w3schools.com/dom/
AJAX : https://developer.mozilla.org/fr/AJAX (sur Mozilla)
JSON : http://www.xul.fr/ajax-format-json.html
Rgles ergonomiques :
http://webilus.com/illustration/10-astcues-pour-ameliorer-les-contenus-de-vos-sites-
internet
Tendances et enjeux :
http://nauges.typepad.com/my_weblog/2008/09/firefox-chrome-safari-et-internet-
explorer-quatre-strat%C3%A9gies.html
Quelques rfrences
Ressources
Une liste de frameworks : http://www.ajaxprojects.com/
Une liste de plein de choses : http://ajaxpatterns.org/
En particulier, quelques outils de conception et de
dveloppement
Frameworks
openAjax (IBM) : Dojo
Ruby / Ruby on Rails (RoR)
Plugins Eclipse : Rich Ajax Platform, Direct Web Remoting
PHP : http://ajaxpatterns.org/PHP_Ajax_Frameworks
Librairies
Jquery : http://jquery.com/
Google Web Toolkit (AJAXSLT)

5 Ajax

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

5 Ajax

Transféré par

Droits d'auteur :

Formats disponibles

ASYNCHRONOUS JAVASCRIPT

Vous aimerez peut-être aussi