GIS and Media fusion

"The explosive growth of the GeoWeb and geographic information has made GIS powerful media for the general public to communicate, but perhaps more importantly, GIS have also become media for constructive dialogs and interactions about social issues." - Sui & Goodchild

User Tools

Site Tools


ajax2:techajax

This is an old revision of the document!


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.

Tous les fichiers sources de la théorie de la Partie 1.

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)

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/).

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

ajax2/techajax.1394706350.txt.gz · Last modified: 2018/05/16 10:05 (external edit)