[PDF] M1IF03 Conception dApplications Web

View - Download M1IF03 Conception dApplications Web

Previous PDF

Next PDF

CONCEPTION ET DÉVELOPPEMENT

CLIENT

LIONEL MÉDINI

NOVEMBRE 2021

M1IF03

Plan du cours

yAsynchronousJavascriptAnd XML (AJAX) {Mécanismes de requêtes asynchrones {Quelques patterns de conception en AJAX {Considérations de sécurité yFetchAPI yOutils de conception et de développement {jQuery {jQuery UI ySingle-Page Application yConclusion

Introduction

yObjectif : 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

ÎÉchanges client-serveur asynchrones (AJAX)

{Logique métier complexe ÙOutils "évolués» de modélisation, conception, développement ÎHG( 322 80I GHVLJQ SMPPHUQV PpPORGHV MJLOHV ;3" ÎOù placer la logique métier ? La couche données ?

AsynchronousJavascriptAnd XML (AJAX)

{Côté serveur

ÙRessources statiques

|Modèle de document, bibliothèques de scripts, feuilles de style ÙTraitements dynamiques des données (couche métier) {Côté client

ÙGestion des événements utilisateur

HTTP, (X)HTML

AsynchronousJavascriptAnd XML (AJAX)

{Côté serveur

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

HTTP, XML, JSON

AsynchronousJavascriptAnd XML (AJAX)

yGé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

AsynchronousJavascriptAnd XML (AJAX)

yFonctionnement {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 Ù$IILŃOMJH LQŃOXVLRQ MX GRŃXPHQP +70I PUMQVIRUPMPLRQ ;6I7" ÙLogique applicative (fonctions JavaScript dédiées) ySpécificité de la technologie AJAX {Requête asynchrone sur un document XML viaun

ÙObjet XMLHttpRequest(Mozilla)

ÙContrôle ActiveX XMLHTTP (IE)

AsynchronousJavascriptAnd XML (AJAX)

yFonctionnement

Ù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

ÙRéception de la réponse

"ready» |Traiter les données reçues

AsynchronousJavascriptAnd XML (AJAX)

yFonctionnement asynchrone AJAX ?

AsynchronousJavascriptAnd XML (AJAX)

var req= null; functiongetRequest() if (window.XMLHttpRequest) req= new XMLHttpRequest(); elseif (typeofActiveXObject!= "undefined") req=new ActiveXObject("Microsoft.XMLHTTP"); return req;

Safari / Mozilla

Internet Explorer

AsynchronousJavascriptAnd XML (AJAX)

yExemple de code : chargement asynchrone functionGetDataUsingAJAX(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

de callback aux changements réponse

AsynchronousJavascriptAnd XML (AJAX)

functionstateChange(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

AsynchronousJavascriptAnd XML (AJAX)

yExemple de code : transformation XSLT //Après chargement asynchrone des documents XML et XSLT functiontransformXSLT (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

AsynchronousJavascriptAnd XML (AJAX)

yExemple de code : transformation XSLT } elseif (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

AsynchronousJavascriptAnd XML (AJAX)

yImplémentation de la logique applicative ÙRéécriture de fonctionnalités existantes ÙMélange de la logique métier et des fonctionnalités techniques

ÙRéutilisabilité moyenne

ÙCode parfois un peu "fouillis»

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

ÙLirairies/ frameworksopen source

AsynchronousJavascriptAnd XML (AJAX)

yImplé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

S QRPPHPNUH1 YMOPHPNUH1 QRPPHPNUH2 YMOPHPNUH2 " `

L YMOHXU1 YMOHXU2 YMOHXU3 "@

AsynchronousJavascriptAnd XML (AJAX)

yImplé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" } ] } Fichier