Utilisation d'Ajax en javascript

À mesure que les applications Web deviennent de plus en plus complexes, les technologies JavaScript et XML (Ajax) asynchrones sont de plus en plus utilisées pour implémenter des pages Web dynamiques. Ajax vous permet de mettre à jour dynamiquement des pages Web en envoyant des requêtes asynchrones en arrière-plan sans avoir à actualiser la page entière. Dans cet article, nous explorerons comment utiliser Ajax en JavaScript.

1. Créer un objet XMLHttpRequest

L'objet XMLHttpRequest est le cœur d'Ajax. Il est responsable de l'envoi des requêtes HTTP et de la réception des réponses du serveur. En JavaScript, vous lancez une requête Ajax en créant un objet XMLHttpRequest.

var xhr = new XMLHttpRequest();

Si le navigateur ne prend pas en charge XMLHttpRequest, vous pouvez envisager d'utiliser ActiveXObject comme suit :

var xhr;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
} else {
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2. Envoyer une requête HTTP

Après avoir créé l'objet XMLHttpRequest, vous pouvez définir l'URL et la méthode de la requête, puis envoyer le demande.

xhr.open('GET', 'http://example.com/data', true);
xhr.send();

Dans le code ci-dessus, nous utilisons la méthode xhr.open() pour ouvrir une URL en mode GET. Le troisième paramètre indique une requête asynchrone.

Pour indiquer que la requête est envoyée en mode POST, vous pouvez utiliser le code suivant :

xhr.open('POST', 'http://example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('name1=value1&name2=value2');

Dans le code ci-dessus, nous utilisons la méthode xhr.setRequestHeader() pour définir les informations d'en-tête HTTP et utilisons la méthode send() pour envoyer la demande.

3. Envoyer les données du formulaire

Si vous devez envoyer des données de formulaire, vous pouvez utiliser l'objet FormData.

var formData = new FormData();
formData.append('username', 'john');
formData.append('password', 'secret');

xhr.open('POST', 'http://example.com/login');
xhr.send(formData);

Dans le code ci-dessus, nous utilisons l'objet FormData pour envoyer les données du formulaire, puis utilisons la méthode send pour envoyer la demande.

4. Gestion de la réponse du serveur

Lorsque l'événement readyStateChange de XMLHttpRequest est déclenché, vous pouvez déterminer si la requête a réussi en vérifiant le code de réponse HTTP et le texte de la réponse. Voici quelques codes d'état courants :

• 200 : OK
• 404 : Page introuvable
• 500 : Erreur du serveur

Voici une fonction de gestionnaire simple :

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};

Dans le code ci-dessus, nous utilisons la propriété xhr .readyState , qui renvoie l'état de l'objet XMLHttpRequest. Si readyState vaut 4, la réponse est complète. La propriété

xhr.status renvoie le code d'état HTTP. Un code d'état de 200 indique un succès. La propriété

xhr.responseText contient le texte de la réponse du serveur.

5. Gestion des erreurs

Si le serveur répond avec un code d'état HTTP autre que 200, la requête est considérée comme ayant échoué. Lorsqu'une erreur se produit, vous pouvez réessayer l'opération après y avoir été invité.

xhr.onerror = function() {
  alert('请求失败，请重试');
};

Dans le code ci-dessus, nous utilisons l'attribut xhr.onerror et la méthode alert() pour donner un message d'erreur.

6. Annuler la demande

Si vous devez annuler la requête Ajax, vous pouvez utiliser la méthode xhr.abort().

xhr.abort();

Dans le code ci-dessus, nous utilisons la méthode xhr.abort() pour annuler la demande.

Résumé

Ce qui précède représente l'utilisation de base d'Ajax en Javascript. Ajax vous permet de mettre à jour dynamiquement les pages Web, rendant les applications Web plus faciles à utiliser et plus réactives. Lorsque vous utilisez Ajax, n'oubliez pas d'utiliser des requêtes asynchrones.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!