Les API de HTML5 Michel Gagnon École Polytechnique de Montréal
Cache d application L idée ici consiste à garder en cache les ressources nécessaires pour continuer à utiliser une application web même si on est hors ligne Il faut un fichier manifeste pour déterminer ce qui doit être mis en cache Au moins un des documents HTML de l application doit faire un lien avec le manifeste: <html manifest="exemple.appcache"> </html> Un document qui contient un tel lien sera automatiquement mis dans la cache d application correspondant au manifeste, avec tous les autres documents requis pour cette application, tel que spécifié par le manifeste (on dit que c est un document «maître»)
Cache d application Le processus de chargement d une page est alors modifié: Le navigateur essaie d abord de charger la page à partir de la cache d application Le navigateur vérifie alors avec le serveur si le manifeste a été modifié Si c est le cas, il recharge à nouveau la cache avec les documents spécifiés dans le manifeste Important: Si le manifeste ne change pas, et que le contenu d une ressource est modifié, la cache ne sera pas mise à jour Il faudra alors modifier le manifeste (normalement on change un numéro de version)
Fichier manifeste Type MIME: text/cache-manifest Contient 3 sections: CACHE (par défaut, la première section) : spécifie les ressources qui doivent être mises en cache NETWORK : spécifie les ressources qui doivent toujours être téléchargées du serveur FALLBACK : spécifie la ressource à utiliser en remplacement si une ressource n a pu être obtenue du serveur
Exemple de manifeste CACHE MANIFEST # v1 2011-08-14 # This is another comment index.html cache.html style.css image1.png # Fallback content FALLBACK: / fallback.html # Use from network if available NETWORK: network.html
Stockage local Deux possibilités: L information disparaît après la fin de la session, c està-dire lorsque l onglet contenant la page est fermé, ou lorsque le navigateur est fermé (objet localstorage) L information est persistante (objet sessionstorage) Dans les deux cas, on stocke des paires attribut/valeur L espace de stockage est associé au domaine du site web (deux pages du même domaine peuvent accéder à la même information du stockage local
Stockage local exemple simple <!DOCTYPE html> <html lang="en"> <head> </head> <body> <p> Cliquez <a href="/exemples/stockagelocal/autrepage.html">ici</a> pour charger une page qui partage le stockage local</p> <fieldset> <legend>stockage local</legend> <label for="localdata"> Ceci sera persistant:</label> <input id="localdata"><br> <label for="sessiondata"> Ceci sera conservé durant la session:</label> <input id="sessiondata"> </fieldset> <div> <button onclick="savedata()">sauvegarder</button> <button </div> </body> </html> onclick="loaddata()">récupérer</button>
Stockage local exemple simple <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script> function savedata() { localstorage.setitem("localdata", $("#localdata").val()); sessionstorage.setitem("sessiondata", $("#sessiondata").val()); } function loaddata() { if (localdata!= null) { $("#localdata").val(localstorage.getitem("localdata")); } if (sessiondata!= null) { $("#sessiondata").val(sessionstorage.getitem("sessiondata")); } } </script> </head> <body> </body> </html>
Stockage local exemple simple http://michelgagnon.heroku.com/exemples/stockagelocal/ Adapté de M. McDonald, HTML5, The Missing Manual, O Reilly, 2014
AJAX Principe: communiquer avec le serveur pour obtenir des données qui seront utilisées (en général) pour modifier le document sans recharger la page Deux manières courantes de l implémenter: Utilisation de l objet XMLHttpRequest Utilisation d un élément <script> En général, le serveur envoie le contenu demandé dans un des formats suivants: texte, HTML, XML, JSON Technique asynchrone
XMLHttpRequest 1. On crée une instance de XMLHttpRequest 2. On attache un gestionnaire à l événement readystatechange 3. On ouvre la connexion (méthode open()) 4. On envoie la requête (méthode send()) 5. Dans le gestionnaire, on teste la valeur de l attribut readystate, et on traite les informations reçues lorsque la valeur de cet attribut est 4
AJAX- Méthode JSONP On utilise la balise <script> Dès qu on attribue une valeur à l attribut src, la ressource associée sera téléchargée Le serveur doit englober l objet JSON dans un appel de fonction, qui sera alors exécutée par le navigateur (cette fonction doit être déjà définie dans le navigateur) Avantage: la balise <script> n est pas soumise à la contrainte de la «même origine»
Méthode JSONP - Exemple <script type="application/javascript" src="http://serveur.exemple.com/res23?callback=moncallback"> </script> <script> function moncallback(data) { alert(data); } </script>
Méthode JSONP - Exemple <script type="application/javascript" src="http://serveur.exemple.com/res23?callback=moncallback"> </script> <script> function moncallback(data) { alert(data); } </script> On indique au serveur quelle fonction sera appelée. Il pourra retourner quelque chose comme: moncallback( { attr 1 : val 1, attr n : val n })
Méthode JSONP - Exemple <script type="application/javascript" id= "jsonp"> </script> <script> function callback(data) { alert(data); }. Quelque part dans le code, on peut fixer une valeur à l attribut src, une requête sera automatiquement envoyée au serveur. $("#jsonp").attr("src", "http://serveur.exemple.com/res23?callback=moncallback"); </script>
AJAX avec jquery Méthode load(): On lui passe une URL Le contenu envoyé par le serveur remplacera celui de l élément sur lequel la méthode est exécutée Exemple: $( #stats ).load( rapport.html ) Arguments supplémentaires possibles: Un ensemble de données à ajouter à la requête Une fonction qui sera exécutée lorsque le traitement de la requête aura été complété
AJAX avec jquery Fonction utilitaire $.getscript(): Télécharge et exécute un code Javascript Pas régi par la contrainte de la même origine Fonction utilitaire $.getjson(): Fait une requête avec l URL fournie Parse la réponse JSON et transmet l objet résultant à la fonction passée en paramètre Fonctions $.get() et $.post(): Font une requête avec la méthode correspondante Fonction générique $.ajax(): On lui passe un ensemble de données qui définissent le genre d interaction désiré