Auteur Auteur

Ajax

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.

Introduction à Ajax :

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.

1. Les bases d'Ajax :

- 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
  }
};

2. Les étapes d'une requête Ajax :

- 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);
  }
};

3. Exemples d'utilisation d'Ajax :

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


Exercices :
  • Créez une page web qui utilise Ajax pour afficher les données d'un fichier JSON dans une liste non ordonnée (ul).
  • Ajoutez des boutons "Précédent" et "Suivant" à votre page web pour naviguer dans les données JSON à l'aide d'Ajax.
  • Créez un formulaire de connexion qui utilise Ajax pour vérifier les informations saisies par l'utilisateur (nom d'utilisateur et mot de passe) et afficher un message d'erreur ou de succès en conséquence.
Précédent