Module MASRAD :: AJAX (2)

Objectifs : acquérir de bonnes connaissances pratiques dans l'utilisation des techniques dites AJAX pour la création d'applications web. Connaître et manipuler les principes et mécanismes de base de l'approche asynchrone de communication client-serveur.

Organisation : succession d'introductions de concept et de mises en pratique (certaines dirigées, d'autres sous forme d'exercices)

Sessions de cours (17h30, salle T131, à la HEIG-VD, St-Roch) selon planning MAS-RAD

Feuille de route

Introduction : le concept AJAX (Asynchronous Javascript and XML), c'est quoi ? ça sert à quoi ?

Partie 1 : les variantes de technique AJAX

Partie 2 : jQuery, une bibliothèque JS en facilitant la mise en oeuvre

Utilisation avec un framework MVC (côté serveur, ex. Laravel / côté client, ex. AngularJS)

Conclusion : session d'évaluation et corrigé

Sessions

Exemples, exercices et codes sources

Chaque partie comporte des exemples et exercices, ils sont disponibles ici :
http://ogo.heig-vd.ch/ajaxrad/

Téléchargez tous les codes sources (v2) complets client/serveur de la théorie de la Partie 1.
Téléchargez le complément de codes sources de la partie 1.
Téléchargez tous les codes sources de la partie sur jQuery.

20.02.2014

Intro / Détecter une utilisation AJAX dans une application/site web

quelles différences entre : http://www.infoconcert.com/festival/rock-the-pistes-festival-7082/concerts.html et http://caniuse.com/#search=media ?

utilisation de Firebug de Firefox (<=> Developer Tools de Chrome)

d'autres exemples “AJAX est partout” (ex. http://www.geoplanet.vd.ch/ sous la loupe de Firebug)

à vous d'en détecter ... vos exemples (vérifiez avec Firebug)

Checklist des pré-requis, réalisez les TP suivants :

TP1 (TP1_solution_5.html) : mises au point HTML/CSS3 (la base visuelle)

TP2 (TP2_solution_2.html, TP2_form.zip) : mises au point JS/DOM (un pilier AJAX)

IDE (ex. NetBeans) ? serveur HTTP + module PHP en localhost ? XML ? JSON ?

Voyons une première technique AJAX, le Script Loading basée sur la manipulation DOM document.createElement(“script”)

13.03.2014

Terminons les exercices TraceIt et Amis pour mettre en oeuvre l'approche AJAX de Script Loading

Voyons encore l'utilisation de la notation JSON avec l'exemple 5 de Script Loading

18.03.2014

On s'échauffe avec l'exercice CodePostal pour une utilisation de la technique de Script Loading avec un flux réponse formatté en JSON.

Voyons la technique IFrame Loading basée sur la manipulation DOM document.createElement(“iframe”);

27.03.2014

Voyons la technique Cookie Loading basée sur document.cookie

Et continuons avec la technique plus conventionnelle basée sur XMLHTTPRequest

03.04.2014

Petite mise au point sur les évolutions de l'objet XHR

xhr4a.html, xhr4b.html (onload, onerror, ...)

xhr5.html, xhr5.zip (de send(null) à une requête XHR en POST)

On termine l'exercice Animaux :

Corrigé : animaux.html, animaux.zip

Parlons du cadre Same Origin Policy et du mécanisme Cross-origin resource sharing (CORS)

(A) Découvrons d'abord comment le framework jQuery peut nous simplifier la vie

(B) Voyons comment contrôler des requêtes AJAX asynchrones

TP2 avec http://api.jquery.com/load

Corrigé : http://ogo.heig-vd.ch/ajaxrad/Part2/TP2_ajax.html

Nos exemples : jqxhr1.html, jqxhr2.html, jqxhr3.html

Exercices : refaire les exercices avec jQuery

Corrigé TraceIt : http://ogo.heig-vd.ch/ajaxrad/Ex1/trace/jqtraceit.html

Corrigé CodePostal : http://ogo.heig-vd.ch/ajaxrad/Ex1/codepostal/jqcodepostal_jsonp.html

Exercice WorldCat :

On souhaite une interface web pour rechercher des oeuvres dans le catalogue WorldCat moyennant un simple champ texte de recherche. La liste des résultats est présentée dans un tableau que l'on peut trier par entête de colonne. On souhaite l'interface la plus “AJAX Web 2.0” possible ...

Ci-dessous les points d'entrées pour achever cet exercice :

API doc : http://www.oclc.org/developer/develop/web-services/worldcat-search-api/bibliographic-resource.en.html

Exemple OpenSearch : http://worldcat.org/webservices/catalog/search/worldcat/opensearch

Atom XML : http://fr.wikipedia.org/wiki/Atom

Exemple ISBN : http://www.worldcat.org/webservices/catalog/content/isbn/9780470978306

MARCXML : http://en.wikipedia.org/wiki/MARC_standards

jQuery tablesorter : http://tablesorter.com/docs/

Corrigé : worldcat.zip

sans jQuery : http://ogo.heig-vd.ch/ajaxrad/Part2/worldcat.html

avec jQuery : http://ogo.heig-vd.ch/ajaxrad/Part2/worldcat_jquery.html

10.04.2014

Evaluation des connaissances (Exam-corrigé.zip)