Tutoriel AJAX: Qu'est-ce qu'AJAX et comment l'utiliser

Qu'est-ce que AJAX?

AJAX signifie JavaScript et XML asynchrones . Ce n'est pas un langage de programmation. Il s'agit d'une technologie permettant de développer des applications Web meilleures, plus rapides et interactives utilisant HTML, CSS, JavaScript et XML.

  1. HTML: Le langage HTML (Hypertext Markup Language) est utilisé pour définir la structure d'une application Web.
  2. CSS: la feuille de style en cascade (CSS) est utilisée pour donner une apparence et un style à une application Web.
  3. JavaScript: JavaScript est utilisé pour rendre une application Web interactive, intéressante et conviviale.
  4. XML: Extensible Markup Language (XML) est un format pour stocker et transporter des données à partir du serveur Web.

Quelle est la signification de Asynchrone dans AJAX?

Asynchrone signifie que l'application Web peut envoyer et recevoir des données du serveur Web sans actualiser la page. Ce processus d'arrière-plan d'envoi et de réception de données du serveur avec la mise à jour de différentes sections d'une page Web définit la propriété / fonctionnalité asynchrone d'AJAX.

Comment fonctionne AJAX

AJAX utilise un objet XMLHttpRequest intégré au navigateur pour demander des données à un serveur Web et HTML DOM pour afficher ou utiliser les données.

Objet XMLHttpRequest : Il s'agit d'une API sous la forme d'un objet dont les méthodes aident au transfert de données entre un navigateur Web et un serveur Web.

HTML DOM : lorsqu'une page Web est chargée, le navigateur crée un modèle d'objet de document de la page.

Créez un objet XMLHttpRequest:

var xhttp = new XMLHttpRequest();

Propriétés de l'objet XMLHttpRequest:

readystate est une propriété de l'objet XMLHttpRequest qui contient l'état de XMLHttpRequest.

  • 0: requête non initialisée
  • 1: connexion au serveur établie
  • 2: demande reçue
  • 3: traitement de la demande
  • 4: la demande est terminée et la réponse est prête

`` `` onreadystatechange``` est une propriété de l'objet XMLHttpRequest qui définit une fonction à appeler lorsque la propriété readyState change.

`` `` status``` est une propriété de l'objet XMLHttpRequest qui renvoie le numéro d'état d'une requête

  • 200: "OK"
  • 403: "Interdit"
  • 404: "Non trouvé"

Méthodes d'objet XMLHttpRequest: Pour envoyer une requête à un serveur Web, nous utilisons les méthodes open () et send () de l'objet XMLHttpRequest.

xhttp.open("GET", "content.txt", true); xhttp.send();

Créez une fonction changeContent () en utilisant JavaScript:

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

Exemple AJAX pour modifier le contenu d'une page Web:

The XMLHttpRequest Object

Change Content function changeContent() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("foo").innerHTML = this.responseText; } }; xhttp.open("GET", "content.txt", true); xhttp.send(); }

Le fichier content.txtdoit être présent dans le répertoire racine de l'application Web.