Introduction à AJAX

L'AJAX est un rêve pour les développeurs, car vous pouvez :

  • Mettre à jour la page Web sans actualiser la page
  • Demander des données au serveur après le chargement de la page
  • Recevoir des données du serveur après le chargement de la page
  • Envoyer des données au serveur en arrière-plan

Exemple AJAX

Cliquez sur le bouton suivant pour faire changer ce texte par Ajax :

Essayez-le vous-même

Explication de l'exemple AJAX

Page HTML

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>faites que l'AJAX change ce texte</h2>
  <button type="button" onclick="loadDoc()">Modifier le texte</button>
</div>
</body>
</html>

Cette page HTML contient un <div> et un <button>.

<div> Utilisé pour afficher les informations provenant du serveur.

<button> Appeler la fonction (quand elle est cliquée).

Cette fonction demande des données au serveur web et les affiche :

Function loadDoc()
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

Qu'est-ce que l'AJAX ?

AJAX = Asynchronous JvaScript And XML.

AJAX n'est pas un langage de programmation.

AJAX ne fait que combiner :

  • Objet XMLHttpRequest intégré au navigateur (demande de données au serveur web)
  • JavaScript et HTML DOM (affichage ou utilisation de données)

Ajax est un nom trompeur. Les applications Ajax peuvent utiliser XML pour transférer des données, mais le transfert de données en texte brut ou en texte JSON est également courant.

Ajax permet de mettre à jour asynchrone la page web en échangeant de données avec le serveur web derrière la scène. Cela signifie que l'on peut mettre à jour une partie de la page sans reloadent toute la page.

Comment fonctionne AJAX

AJAX
  1. Un événement se produit dans la page web (chargement de la page, clic sur un bouton)
  2. L'objet XMLHttpRequest est créé par JavaScript
  3. L'objet XMLHttpRequest envoie une demande au serveur web
  4. Le serveur traite la demande
  5. Le serveur envoie la réponse en retour à la page web
  6. Réponse lue par JavaScript
  7. Actions correctes exécutées par JavaScript (par exemple, mise à jour de la page)