ASYNCHRONOUS JAVASCRIPT AND XML · Programmation XML en JavaScript Retour sur l’API DOM (Document...

ASYNCHRONOUS JAVASCRIPT AND XML

(CONCEPTION ET DÉVELOPPEMENT D’APPLICATIONS WEB RICHES)

L I O N E L M É D I N I O C T O B R E - D É C E M B R E 2 0 1 8

M1IF03 Conception d’applications Web

Plan du cours

Programmation XML en JavaScript Retour sur l’API DOM (Document Object Model)

Utilisation du DOM XML en JavaScript

Asynchronous Javascript And XML (AJAX) Mécanismes de requêtes asynchrones

Composants d’une application

Quelques patterns de conception en AJAX

Considérations de sécurité

Outils de conception et de développement jQuery

Conclusion

Introduction

Objectif : concevoir des applications Web « riches »

Web-based

Paradigme client-serveur, HTTP

Programmation côté serveur et côté client

Expérience utilisateur proche des applications natives

Interface utilisateur fluide, ergonomique, dynamique

Traitement de l’interface côté client (JavaScript, CSS , DOM)

Échanges client-serveur asynchrones (AJAX)

Logique métier complexe

Outils « évolués » de modélisation, conception, développement

IDE, POO, UML, design patterns, méthodes agiles, XP…

Où placer la logique métier ? La couche données ?

Outils de programmation avec XML

Définitions

Qu’est-ce qu’un parser ?

« Un module logiciel […] utilisé pour lire les documents XML et pour accéder à leur contenu et à leur structure. »

Qu’est-ce qu’une 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

http://babel.alis.com/web_ml/xml/REC-xml.fr.html







Outils de programmation avec XML

Communications entre parsers et applications

Rappel : Application Programming Interface

Outils

Protocole de communication

Schéma des échanges de données

Document

Échange

de

données Parser API Application

<?xml version

<!DOCTYPE Doc

<Document>

<Element>

Contenu

</Element>

</Document>

Données

Requêtes

Réponses

Erreurs

L’API DOM (Document Object Model)

Généralités

Modèle objet de document

Motivations

Rendre les applications W3 dynamiques

Accéder aux documents HTML et XML depuis un langage de programmation

Utilisations courantes

Intégré aux navigateurs

Utilisé en programmation comme API XML

Origine : DOM working group (W3C)

Début : 1997 ; fin : …

But : standardiser les tentatives existantes


Principes fondamentaux

Représentation arborescente d’un document

Tout le document est chargé en mémoire

Navigation dans la structure arborescente

Représentation des nœuds par des interfaces

Propriétés

Méthodes

Recommandations sous forme de niveaux

Niveau 0 : avant…

Niveau 1 : octobre 1998

Niveau 2 : depuis novembre 2000

Niveau 3 : depuis janvier 2004


Fonctionnalités


Interfaces

DOM Core :

DOM XML :

DOMImplementation NodeList Node NamedNodeMap

DocumentFragment Document Element AttrCharacterData

Text Comment

Node

DocumentType Entity EntityReference ProcessingInstructionNotation

Text

CDATASection


Interfaces DOM (Core et XML) les plus utilisées

Node : tout type de nœud de l’arbre DOM

Constantes Tous les types de nœuds définis (exemple : node.ELEMENT_NODE)

Propriétés nodeName, nodeType, NodeValue, ChildNodes, textContent

Méthodes insertBefore(), replaceChild(), removeChild(), appendChild(), cloneNode()

NodeList : comme son nom l’indique…

Propriétés : length, item(i)



Document : le nœud racine de l’arbre DOM

Dérive de Node

Propriétés doctype, documentElement, encoding

Méthodes createElement(name), createTextNode(), createAttribute(name), getElementById(id), getElementsByTagName(name)

DocumentFragment : partie d’un document ; cf. Node



Element : un élément, au sens HTML ou XML

Propriété : tagName

Méthodes getAttribute(name), setAttribute(name, value), hasAttribute(name), getAttributeNode(name), setAttributeNode(node), removeAttribute(name), removeAttributeNode(node),

Attr : un attribut…

Propriétés : name, value, ownerElement



Text : nœud textuel (sous-nœud d’un élément)

Propriétés data, length (héritées de CharacterData)

Méthodes appendData(), insertData(), deleteData(), replaceData(), substringData() (héritées de CharacterData) replaceWholeText()


Hiérarchisation des interfaces d’un document XML


Déplacement 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 propriétés

DOM XML relativement standardisé sur les navigateurs récents

Exemple : document.getElementById()

En revanche, DOM HTML plus dépendant du navigateur

Exemple : monElement.innerHTML += …; n’interprétait pas le nouveau code HTML sous IE 6 et 7

Références sur le DOM

http://www.w3.org/DOM/

http://www.w3schools.com/dom/

http://www.w3.org/DOM/

http://www.w3schools.com/dom/

Asynchronous Javascript And XML (AJAX)

Composants d’une application Web « classique » Côté serveur

Contrôleur général de l’application (index.jsp)

Ressources statiques

Modèle de document, bibliothèques de scripts, feuilles de style

Traitements dynamiques des données (couche métier)

Composition dynamique de l’interface (couche vue)

Côté client

Gestion des événements utilisateur


HT

TP

, (X)H

TM

L


Composants d’une application Web AJAX Côté serveur

Contrôleur général de l’application (index.php)

Ressources statiques

Modèle de document, bibliothèques de scripts, feuilles de style

Traitements dynamiques des données (couche métier)

Côté client

Contrôleurs délégués relatifs à un type de vue

Gestion des événements utilisateur

Traitement des données reçues (couche métier)


HT

TP

, XM

L, J

SO

N


Généralités sur AJAX

Applications web avec interface utilisateur

Déporter un maximum de code sur le client

Réduction des ressources consommées côté serveur

Réduction de la bande passante réseau

Applications Web AJAX les plus connues

Google (Mail, Map, Earth…)

Suggestions automatiques

Traitement de texte

…

Exemple

http://www.standards-schmandards.com/exhibits/ajax/





Fonctionnement

Requête asynchrone au serveur dans une fonction JavaScript (déclenchée par un événement quelconque)

Transfert asynchrone de données en XML

Traitement dynamique côté client

Affichage (inclusion au document HTML, transformation XSLT…)

Logique applicative (fonctions JavaScript dédiées)

Spécificité de la technologie AJAX

Requête asynchrone sur un document XML via un

Objet XMLHttpRequest (Mozilla)

Contrôle ActiveX XMLHTTP (IE)


Fonctionnement

Étapes d’une communication AJAX côté client

Envoi de la requête

Créer un objet requête

Spécifier les éléments de la requête

• URL, méthode , headers HTTP, paramètres

Lui associer un gestionnaire d’événement

L’envoyer

Réception de la réponse

À chaque changement d’état de la requête, tester si l’état est « ready »

Traiter les données reçues

• Ajout à l’interface, transformation XSL…


Fonctionnement

Étapes d’une communication AJAX côté serveur

Que doit faire un serveur Web à la réception d’une requête asynchrone AJAX ?


Exemple de code : création d’un objet requête

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) { // méthode avec paramètres req.onreadystatechange = function() {stateChange(elt)}; // méthode sans paramètre // req.onreadystatechange = stateChange; req.open(HttpMethod, url, true); req.setRequestHeader("Accept", "application/xml"); req.send(params); } }

Association d’une fonction de callback aux changements d’état de la réponse


Exemple de code : gestion de l’état

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

//Après 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


Implémentation de la logique applicative

Programmation d’un ensemble de fonctions JavaScript

Réécriture de fonctionnalités existantes

Mélange de la logique métier et des fonctionnalités techniques

Pas forcément à l’épreuve des changements technologiques

Réutilisabilité moyenne

Code parfois un peu « fouillis »

Utiliser / s’approprier des outils existants

Langages / IDE spécifiques (ou plugins de votre IDE préféré)

Lirairies / frameworks open source


Implémentation de la logique applicative Standardisation de la communication avec les langages de

programmation côté serveur : JSON

Spécification liée à ECMAScript – RFC 4627

Implémentée par tous les navigateurs

Permet de sérialiser des types de données (alternative à XML)

Définit des types de données de façon simple

Indépendant du langage de programmation utilisé

Permet les échanges de données entre serveur et client

Syntaxe : des inclusions

d’objets sous forme d’une liste de membres { nommembre1 : valmembre1, nommembre2: valmembre2, … }

de tableaux sous forme d’une liste de valeurs [ valeur1, valeur2, valeur3, …]


Implémentation de la logique applicative Standardisation de la communication avec les langages de

programmation côté serveur : JSON

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>²

http://www.xul.fr/ajax-format-json.html






Implémentation de la logique applicative

Standardisation de la communication avec les langages de programmation côté serveur : JSON

Utilisation côté client :

Utilisation côté serveur : librairies ad hoc

req.open("GET", "fichier.json", true); // requête … var doc = JSON.parse(req.responseText); // récupération … 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 règles de conception en AJAX Utiliser des design patterns

Adaptateur Le plus utilisé Testez la fonctionnalité à utiliser, pas le navigateur…

MVC De préférence type 2 (avec contrôleurs délégués) Isoler les parties du modèle Répartir les traitements de chaque partie entre serveur et client Indiquer à la vue comment restituer les objets du modèle

Observateur Permet de définir un modèle événementiel Si celui de JavaScript est insuffisant Il en existe plusieurs dans des librairies open source (W3C)

…


AJAX a aussi ses inconvénients Toute une application dans la même page

Bouton « Back » inutilisable Définition de bookmarks sur une vue particulière impossible

Génération dynamique des contenus Indexation par des moteurs de recherche impossible

Téléchargement du code applicatif sur le client Temps de latence importants au lancement de l’application

Nécessite d’avoir activé JavaScript Prévoir une solution de repli « acceptable » lorsqu’il est désactivé

Complexité des développements Appropriation et utilisation des différentes technos parfois coûteuse

Source : http://dico.developpez.com/html/1710-Internet-Ajax-

Javascript-Asynchrone-et-XML.php

http://dico.developpez.com/html/1710-Internet-Ajax-Javascript-Asynchrone-et-XML.php














Sécurité

Déporter de la logique applicative sur le client présente des risques

Remarque

L’envoi d’une requête asynchrone XHR à un autre serveur que celui ayant délivré le script est impossible (en principe)

Types d’attaques

Usurpation de session/d’identité :

on ne peut jamais être sûr que le client est celui qu’il prétend être

la partie applicative tournant sur le client est-elle réellement celle envoyée par le serveur ?

Double validation (mots de passe)


Sécurité Types d’attaques

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 exécution de scripts malicieux dans le contexte d’un site « trusté » exemple: injection de scripts dans les commentaires des forums Revenir au HTML de base pour les données sensibles Vérifier 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 l’authentification d’un utilisateur pour réaliser des actions à

son insu souvent permise par l’authentification par cookies Utiliser des champs hidden ou l’en-tête HTTP Referer

http://cwe.mitre.org/top25/index.html




https://www.owasp.org/index.php/XSS







https://www.owasp.org/index.php/CSRF



Outils d'aide à la conception côté client

Bibliothèques

Ensembles de fonctions JavaScript réalisant des traitements spécifiques

Peuvent être réutilisées dans des applications

Frameworks AJAX

Programmation dans un autre langage

Génération du code JavaScript

Mécanismes de communication standard entre client et serveur

Référence :

http://softwareas.com/ajax-patterns/






jQuery Présentation

Bibliothèque de fonctions d’aide à la génération d’applications Web

Navigation dans un document et sélection d’éléments (X)HTML

Gestion d’événements

AJAX

Animations…

Utilisation très répandue

Existence de plugins développés par la communauté

Remarque : 2 versions

Compressée (production) / Lisible (développement)

Site Web

http://jquery.com/

Documentation

http://docs.jquery.com/

http://jquery.com/

http://docs.jquery.com/


jQuery Quelques détails

L’objet jQuery

Équivalent : $

Fonction membre de l’objet window

Plusieurs utilisations • jQuery(selector [, context])

Renvoie tous les éléments DOM • Correspondant au sélecteur selector

• À partir de l’élément DOM donné en context

• jQuery(html [, ownerDocument])

Renvoie objet jQuery correspondant à un ou plusieurs élément(s) DOM • Rajouté(s) au document ownerDocument

• Correspondant à la chaîne de caractères html

• jQuery(callback)

Appelle une fonction de callback quand le DOM est chargé

Équivalent : jQuery(document).ready()


jQuery

Quelques détails

Sélecteurs

Tous les sélecteurs CSS (versions 1 à 3)

Des attributs et fonctions spécifiques

• :checked, :empty, :even, :header…

• :eq(), :lt(), :not(), :nth-child()…

Des notations particulières

• Sélecteurs multiples : ("selector1", "selector2 ", "selector3 ")

• Next adjacent selector : ("previous + next ")

• Next sibling selector : ("previous ~ sibling ")

Référence : http://api.jquery.com/category/selectors/

http://api.jquery.com/category/selectors/


jQuery

Quelques détails

Objets jQuery

Toutes les méthodes jQuery retournent un ou plusieurs (tableau) objets jQuery

Chaque objet jQuery possède l’ensemble des méthodes définies par l’API jQuery

On peut donc chaîner les méthodes entre elles :

$(‘h1#titre').html($('title').html()).before('Voici le titre :').click(mafonction);

Le chaînage s’appliquera pour chacun des objets retournés par chaque fonction de la chaîne

Exemples : http://www.siteduzero.com/tutoriel-3-160891-jquery-ecrivez-moins-

pour-faire-plus.html?all=1

http://www.siteduzero.com/tutoriel-3-160891-jquery-ecrivez-moins-pour-faire-plus.html?all=1



















Gestion des événements

Fourniture de fonctions pour l’ajout d’EventHandlers d’événements standards… • click(), dblclick(), load()

…Ou définis par la bibliothèque

• ready()

Permet d’attacher une callback à un événement quelconque • bind(), unbind()

Référence : http://api.jquery.com/category/events/

Remarque : l’objet Event est lui aussi surchargé par un objet jQuery spécifique http://api.jquery.com/category/events/event-object/

http://api.jquery.com/category/events/

http://api.jquery.com/category/events/event-object/




jQuery

Quelques détails

Requêtes asynchrones

AJAX

• $.ajax({

url: "test.html",

context: document.body,

success: function(){

$(this).addClass("done");

}

});

JSON

Générale


jQuery

Quelques détails


AJAX

JSON

• jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )

• Équivalent à :

• $.ajax({

url: "test.html",

datatype: 'json',

context: document.body,

success: success

});

Générale




AJAX

JSON

Générale

• jQuery.get( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

• Équivalent à :

• $.ajax({ url: "test.html", datatype: datatype, context: document.body, success: success });

Référence : http://api.jquery.com/category/ajax/

http://api.jquery.com/category/ajax/


jQuery UI Extension de jQuery

Bibliothèque d’éléments d’interface (thèmes, widgets, primitives d’interaction)

Permet de rajouter facilement des interactions complexes

Permet de rendre une application Web plus dynamique

Exemple

Drag’n drop : http://jqueryui.com/demos/draggable/

Utilisation

1. Identifier les éléments dont on a besoin

2. Construire et télécharger sa bibliothèque personnalisée

3. L’utiliser dans son application

Site Web http://jqueryui.com/

http://jqueryui.com/demos/draggable/

http://jqueryui.com/

Single-Page Application (SPA)

Principes

Toute l’application côté client est dans une unique page Web

Une seule page à charger ( moins de « lag » entre les vues)

Contient toutes les vues de l’application

Toutes les vues sont « hidden » sauf une

Mécanisme de routage fondé sur le hash de l’URL pour sélectionner la vue à montrer

Permet d’implémenter un pattern MV* complet côté client

Model : scripts exécutés localement + échanges asynchrones de données avec le serveur

View : ensemble de <section> dans la page HTML + mécanisme de templating

Controller / Presenter / View-Model : routage + gestion de événements + …


Routage

Principe

Intercepter le changement de hash dans l'URL

Récupérer les – éventuels – paramètres

Déclencher un callback

Outils

événement hashchange

hash window.location.hash


Routage

Exemple de code

<style>

.active { display: block; }

.inactive { display: none; }

</style>

<script>

function show(hash) {

$('.active')

.removeClass('active')

.addClass('inactive');

$(hash)

.removeClass('inactive')

.addClass('active');

}

</script>

<h1>Ma première SPA</h1>

<section id='index' class='active'>

<p>Ceci est la vue d'accueil.</p>

<ul>

<li><a href='#vue1'>Vue 1</a></li>

<li><a href='#vue2'>Vue 2</a></li>

</ul>

</section>

<section id='vue1' class='inactive'>

<p>Ceci est la vue 1.</p>

<p><a href='#index'>Vue accueil</a></p>

</section>

<section id='vue2' class='inactive'>

<p>Ceci est la vue 2.</p>

<p><a href='#index'>Vue accueil</a></p>

</section>

<script>

window.addEventListener(

'hashchange',

() => { show(window.location.hash); }

);

</script>

https://perso.liris.cnrs.fr/lionel.medini/enseignement/M1IF03/Tutoriels/exemples/SPA/exemple_SPA.html

Conclusion

De plus en plus d’applications Web « riches »

Charge répartie entre client et serveur

Outils de conception et de développement matures

Bonne ergonomie grâce aux technologies CSS, JavaScript

Standardisation

Indépendance vis-à-vis de l’OS

Ne correspond pas aux stratégies des vendeurs d’OS ou de logiciels

Disponibles sur Internet

Indépendance vis-à-vis de la machine utilisée

Conclusion

Quelques règles pour développer une application Web riche Outils de développement

Utilisez les ressources à votre disposition

Choisissez une bibliothèque aussi standard que possible

Il existe aussi des feuilles de style CSS open source Exemple : http://www.oswd.org/

Échafaudez (« scafhold ») vos projets

Compatibilité avec les navigateurs

Vérifiez la compatibilité avec les navigateurs visés

Testez la fonctionnalité à utiliser, pas le navigateur…

Utilisez des façades aussi souvent que possible

http://www.oswd.org/

http://www.oswd.org/

Perspectives

Quelles applications Web pour demain ? Deux types d’applications Web

RDA : Rich Desktop Application

S’exécute dans un complément installé sur le poste de travail • Microsoft SilverLight

• Adobe AIR

Moins de restrictions de sécurité

RIA : Rich Internet Application

S’exécute dans un navigateur

Doit être compatible avec une majorité de navigateurs

Doit être aussi performante qu’une RDA (chargement, exécution)

Ne pas perdre de vue l’arrivée de l’informatique ubiquitaire

PDA, Smartphones, connexions par réseaux GSM

Ressources client réduites : matérielles et logicielles

Fonctionnalités et usages spécifiques : contextualisation, géolocalisation…

Quelques références

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 développement

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…)

http://www.ajaxprojects.com/

http://ajaxpatterns.org/

http://www.openajax.org/

http://www.eclipse.org/rap/



http://ajaxpatterns.org/PHP_Ajax_Frameworks

http://jquery.com/

ASYNCHRONOUS JAVASCRIPT AND XML · Programmation XML en JavaScript Retour sur l’API DOM (Document...

Documents

Transcript of ASYNCHRONOUS JAVASCRIPT AND XML · Programmation XML en JavaScript Retour sur l’API DOM (Document...