Bienvenue dans cette partie où vous allons apprendre les bases de Ajax
Comme toujours ce cours sera accompagné de quelques exemples et exercices pour vous permettre de mettre en pratique ce que vous apprenez.
Ajax est une technologie web qui permet des interactions dynamiques entre le navigateur et le serveur sans recharger complètement la page. Cela est possible grâce à l'utilisation d'asynchronisme, de JavaScript et de requêtes HTTP.
- L'objet XMLHttpRequest
: C'est le composant clé d'Ajax. Il permet d'envoyer et de recevoir des requêtes HTTP de manière asynchrone.
Voici un exemple simple de création d'un objet XMLHttpRequest :
var xhttp = new XMLHttpRequest();
- Les événements JavaScript : Ils sont utilisés pour détecter et réagir aux changements d'état de la requête Ajax.
Par exemple, vous pouvez utiliser le gestionnaire d'événements onreadystatechange
pour détecter quand la requête est terminée.
Voici un exemple :
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Faire quelque chose avec la réponse
}
};
- Ouverture de la requête : Vous devez spécifier le type de requête (GET, POST, etc.) et l'URL cible. Par exemple :
xhttp.open("GET", "exemple.php", true);
- Envoi de la requête : Une fois que la requête est ouverte, vous devez l'envoyer au serveur. Par exemple :
xhttp.send();
- Traitement de la réponse : Une fois la requête terminée, vous pouvez utiliser la propriété responseText
de l'objet XMLHttpRequest
pour accéder à la réponse du serveur. Voici un exemple :
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
};
Exemple 1 : Chargement asynchrone de contenu
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("resultat").innerHTML = this.responseText;
}
};
xhttp.open("GET", "contenu.html", true);
xhttp.send();
</script>
Exemple 2 : Envoi de données avec Ajax
<form id="monFormulaire">
<input type="text" name="nom">
<input type="submit" value="Envoyer">
</form>
<script>
document.getElementById("monFormulaire").addEventListener("submit", function(event) {
event.preventDefault(); // Empêche le rechargement de la page
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log("Données envoyées avec succès !");
}
};
xhttp.open("POST", "traitement.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("nom=" + document.getElementsByName("nom")[0].value);
});
</script>
Passons maintenant à la réalité. ohhh!!! je rigole, mais je ne dis pas que nous étions dans une caverne !
J'ai deux fichiers : un fichier test.php
et un fichier test.html
. Je vais essayer de les utiliser pour mes
requêtes et nous verrons les résultats.
Voici les codes de chaque fichier :
test.php
<?php
echo "salut ! Comment vous trouvez ajax ?";
?>
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>Je suis Russell</h3>
</body>
</html>
Voici la partie ajax
que je vais utiliser pour lancer la requête d'abord avec test.php
et ensuite avec test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="makeRequest()">Envoyer la requête</button>
<div id="demo"></div>
<script type="text/javascript">
const httpRequest = new XMLHttpRequest();
function makeRequest() {
httpRequest.onreadystatechange = writeContent;
httpRequest.open("GET", "fichier_a_utiliser.extension");
httpRequest.send();
}
function writeContent() {
if (httpRequest.readyState === 4) {
if (httpRequest.status == 200) {
document.getElementById("demo").innerHTML =
httpRequest.responseText;
} else {
alert("Un problème est survenu lors de l'envoi de la requête .");
}
}
}
</script>
</body>
</html>
Nous commençons avec test.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="makeRequest()">Envoyer la requête</button>
<div id="demo"></div>
<script type="text/javascript">
const httpRequest = new XMLHttpRequest();
function makeRequest() {
httpRequest.onreadystatechange = writeContent;
httpRequest.open("GET", "test.php");
httpRequest.send();
}
function writeContent() {
if (httpRequest.readyState === 4) {
if (httpRequest.status == 200) {
document.getElementById("demo").innerHTML =
httpRequest.responseText;
} else {
alert("Un problème est survenu lors de l'envoi de la requête .");
}
}
}
</script>
</body>
</html>
Voici le résultat
Nous terminons avec test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="makeRequest()">Envoyer la requête</button>
<div id="demo"></div>
<script type="text/javascript">
const httpRequest = new XMLHttpRequest();
function makeRequest() {
httpRequest.onreadystatechange = writeContent;
httpRequest.open("GET", "test.html");
httpRequest.send();
}
function writeContent() {
if (httpRequest.readyState === 4) {
if (httpRequest.status == 200) {
document.getElementById("demo").innerHTML =
httpRequest.responseText;
} else {
alert("Un problème est survenu lors de l'envoi de la requête .");
}
}
}
</script>
</body>
</html>
Voici le résultat
ul
).