Labo 06

Mercredi 16 octobre

Solution : à venir

Objectifs

• AJAX

Rappel

Au dernier labo, nous avons vu comment faire des requêtes synchrones avec javascript.

request = new XMLHttpRequest();
request.open("GET", url, false);

Pour faire une requête asynchrone (AJAX), il faut mettre le 3e paramètre du request.open à true et y mettre un callback :

request = new XMLHttpRequest();
request.open("GET", url, true);
request.onreadystatechange = function() {
/* ... */
}

Lorsque la requête est complété, la callback dans request.onreadystatechange sera lancé.

Vous pouvez vous fier à l'exemple ici : https://github.com/jacquesberger/exemplesINF4375/blob/master/Ajax/ajax-express/public/javascripts/script.js

Exercice 1 - Requêtes HTTP asynchrone

Vous pouvez utiliser le fichier disponible ici : https://github.com/jpcaissy/INF4375-2013A/blob/master/labo-06/exercice-01.html

1. Lorsque le bouton est cliqué, faites une requêtes AJAX asynchrone (méthode GET) vers http://labo5.piji.ca avec le paramètre nom, come par exemple : http://labo5.piji.ca/?nom=Jean-Philippe et remplacer le contenu de la balise <div id="resultat"> par la réponse HTML de la requête AJAX.

Exercice 2 - AJAX avec JSON

1. Même chose que l'exercie 1, mais faites la requête vers http://labo5.piji.ca/json. Les données de retour sont au format JSON. Parsez-les et afficher le nom et la date dans la balise <div id="resultat">.

Exercice 3 - AJAX avec XML

1. Même chose que l'exercice 1, mais faites la requête vers http://labo5.piji.ca/xml. Les données de retour sont au format XML. Parsez-les et afficher le nom et la date dans la balise <div id="resultat">.

Exercice 4 - Intégrer le tout à Express

1. Télécharger le projet Express disponible ici : https://github.com/jpcaissy/INF4375-2013A/raw/master/labo-06/labo6.zip
2. Compléter le fichier javascript client dans public/javascript/ajax.js pour faire un appel AJAX vers http://127.0.0.1:3000/json. Les données de retour sont au format JSON. Parsez-les et afficher le nom et la date dans la balise <div id="resultat">.
3. Rajoutez une route /date dans le projet Express qui retourne au format json la date. Ajoutez un bouton dans le template Stylus. Une fois qu'on appuie sur ce bouton, la date doit être récupéré par un appel AJAX et affichée dans la page html avec Javascript.

N.B. : À la différence des exercices précédents, le bouton est de type submit. Au lieu de mettre un onclick sur le bouton, utiliser l'événement onsubmit sur le formulaire pour faire la requête AJAX. Pour annuler l'envoi du formulaire par le navigateur, dans le callback de onsubmit, retournez false (return false;) dans le callback.