AJAX avec jQuery 2

Modèle classique du web
• Une requête HTTP ↔ Chargement d'une nouvelle page
List of
messages
Display
Message
#1
Compose
message
Display
Message
#2
AJAX avec jQuery
2
Modèle classique : discussion
• Avantages
– simplicité du client
– le serveur fait tout le travail de génération des pages : modèle
assez sûr (sécurité)
• Inconvénients
– transmission fréquente de pages entières
→ consommation de bande passante
– attente du chargement des pages parfois long, à un moment
la fenêtre affiche une page blanche...
→ ergonomie dégradée par rapport à une application native
AJAX avec jQuery
3
AJAX, Asynchronous Javascript and XML
• Possibilité pour le code JavaScript d'une page d'effectuer des
requêtes HTTP (sans changer de page)
• Réponse asynchrone : fonction de callback
Application
Web
AJAX avec jQuery
Serveur
web
4
AJAX : discussion
• Avantages
– La page n'échange que les données qui ont besoin de
changer : un e-mail, une image, etc.
→ bande passante et temps de transfert réduits
– La page peut rester opérationnelle pendant l'attente d'une
réponse à une requête
• Inconvénients
– Nécessité d'avoir un moteur JavaScript performant dans le
navigateur → course actuelle aux optimisations
– Sécurité : attention à ne pas faire confiance au client !
– Contenu pas indexable par les moteurs de recherche
– Bouton « retour » non fonctionnel par défaut
AJAX avec jQuery
5
Exemples AJAX
• GMail ne charge que les messages, pas la page entière
• Google Maps :
– ne charge que des portions carrées des cartes/images satellite
(« tuiles »)
– même lorsque des dalles sont en cours de chargement on
peut continuer à déplacer/zoomer sur la carte
• Google (moteur de recherche) :
– affiche des suggestions au cours de la frappe
– obtention en arrière-plan, ce qui n'empêche pas de continuer
à taper
AJAX avec jQuery
6
Comment utiliser les requêtes AJAX ?
• À la base, utilisation de l'objet JavaScript XMLHttpRequest
• Choix à faire :
– mode synchrone ou asynchrone
– type de requête HTTP : GET, PUT (dépend du côté serveur)
– format d'échange : XML ou JSON
Différences d'implémentation entre les navigateurs
AJAX avec jQuery
7
Requête synchrone
Script
JavaScript
formulation
requête AJAX
résultat
Client (navigateur)
AJAX avec jQuery
Objet
XML
Http
Request
Serveur
web
Réseau
Serveur
8
Requête asynchrone
Script
JavaScript
formulation
requête AJAX
function de
callback
résultat
Client (navigateur)
AJAX avec jQuery
Objet
XML
Http
Request
Serveur
web
Réseau
Serveur
9
Exemple asynchrone
function handler() {
if(this.readyState == 4 && this.status == 200) {
// so far so good
if(this.responseXML != null)
process(this.responseXML.getDocumentElement());
// else an error occurred
} else if (this.readyState == 4 && this.status != 200) {
// fetched the wrong page or network error...
}
}
var client = new XMLHttpRequest();
client.onreadystatechange = handler;
client.open("GET", "http://example.com/myService");
client.send();
AJAX avec jQuery
10
Précautions en mode asynchrone
Quand on lance une requête asynchrone :
– rien ne garantit que les résultats de la précédente sont arrivés
– l'ordre des réponses peut même être inversé
→ nécessité de prendre en compte ces aléas :
ils ne doivent pas perturber le fonctionnement de l'application
Exemple :
Si on tape « a » puis « b » dans le champ de recherche Google,
si le résultat de la recherche pour « a » arrive après celui pour « ab »
il ne faut pas afficher les résultats pour « a » !
AJAX avec jQuery
11
GET ou POST ?
• GET
– Les paramètres éventuels sont dans l'URL
– L'URL peut être mémorisée dans les favoris/marque-pages,
elle peut être indexée par les moteurs de recherche
→ ne doit pas provoquer de mise à jour sur le serveur,
uniquement l'obtention de données
• POST
– En plus de l'URL on peut envoyer des données au serveur
(XML, JSON...)
→ convient bien à la modification de données
AJAX avec jQuery
12
AJAX avec jQuery
• Simplifie l'utilisation, masque les incompatibilités entre
navigateurs
• Exemple
précédent :
$.ajax({
url: "http://example.com/myService",
dataType: "xml",
type: "GET",
success: processSuccess,
error: processError,
});
function processSuccess(data) {
...
Objet jQuery → manipulable !
}
function processError() {
...
}
AJAX avec jQuery
13
Requêtes inter-domaines
• Par défaut, les requêtes inter-domaines sont interdites :
Same-Origin Policy
a.fr
Page
http://a.fr/truc
→ téléchargée sur a.fr
b.org
• b.org peut autoriser les requêtes émanant d'autres domaines
avec l'en-tête HTTP Access-Control-Allow-Origin: *
AJAX avec jQuery
14
Contourner la restriction
Mettre en place un « proxy » sur votre serveur web :
a.fr
Page
http://a.fr/truc
→ téléchargée sur a.fr
b.org
AJAX avec jQuery
15
Exemple AJAX avec jQuery, données JSON
Appel à l'API de Flickr
$(function() {
$.ajax({
url: "http://www.flickr.com/services/rest/?
method=flickr.photos.search&
api_key=...&
format=json&nojsoncallback=1&
text=Supelec",
dataType: "json",
success: processSuccess,
error: processError,
});
AJAX avec jQuery
URL construite
en suivant la
documentation
de l'API Flickr
16
Versions abrégées 1
Requête AJAX asynchrone, avec fonction de callback
$.get(
"fichier.html",
{id:1},
function(data){
console.log(data);
}
);
AJAX avec jQuery
$.getJSON(
"fichier.json",
{id:1},
function(users) {
console.log (users[0].name);
}
);
17
Versions abrégées 2
Charger le contenu d'un fichier HTML dans une balise :
Forme simple :
$("div").load("fichier.html");
Avec arguments :
$("div#content").load(
"fichier.php",
{"nom":"toto"});
Ne charger qu'une partie du contenu du fichier :
$("div").load('test.html #monid')
AJAX avec jQuery
18
Exemples de services web
• Flickr
– http://www.flickr.com/services/rest/
• Google Books
– https://www.googleapis.com/books/v1/volumes?q=boulle+kwai
– doc : http://code.google.com/intl/frFR/apis/books/docs/v1/getting_started.html
– JSON
• http://www.w3.org/wiki/CORS_Enabled
AJAX avec jQuery
19
xkcd.com, 7 décembre 2012
20