EcolE NatioNalE SupériEurE d’artS Et MétiErS
Casablanca
Travaux Pratiques
Filière : IAGI 2 Module : Technologies web
Semestre : 7 Matière : Back-END
Date : 10 /12 / 2024
Atelier 6 : PHP AJAX
Objectif : Création d’une fenêtre de discussion
Introduction :
AJAX (Asynchronous JavaScript and XML) est une technique de développement web qui
permet de créer des pages web interactives et dynamiques. Elle permet de charger ou d'envoyer
des données à un serveur de manière asynchrone, c'est-à-dire sans avoir à recharger toute la
page. Ainsi, AJAX permet de rendre les applications web plus interactives et performantes en
facilitant les échanges de données entre le client et le serveur.
Principes clés d'AJAX :
Asynchronisme : AJAX permet de récupérer ou d'envoyer des données en arrière-plan :
mettre à jour une partie de la page sans avoir à la recharger complètement.
Utilisation de JavaScript : AJAX repose principalement sur JavaScript pour effectuer
des requêtes HTTP (comme GET ou POST) vers le serveur.
Communication avec le serveur : AJAX utilise un objet appelé XMLHttpRequest
(ou Fetch API dans des implémentations plus modernes) pour envoyer des requêtes et
recevoir des réponses du serveur sans avoir besoin de recharger la page.
Données au formats variés : AJAX peut manipuler des formats comme XML, JSON,
HTML ou même du texte brut.
Pr. L. EL Faquih A.U : 2024-2025 Page 1 / 10
EcolE NatioNalE SupériEurE d’artS Et MétiErS
Casablanca
Travaux Pratiques
1. Un événement se produit dans une page web (la page est chargée, un bouton est
cliqué).
2. Un objet XMLHttpRequest (XHR) est créé par JavaScript
3. L'objet XMLHttpRequest envoie une requête à un serveur web
4. Le serveur traite la demande
5. Le serveur renvoie une réponse à la page web
6. La réponse est lue par JavaScript
7. L'action appropriée (comme la mise à jour de la page) est effectuée par JavaScript.
Les méthodes de l’objet XMLHttpRequest :
Method Description
new XMLHttpRequest() Creates a new XMLHttpRequest object
abort() Cancels the current request
getAllResponseHeaders() Returns header information
getResponseHeader() Returns specific header information
Specifies the request
method: the request type GET or POST
url: the file location. The file can be any kind of file, like
.txt and .xml, or server scripting files like .asp and .php
open(method,url,async,user,psw)
(which can perform actions on the server before sending
the response back).
async: true (asynchronous) or false (synchronous)
user: optional user name
psw: optional password
Sends the request to the server
send()
Used for GET requests
Sends the request to the server.
send(string)
Used for POST requests
setRequestHeader() Adds a label/value pair to the header to be sent
Asynchronous - True or False?
Les requêtes du serveur doivent être envoyées de manière asynchrone. Le paramètre
asynchrone de la méthode open() doit être fixé à true :
xhttp.open("GET", "ajax_test.asp", true);
Grâce à l'envoi asynchrone, le JavaScript ne doit pas attendre la réponse du serveur, mais peut
au contraire
Pr. L. EL Faquih A.U : 2024-2025 Page 2 / 10
EcolE NatioNalE SupériEurE d’artS Et MétiErS
Casablanca
Travaux Pratiques
- exécuter d'autres scripts en attendant la réponse du serveur
- traiter la réponse une fois qu'elle est prête
Synchronous Request
Pour exécuter une requête synchrone, remplacez le troisième paramètre de la méthode open()
par false :
xhttp.open(« GET », « ajax_info.txt », false) ;
Parfois, async = false sont utilisés pour des tests rapides. Vous trouverez également des requêtes
synchrones dans des codes JavaScript plus anciens.
Puisque le code attendra que le serveur ait terminé, il n'est pas nécessaire d'avoir une fonction
onreadystatechange :
Exemple
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
Les propriétés de l’objet XMLHttpRequest :
Property Description
Defines a function to be called when the readyState
onreadystatechange
property changes
Holds the status of the XMLHttpRequest.
0: request not initialized
1: server connection established
readyState
2: request received
3: processing request
4: request finished and response is ready
responseText Returns the response data as a string
responseXML Returns the response data as XML data
Returns the status-number of a request
200: "OK"
status
403: "Forbidden"
404: "Not Found"
statusText Returns the status-text (e.g. "OK" or "Not Found")
Pr. L. EL Faquih A.U : 2024-2025 Page 3 / 10
EcolE NatioNalE SupériEurE d’artS Et MétiErS
Casablanca
Travaux Pratiques
Exemple :
<!DOCTYPE html>
<html>
<body>
<h2>Using the XMLHttpRequest Object</h2>
<div id="demo">
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</div>
<script>
function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "content.txt", true);
xhttp.send();
}
</script>
</body>
</html>
Explication :
La première ligne créér l’objet XMLHttpRequest object:
var xhttp = new XMLHttpRequest();
La propriété onreadystatechange spécifie une fonction à exécuter chaque fois que le statut de
l'objet XMLHttpRequest change :
xhttp.onreadystatechange = function()
Lorsque la propriété readyState vaut 4 et que la propriété status vaut 200, la réponse est
prête :
if (this.readyState == 4 && this.status == 200)
La propriété responseText renvoie la réponse du serveur sous la forme d'une chaîne de texte.
Cette chaîne de texte peut être utilisée pour mettre à jour une page web:
document.getElementById("demo").innerHTML = xhttp.responseText;
Pr. L. EL Faquih A.U : 2024-2025 Page 4 / 10
EcolE NatioNalE SupériEurE d’artS Et MétiErS
Casablanca
Travaux Pratiques
GET or POST?
GET est plus simple et plus rapide que POST et peut être utilisé dans la plupart des cas.
Toutefois, il convient de toujours utiliser les requêtes POST dans les cas suivants :
Un fichier mis en cache n'est pas envisageable (mise à jour d'un fichier ou d'une base
de données sur le serveur).
Envoi d'une grande quantité de données au serveur (POST n'a pas de limites de taille).
Envoi d'une entrée utilisateur (qui peut contenir des caractères inconnus). POST est
plus robuste et plus sûr que GET.
Requêtes GET :
Utiliser les méthodes open() et send() de l'objet XMLHttpRequest pour envoyer une requête à
un serveur :
xhttp.open("GET", " ajax_info.txt ", true);
xhttp.send();
Pour envoyer des informations avec la méthode GET, ajouter les à l’URL :
xhttp.open("GET", "demo_get2.asp?fil=IAGI&Sname=ENSAM", true);
xhttp.send();
Requêtes POST :
Exemple :
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
Pour envoyer des données comme un formulaire HTML, ajoutez un en-tête HTTP avec
setRequestHeader(). Spécifiez les données que vous souhaitez envoyer dans la méthode send() :
xhttp.open("POST", "demo_post2.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
Pr. L. EL Faquih A.U : 2024-2025 Page 5 / 10
EcolE NatioNalE SupériEurE d’artS Et MétiErS
Casablanca
Travaux Pratiques
Method Description
Adds HTTP headers to the request :
setRequestHeader(header, value) header: specifies the header name
value: specifies the header value
AJAX : Réponse du Serveur
La propriété onreadystatechange
La propriété readyState contient l'état de la requête XMLHttpRequest.
La propriété onreadystatechange définit une fonction à exécuter lorsque l'état readyState
change.
Les propriétés status et statusText indiquent l'état de l'objet XMLHttpRequest.
Property Description
onreadystatechange Defines a function to be called when the readyState property changes
Holds the status of the XMLHttpRequest.
0: request not initialized
1: server connection established
readyState
2: request received
3: processing request
4: request finished and response is ready
200: "OK"
status 403: "Forbidden"
404: "Page not found"
statusText Returns the status-text (e.g. "OK" or "Not Found")
La fonction onreadystatechange est appelée chaque fois que le readyState change.
Lorsque readyState est égal à 4 et que le statut est 200, la réponse est prête :
Exemple
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
Pr. L. EL Faquih A.U : 2024-2025 Page 6 / 10
EcolE NatioNalE SupériEurE d’artS Et MétiErS
Casablanca
Travaux Pratiques
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
Le fichier "ajax_info.txt":
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a technique for accessing web servers from a web page.</p>
<p>AJAX stands for Asynchronous JavaScript And XML.</p>
L'événement « onreadystatechange » est déclenché quatre fois (1-4), une fois pour chaque
changement de readyState.
Using a Callback Function
Une fonction de rappel (Callback funtcion) est une fonction passée en paramètre à une autre
fonction.
Si vous avez plus d'une tâche AJAX dans un site web, vous devez créer une fonction pour
exécuter l'objet XMLHttpRequest, et une fonction de rappel pour chaque tâche AJAX.
L'appel de fonction doit contenir l'URL et la fonction à appeler lorsque la réponse est prête.
Exemple :
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
Pr. L. EL Faquih A.U : 2024-2025 Page 7 / 10
EcolE NatioNalE SupériEurE d’artS Et MétiErS
Casablanca
Travaux Pratiques
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
Server Response Properties
Property Description
responseText get the response data as a string
responseXML get the response data as XML data
Server Response Methods
Method Description
getResponseHeader() Returns specific header information from the server resource
getAllResponseHeaders() Returns all the header information from the server resource
The responseText Property
La propriété responseText renvoie la réponse du serveur sous la forme d'une chaîne
JavaScript, et vous pouvez l'utiliser en conséquence :
Example
document.getElementById("demo").innerHTML = xhttp.responseText;
The responseXML Property
L'objet XML HttpRequest possède un analyseur XML intégré.
La propriété responseXML renvoie la réponse du serveur sous la forme d'un objet DOM
XML. En utilisant cette propriété, vous pouvez analyser la réponse en tant qu'objet DOM
XML :
Pr. L. EL Faquih A.U : 2024-2025 Page 8 / 10
EcolE NatioNalE SupériEurE d’artS Et MétiErS
Casablanca
Travaux Pratiques
Exemple : Demander le fichier “cd_catalog.xml” et analyser la réponse :
xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
Pr. L. EL Faquih A.U : 2024-2025 Page 9 / 10
EcolE NatioNalE SupériEurE d’artS Et MétiErS
Casablanca
Travaux Pratiques
Application :
Créez une table Conversation contenant les colonnes (User, Message,
idMessage) où idMessage s'auto incrémente.
Créer une page HTML contenant une fenêtre de dialogue. Cette fenêtre contient, entre
autres, un formulaire dans lequel l'utilisateur doit spécifier un nom. La zone qui
contiendra les messages doit permettre de les faire défiler si le nombre de message
déborde de la zone.
Créer un script PHP qui reçoit avec la méthode POST les informations (User, Message)
et ajoute cette entrée dans la base de données. Ce script stocke dans la
variable $_SESSION l'identifiant du message ajouté.
Utiliser AJAX pour appeler le script PHP qui ajoute un message dans la base de
données.
Créer un script PHP qui renvoie la liste des messages de la base de données, triés dans
l'ordre chronologique inverse (on utilisera l'identifiant du message), et mis en forme de
la manière suivante : le nom de l'auteur apparaît dans une balise de type span, auquel on
ajoutera une classe qui permet de distinguer si l'auteur est le même que l'utilisateur
stocké dans $_SESSION ou non. Le message apparaît dans une balise de type span.
Utiliser Jquery et AJAX (et PHP) pour récupérer à intervalle régulier (toutes les
secondes) les messages de la base de données et les place dans la fenêtre de dialogue.
Pr. L. EL Faquih A.U : 2024-2025 Page 10 / 10
