TP1 Ihm

Université de Monastir A.
U : 2021 - 2022
Institut supérieur d'informatique de Mahdia
Département Informatique
TP : Framework IHM
TP1 Débutant avec Ajax

But :
Dans ce TP nous allons voir comment faire de l'Ajax en JavaScript. L'Ajax permet d'appeler une page en
JavaScript et de récupérer les informations afin d'effectuer un traitement particulier.
I. Définitions :
1. AJAX : Asynchronous JavaScript And XML
(JavaScript asynchrone et XML)
➢ JavaScript : langage de script côté client (navigateur)
➢ Asynchrone : par rapport au chargement de la page Web et des portions de page Web
➢ XML : langage à balises permettant, entre autre, de structurer des données
• Permet, grâce à JavaScript, la récupération de données XML (mais aussi texte ou JSON) disponibles sur
un serveur Web
▪ N'est PAS une technologie

▪ N'est PAS un logiciel
▪ N'est PAS un greffon (plug-in)
▪ N'est PAS un détergent
▪ C'est l'utilisation conjointe de :
➢ HTML
➢ CSS
➢ DOM / JavaScript
➢ XMLHttpRequest (JavaScript)
➢ XML (ou JSON)
▪ Fonctionnement classique du Web : ▪ Fonctionnement "AJAX" du Web :

◼ Chargement d'une page ◼ Chargement d'une page
◼ Interaction de l'utilisateur (clic, ◼ Interaction de l'utilisateur (clic,
sélection, formulaire, …) sélection, formulaire, …)
◼ Chargement d'une autre page ◼ Chargement d'une partie de page
◼ Interaction de l'utilisateur (clic, ◼ Interaction de l'utilisateur (clic,
sélection, formulaire, …) sélection, formulaire, …)
◼ Chargement d'une autre page ◼ Chargement d'une autre partie de page
2. XMLHTTPRequest
▪ Cœur d'AJAX
▪ Objet JavaScript
1
▪ Permet d'effectuer des requêtes HTTP et d'en récupérer le résultat
3. XMLHTTPRequest : propriétés
Gestionnaire d'événements pour les changements d'état. Il faut

onreadystatechange assigner une fonction à cette propriété pour traiter sur les
données renvoyées.
readyState Statut de l'objet.
responseText Réponse sous forme de chaîne de caractères.
responseXML Réponse sous forme d'objet DOM.
status Code numérique de réponse du serveur HTTP.
statusText Message accompagnant le code de réponse.
4. XMLHTTPRequest : méthodes
abort Abandonne la requête HTTP.

getAllResponseHeaders Renvoie l'ensemble des entêtes HTTP de la réponse.
getResponseHeader Renvoie la valeur d'un champ d'entête HTTP.
open Prépare une requête HTTP en indiquant ses paramètres.
send Effectue la requête HTTP, en envoyant les données.
setRequestHeader Assigne une valeur à un champ d'entête HTTP.
5. Utilisation de XMLHTTPRequest
1. Instancier l'objet
2. Initialiser une requête
◼ Méthode, URL
◼ Asynchrone ?
3. Associer une fonction au traitement du résultat de la requête
4. Effectuer la requête
◼ Envoyer des données ?
5. Traiter le résultat
◼ Texte ?
◼ XML / JSON ?
II. Création de l'objet XHR

1. Comme leur nom ne l'indique pas, les objets XMLHTTPRequest permettent de récupérer toutes
sortes de données, et pas seulement des fichiers XML. Pour effectuer une requête, il faut tout d'abord
déclarer une certaine variable. Ensuite, on envoie la requête et enfin, on attend la réponse.
2
Une fois la réponse obtenue, une boîte d'alerte s'affiche.
➢ Créez un fichier app.js
var xhr_object = new XMLHttpRequest();

xhr_object.open("GET","" , false);
xhr_object.send(null);
if (xhr_object.readyState == 4) alert
("Requête effectuée !");
➢ Créez aussi un fichier index.html
<html>
<head>
<meta charset="utf-8">
<title>TUTO JS L'Objet XMLHttpRequest (Ajax)</title>
</head>
<body>
<h1>TUTO JS -L'Objet XMLHttpRequest (Ajax)</h1>

<div id="demo"></div>
<script src="app.js"></script>
</body>
</html>
Le résultat est :
Comment ça marche ?
• ligne 1 : on crée une instance de l'objet XMLHTTPRequest

• ligne 2 : on spécifie la méthode de transmission des données, l'URL et le mode de transmission de
la requête ;
• ligne 3 : on exécute la requête proprement dite ;
3
• ligne 5 : on affiche une boîte d'alerte dès que la requête est terminée.
2. Synchrone Vs. Asynchrone

Dans l’exemple que nous avons vu jusqu'à maintenant, c'est le mode synchrone qui était utilisé. Cela signifie que
tant que le résultat de la requête ne nous est pas parvenu, le script est en pause et le navigateur bloqué. Avec un
bon débit et/ou peu de données à transmettre, on pourrait s'en contenter mais cela peut vite s'avérer gênant pour
l'utilisateur qui voit son navigateur figé. Ce mode de transmission est donc à proscrire. Heureusement, il existe le
mode asynchrone. Dans ce mode, après avoir envoyé la requête via send, le script poursuit son exécution, sans
bloquer le navigateur. Évidemment, dans ce mode, il faut prévoir quelque chose pour nous prévenir quand la
requête a abouti. C'est le rôle de la fonction onreadystatechange (en fait, onreadystatechange est une propriété et
non une fonction, mais comme on lui affecte un pointeur vers une fonction nous pouvons nous permettre cet abus
de langage).
Prenons comme nouvel exemple une requête sur un simple fichier texte :
Créez un autre fichier index.html :
<script type="text/javascript">
function ajax1() {
console.clear();
xhr_object = new XMLHttpRequest();
xhr_object.open("GET", "texte.txt", true);
xhr_object.onreadystatechange = function() {
if(xhr_object.readyState == 4) alert(xhr_object.responseText);
}
xhr_object.send();
}
</script>
<a href="javascript:ajax1()">Lancer l'appel AJAX</a>
le contenu de texte.txt
Ceci est le contenu du fichier.
Le résultat est :
4
3. Un autre exemple appel Ajax avec XMLHttpRequest
Créez un fichier index.html suivant :
<html>
<head>
<meta charset="utf-8">
<title>TUTO JS L'Objet XMLHttpRequest (Ajax)</title>
<script>
function requete() {
var demo = document.getElementById("demo");
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
console.log(this);
if (this.readyState == 4 && this.status == 200) {
demo.innerHTML = this.responseText;
} else if (this.readyState == 4 && this.status == 404) {
alert('Erreur 404 :/');
};
xhr.open("GET", "texte.txt", true);
xhr.responseType = "text";
xhr.send();
</script>
</head>
<body>
<h1>TUTO JS L'Objet XMLHttpRequest (Ajax)</h1>
<div id="demo"></div>
5
<form id="formreq">
<a href="javascript:requete()">Lancer l'appel AJAX</a>
</form>
</body></html>
Le résultat est :

TP1 Ihm

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP1 Ihm

Titre original :

Transféré par

Droits d'auteur :

Formats disponibles

Université de Monastir A.

TP1 Débutant avec Ajax

▪ N'est PAS une technologie

▪ Fonctionnement classique du Web : ▪ Fonctionnement "AJAX" du Web :

Gestionnaire d'événements pour les changements d'état. Il faut

abort Abandonne la requête HTTP.

II. Création de l'objet XHR

var xhr_object = new XMLHttpRequest();

➢ Créez aussi un fichier index.html

<h1>TUTO JS -L'Objet XMLHttpRequest (Ajax)</h1>

• ligne 1 : on crée une instance de l'objet XMLHTTPRequest

2. Synchrone Vs. Asynchrone

xhr_object = new XMLHttpRequest();

xhr_object.open("GET", "texte.txt", true);

Ceci est le contenu du fichier.

Créez un fichier index.html suivant :

<title>TUTO JS L'Objet XMLHttpRequest (Ajax)</title>

var demo = document.getElementById("demo");

var xhr = new XMLHttpRequest();

if (this.readyState == 4 && this.status == 200) {

} else if (this.readyState == 4 && this.status == 404) {

alert('Erreur 404 :/');

xhr.open("GET", "texte.txt", true);

<h1>TUTO JS L'Objet XMLHttpRequest (Ajax)</h1>

<a href="javascript:requete()">Lancer l'appel AJAX</a>

Vous aimerez peut-être aussi