====== 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 [[ajax2:techxhr|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.

  * [[http://ogo.heig-vd.ch/ajaxrad/Part1/dsl1.html|Part1/dsl1.html]] : fonctionnement (asynchrone, callback JS, résultat, ...)
  * [[http://ogo.heig-vd.ch/ajaxrad/Part1/dsl2.html|Part1/dsl2.html]] : un résultat fragment HTML produit cé serveur par traitement et mise en forme (gabarit, nettoyage)
  * [[http://ogo.heig-vd.ch/ajaxrad/Part1/dsl3.html|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)
  * [[http://ogo.heig-vd.ch/ajaxrad/Part1/dsl4.html|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 ([[http://ogo.heig-vd.ch/ajaxrad/Ex1/trace/traceit_0.html|traceit_0.html]]) : tracer l'activité avec un compteur statistique 
      * Suggestions : ignorez les aspects concurrentiels d'accès au fichier de stat
      * Corrigé : [[http://ogo.heig-vd.ch/ajaxrad/Ex1/trace/traceit.zip|traceit.zip]], http://ogo.heig-vd.ch/ajaxrad/Ex1/trace/traceit.html
    * Amis ([[http://ogo.heig-vd.ch/ajaxrad/Ex1/amis/amis_0.html|amis_0.html]]) : afficher les amis de Bart et Homer 
      * Suggestions : utilisez les avatars http://www.simpsoncrazy.com/pictures
      * Corrigé : [[http://ogo.heig-vd.ch/ajaxrad/Ex1/amis/amis.zip|amis.zip]], http://ogo.heig-vd.ch/ajaxrad/Ex1/amis/amis.html

  * [[http://ogo.heig-vd.ch/ajaxrad/Part1/dsl5.html|Part1/dsl5.html]] : un résultat brut sans habillage formatté selon la [[http://www.json.org/|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 ({{:ajax2:ajax-intro.pdf|Intro}}, slides 7-8) : se souvenir comment [[http://www.w3schools.com/js/js_objects.asp|créer un objet en JavaScript]], puis analysez ces exemples : [[http://ogo.heig-vd.ch/ajaxrad/Part1/JSONcodec.html|JSONcodec.html]], [[http://ogo.heig-vd.ch/ajaxrad/Part1/JSONcodec.php|JSONcodec.php]] et [[http://ogo.heig-vd.ch/ajaxrad/Part1/testJSONvsXML.html|testJSONvsXML.html]]
    * Utile : http://jsonformat.com permet une visualisation bien indentée d'une instance JSON et http://xmlbeautifier.com fait de même pour du XML.

  * Exercices
    * CodePostal ([[http://ogo.heig-vd.ch/ajaxrad/Ex1/codepostal/codepostal_0.html|codepostal_0.html]]) : construire une application web avec technique AJAX permettant d'interagir avec le service [[http://www.geonames.org/export/web-services.html#postalCodeLookupJSON|GeoNames postalCodeLookupJSON]]
      * Suggestions : voici un exemple de [[http://www.geonames.org/postalCodeLookupJSON?postalcode=1401&country=CH&callback=callbackFunction|requête]]
      * Corrigé : http://ogo.heig-vd.ch/ajaxrad/Ex1/codepostal/codepostal.html

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.

  * [[http://ogo.heig-vd.ch/ajaxrad/Part1/iframe1.html|Part1/iframe1.html]] : fonctionnement (attribut iframe.src, onload, ...)
  * [[http://ogo.heig-vd.ch/ajaxrad/Part1/iframe2.html|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
  * Corrigé : [[http://ogo.heig-vd.ch/ajaxrad/Ex1/trace/trace_iframe.zip|traceit_iframe.zip]]

Conclusions : également facile à mettre en oeuvre et offrant de nombreuses utilisations de passerelle (ex. [[http://www.openjs.com/articles/ajax/ajax_file_upload|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. 

  * [[http://ogo.heig-vd.ch/ajaxrad/Part1/cookies.html|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 l'exercice //Amis// précédent en utilisant cette technique combinée **avec une réponse en JSON**
    * Corrigé : [[http://ogo.heig-vd.ch/ajaxrad/Ex1/amis/amis_cookies.zip|amis_cookies.zip]]
    * http://ogo.heig-vd.ch/ajaxrad/Ex1/amis/amis_cookies.html
  * Exercice (2) quelle serait la particularité pour mettre en oeuvre l'exercice CodePostal précédent avec cette technique ?

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