"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
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
ajax2:techajax [2014/03/13 20:35] oertz |
ajax2:techajax [2014/03/27 19:58] oertz [Cookie Loading] |
||
---|---|---|---|
Line 21: | Line 21: | ||
* [[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 36: | 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 44: | 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** / 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 est la particularité pour mettre en oeuvre l'exercice CodePostal précédent ? | + | * 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). |