Présentation d'AJAX


Table des matières

    Afficher la table des matières

AJAX est le rêve de tout développeur, car vous pouvez :

  • Lire les données d'un serveur Web - après le chargement de la page

  • Mettre à jour une page Web sans recharger la page

  • Envoyer des données à un serveur Web - en arrière-plan

Exemple AJAX

Laissez AJAX changer ce texte



Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML =
    this.responseText;
  }
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

</body>
</html>

Exemple AJAX expliqué

Page HTML

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>Let AJAX change this text</h2>	<button type="button" onclick="loadDoc()">Change Content</button>
 </div>

</body>
</html>

La page HTML contient une section <div> et un <button>.

Le <div> La section est utilisée pour afficher les informations d’un serveur.

Le appelle une fonction (si on clique dessus).

La fonction demande des données à un site Web serveur et l'affiche :

Fonction loadDoc()

function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    
document.getElementById("demo").innerHTML = this.responseText;
    }
  xhttp.open("GET", "ajax_info.txt", true);
  
xhttp.send();
}


Qu’est-ce qu’AJAX ?

AJAX=Asynchrone JavaScript And XML.

AJAX n'est pas un langage de programmation.

AJAX utilise simplement une combinaison de :

  • Un objet XMLHttpRequest intégré au navigateur (pour demander des données à un serveur Web)

  • JavaScript et HTML DOM (pour afficher ou utiliser les données)

AJAX est un nom trompeur. Les applications AJAX peuvent utiliser XML pour transporter des données, mais il est également courant de transporter des données sous forme de texte brut ou de texte JSON.

AJAX permet aux pages Web d'être mises à jour de manière asynchrone en échangeant des données avec un serveur Web en arrière-plan. Cela signifie qu'il est possible de mettre à jour des parties d'une page Web sans recharger la page entière.


Comment fonctionne AJAX

  • 1. Un événement se produit dans une page web (la page est chargée, un bouton est cliqué)

  • 2. Un objet XMLHttpRequest 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


Navigateurs modernes (API Fetch)

Les navigateurs modernes peuvent utiliser l'API Fetch au lieu de l'objet XMLHttpRequest.

L'interface API Fetch permet au navigateur Web d'envoyer des requêtes HTTP aux serveurs Web.

Si vous utilisez l'objet XMLHttpRequest, Fetch peut faire la même chose de manière plus simple.