Premières techniques AJAX

Dans cette partie, nous décortiquons déjà quelques techniques permettant de mettre en oeuvre le concept de programmation Web dit AJAX.

La partie suivante nous décortiquerons la technique XMLHTTPRequest qui a permis de démocratiser largement le concept.

Script Loading

Résumé : on profite ici de la balise <script> qu'on insère dans le document afin de déclencher en arrière-plan un chargement de script transportant le contenu à traiter/afficher.

Part1/dsl1.html : fonctionnement (asynchrone, callback JS, résultat, ...)

Part1/dsl2.html : un résultat fragment HTML produit cé serveur par traitement et mise en forme (gabarit, nettoyage)

Part1/dsl3.html : un résultat qui dépend d'un paramètre de requête GET en QUERY_STRING (nb: pas de POST possible)

Part1/dsl4.html : ajout d'un paramètre pour configurer le nom de callback (le service s'adapte au client, et non l'inverse)

Exercices

TraceIt (traceit_0.html) : tracer l'activité avec un compteur statistique

Suggestions : ignorez les aspects concurrentiels d'accès au fichier de stat

Corrigé : traceit.zip, http://ogo.heig-vd.ch/ajaxrad/Ex1/trace/traceit.html

Amis (amis_0.html) : afficher les amis de Bart et Homer

Suggestions : utilisez les avatars http://www.simpsoncrazy.com/pictures

Part1/dsl5.html : un résultat brut sans habillage formatté selon la notation JSON par le serveur (PHP json_encode) et directement interprétée par le client comme instructions JS. C'est le client qui gère entièrement la mise en forme.

JSON (Intro, slides 7-8) : se souvenir comment créer un objet en JavaScript, puis analysez ces exemples : JSONcodec.html et JSONcodec.php

Utile : http://jsonformat.com permet une visualisation bien indentée d'une instance JSON.

Exercices

CodePostal (codepostal_0.html) : construire une application web avec technique AJAX permettant d'interagir avec le service GeoNames postalCodeLookupJSON

Suggestions : voici un exemple de requête

Conclusions : une technique facile à mettre en oeuvre, même si un peu tordue. Elle est limitée à l'envoi en GET. Notons que cette technique en mode JSON est aussi appelée JSONP, avec le P pour padding qui correspond au nom de callback qui préfixe le contenu résultat (nous verrons plus loin un autre avantage lié).

IFrame Loading

Résumé : on profite ici de la balise <iframe> qui encapsule une sous-page dans la page principale. La sous-page iframe est simplement cachée et sert en arrière-plan de passerelle pour transférer du contenu du serveur vers la page principale du client.

Part1/iframe1.html : fonctionnement (attribut iframe.src, onload, ...)

Part1/iframe2.html : avec un contenu brut de données en notation JSON et un “callback padding” règlé sur la page principale (window.top !)

Exercices : refaire au moins l'exercice TraceIt précédent en utilisant la technique d'IFrame Loading

Conclusions : également facile à mettre en oeuvre et offrant de nombreuses utilisations de passerelle (ex. formulaire caché en POST, upload de fichier). La balise iframe était devenue obsolète (voire décriée) jusqu'à ce que HTML5 lui redonna vie (à lire parmi d'autres : http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/).

Cookie Loading

Résumé : on profite ici de l'espace de stockage que représente les cookies au sein d'un navigateur (document.cookie) comme passerelle d'échange de données.

Part1/cookies.html : fonctionnement (Image.src, Image.onload, PHP setcookie, pixel.gif, JS getCookie, JSON.parse)

à savoir, document.cookie contient une concaténation de chaînes sous la forme “nomDuCookie=ValeurDuCookie;”

Exercice (1) refaire au moins l'exercice Amis précédent en utilisant cette technique combiné avec une réponse en JSON

Exercice (2) quelle est la particularité pour mettre en oeuvre l'exercice CodePostal précédent ?

Conclusions : sans doute le plus tordu, mais efficace. Pas de POST possible comme la technique de Script Loading et limité par la taille de l'espace de stockage en cookie du navigateur (variable).