Ajax et jQuery sont des outils permettant de développer des applications web.
Le langage de programmation permettant la mise en oeuvre d'Ajax et de JQuery est le JavaScript. C'est un langage de script dont le code est inséré dans une page HTML et donc interprété par le navigateur. Cependant, les applications web font aussi appel à des scripts serveur, développés par exemple en PHP.
XMLHttpRequest est une classe JavaScript qui permet d'assurer des requêtes synchrones ou asynchrones vers un serveur HTTP.
Lors de l'emploi de la bibliothèque jQuery, l'utilisation de la classe XMLHttpRequest est masquée.
La création d'un objet XMLHttpRequest dans une page HTML est montrée ci-dessous.
<script> xhr = new XMLHttpRequest(); // ... </script>
Dans cet exemple, "xhr" est le nom de l'objet instance de la classe XMLHttpRequest.
Firebug est une extension de Firefox qui permet d'inspecter et déboguer du code JavaScript, de l'HTML, du CSS. Il vous faut l'installer si ce n'est déjà fait. L'installation se fait à partir de Firefox en cliquant sur "Outils/Modules Complémentaires".
Une fois l'installation terminée, il suffit de cliquer sur "Outils/Développement Web/Firebug/Ouvrir Firebug" afin de démarrer le débogueur. On obtient le même résultat en appuyant sur la touche F12 du clavier.
L'interface de Firebug est composée de six onglets principaux :
Vous allez solliciter un script PHP depuis une page HTML, via une instance de la classe JavaScript XMLHttpRequest.
L'envoi de la requête sollicitant le script serveur se fera en mode asynchrone. Toute interaction entre l'utilisateur et la page web active est possible à partir de l'émission de la requête vers le serveur même si la réponse de ce dernier n'est pas complètement arrivée.
1. Tester les fichiers ci-dessous. Commenter le résultat. Que fait le fichier script.php ?
Fichier "index.html" :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function afficher() {
xhr = new XMLHttpRequest();
xhr.open("GET", "script.php", true);
xhr.send(null);
xhr.onreadystatechange = changer;
}
function changer() {
if (xhr.readyState == 4) {
document.getElementById("nb_hr").innerHTML=xhr.responseText;
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Cliquez!" onclick="afficher();">
</form>
<br><div id="nb_hr"></div>
</body>
</html>
Fichier "script.php" :
<?php $valeur=mt_rand(3, 25); $horaire=getdate(); $heure=$horaire["hours"]; $min=$horaire["minutes"]; $sec=$horaire["seconds"]; $retour="Valeur : ".$valeur." - Horaire : ".$heure." h ".$min." min ".$sec." s"; echo $retour; ?>
2. A partir de l'onglet HTML de Firebug et déployant l’arborescence de la page, donner l'identifiant de la balise dans laquelle est inscrite la réponse du serveur générée par le script php. Par quel moyen est intégrée cette réponse à la page?
3. Commenter les lignes suivantes :
xhr = new XMLHttpRequest();
xhr.open("GET", "script.php", true);
xhr.send(null);
xhr.onreadystatechange = changer;
4. Positionner le troisième paramètre de la méthode open() à false. Qu'est-ce que cela signifie? Solliciter la page à nouveau et noter le changement dans la console. Positionner à nouveau ce paramètre à true.
5. Quel est la propriété d'une instance de XMLHttpRequest qui permet de savoir si le script sollicité existe ou pas? Avec quelle valeur numérique faudrait-il comparer cette propriété afin de prévoir un message d'erreur le cas échéant?
6. Afin d'alléger l'écriture de la page HTML, on se propose de mettre le code de la fonction JavaScript "changer()" dans un fichier distinct, avec l'extension ".js". L'inclusion d'un script JavaScript stocké dans un fichier annexe se fait avec le code ci-dessous, à mettre dans l'en-tête du fichier HTML.
<script src="nomfichier.js"> </script>
Stocker la fonction "changer()" dans un fichier "changer.js" et inclure ce dernier dans la page HTML comme indiqué ci-dessus. Valider.
7. Comment se fait-il que l'objet "xhr" soit connu dans la fonction "changer()" alors qu'il est défini dans le fichier "index.html"?
Il s'agit de récupérer depuis le serveur, par le biais du script php, une valeur numérique toutes les 3 secondes. La périodicité de 3 secondes sera mise en oeuvre par l'appel de la fonction JavaScript "setInterval()".
La fonction setInterval(nom_fonction,période) possède deux arguments :
Dans un deuxième temps, les données seront récupérées dans le format JSON.
Le fichier "index.html" est modifié comme il suit :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function afficher() {
xhr = new XMLHttpRequest();
xhr.open("GET", "script.php", true);
xhr.send(null);
xhr.onreadystatechange = changer;
}
function changer() {
if (xhr.readyState == 4) {
document.getElementById("nb_hr").innerHTML=xhr.responseText;
}
}
window.onload=function(){
setInterval(*****,*****);
};
</script>
</head>
<body>
<br><div id="nb_hr"></div>
</body>
</html>
1. L'attribut "onload" de l'objet JavaScript "window" peut être affecté par le nom d'une fonction qui sera exécutée une fois l'ensemble de la page HTML chargée. Pourquoi avoir pris cette précaution?
2. Remplacer les chaînes de caractères ***** par leurs valeurs adéquates. Vérifier que l'application fonctionne.
Plusieurs solutions permettent de modifier le contenu d'une page HTML sans avoir à la recharger dans son intégralité. Le DOM (Document Object Model) permet de manipuler les éléments d'un document HTML ou XHTML, organisés hiérarchiquement, grâce à un ensemble de fonctionnalités.
3. Etudier et commenter le code suivant :
var baliseresultat = document.getElementById("id_resultat");
baliseresultat.removeChild(baliseresultat.firstChild);
var nouveauContenu = document.createTextNode(nouvelAcq);
baliseresultat.appendChild(nouveauContenu);
4. Remplacer l'utilisation de la propriété innerHTML par le code précédent dans la fonction "changer()". Adapter le code pour obtenir le résultat voulu.
Dans les exemples précédents, les données serveur étaient envoyées au client sans être structurées. Hors, la plupart du temps, les informations issues d'un serveur seront composées de plusieurs champs/propriétés d'où l'intérêt de formater les échanges.
Ajax permet d'utiliser de manière simple deux formats d'échanges aussi bien pour une requête client → serveur qu'une réponse serveur → client : XML et JSON.
JSON (JavaScript Object Notation) permet de présenter les informations échangées entre un client et un serveur dans un format texte standard, indépendant de tout langage, en organisant l'information sous la forme d'objet ou de collection d'objets.
Exemple d'objet JSON représentant une acquisition :
{
"valeur":7,
"horaire":"16 h 30 min 15 s"
}
1. Modifier le fichier "script.php" afin qu'il génère, lors de l'appel à echo, un objet JSON similaire à celui présenté ci-dessus.
2. Tester le fonctionnement de la nouvelle application. Visualiser la donnée JSON renvoyée par le serveur sous la console Firebug.
3. Modifier et compléter la fonction "changer()" afin:
function changer() {
if (xhr.readyState == 4) {
nb_hr=JSON.parse(xhr.responseText);
//...
}
}
jQuery est une bibliothèque JavaScript qui permet d'optimiser l'écriture de scripts ("write less, do more") en prévoyant les fonctionnalités les plus couramment rencontrées lors du développement d'application web : Manipulation du DOM et des CSS, mise en oeuvre d'Ajax, création d'animations...
jQuery se présente sous forme d'un fichier JavaScript. Une version de ce fichier est compressée pour minimiser les temps de chargement.
L'objectif de cette partie est d'appréhender l'utilisation de JQuery.
L'application attendue est similaire à celle du III, si ce n'est l'utilisation de jQuery en lieu et place d'une instance de XMLHttpRequest. On utilise la fonction $.ajax() pour nos appels Ajax.
Vous pouvez obtenir jQuery de deux manières :
Le fichier "index.html" devient :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="*****"></script>
<script>
function afficher() {
$.ajax({
url : 'script.php',
type : 'GET',
dataType : 'json',
success : changer
});
}
function changer(data) {
// A adapter...
document.getElementById("nb").innerHTML="valeur : "+data.valeur;
}
$(document).ready(function() {
setInterval(*****,*****);
});
</script>
</head>
<body>
<br><div id="nb"></div>
</body>
</html>
Adapter le code ci-dessus afin d'obtenir une application fonctionnant correctement.