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

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
ajax2:techajax [2014/03/13 19:43]
oertz
ajax2:techajax [2018/05/16 10:05] (current)
Line 18: Line 18:
     * Amis ([[http://​ogo.heig-vd.ch/​ajaxrad/​Ex1/​amis/​amis_0.html|amis_0.html]]) : afficher les amis de Bart et Homer      * 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       * 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.   * [[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]] ​et [[http://​ogo.heig-vd.ch/​ajaxrad/​Part1/​JSONcodec.php|JSONcodec.php]] +    * 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.+    * 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   * 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]]     * 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]]       * 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é). 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é).
Line 35: Line 37:
  
   * Exercices : refaire au moins l'​exercice TraceIt précédent en utilisant la technique d'​IFrame Loading   * 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. 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/​).+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 ===== ===== 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. ​ 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. ​
Line 43: Line 46:
     * à savoir, //​document.cookie//​ contient une concaténation de chaînes sous la forme "​nomDuCookie=ValeurDuCookie;"​     * à 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 (1) refaire l'​exercice //Amis// précédent en utilisant cette technique ​combinée ​**avec une réponse en JSON** 
-  * Exercice (2) quelle ​est la particularité pour mettre en oeuvre l'​exercice CodePostal précédent ?+    * 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). 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.1394736206.txt.gz · Last modified: 2018/05/16 10:05 (external edit)