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

• 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é

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.

• 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”)

• 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

• 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”);

• Voyons la technique Cookie Loading basée sur document.cookie
• Et continuons avec la technique plus conventionnelle basée sur XMLHTTPRequest

• 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

• Examen final : énoncé, corrigé
• Remédiation : énoncé, code initial, corrigé A-D, corrigé_B-C