Révéler les attributs essentiels d'AJAX : optimiser l'expérience d'interaction avec les pages Web

La technologie AJAX (JavaScript asynchrone et XML) est une technologie utilisée pour réaliser une interaction de données asynchrone entre les pages Web et les serveurs. Elle peut améliorer l'expérience interactive des pages Web et réaliser une actualisation partielle du contenu de la page sans recharger la page entière. En tant que développeur front-end, il est très important de comprendre les attributs nécessaires d'AJAX.

1. Objet XMLHttpRequest
En AJAX, l'objet XMLHttpRequest est le cœur de la communication avec le serveur. Grâce à cet objet, vous pouvez envoyer des requêtes HTTP au serveur et obtenir les données renvoyées par le serveur. Ses attributs et méthodes communs sont les suivants :

1. readyState : utilisé pour indiquer l'état actuel de la requête, avec des valeurs de 0 à 4, qui indiquent respectivement que la requête n'a pas été initialisée, a été démarrée, est en cours d'envoi Les données, reçoivent des données et la transmission des données est terminée.
2. open(method, url, async) : utilisé pour initialiser une nouvelle requête pour envoyer une requête au serveur. Le paramètre méthode indique le type de requête, comme GET, POST, etc. ; ; async indique si la demande est asynchrone , la valeur par défaut est true, ce qui est asynchrone.
3. send(data) : Utilisé pour envoyer la requête au serveur. Le paramètre data représente les données envoyées, qui peuvent être une chaîne ou un objet FormData.
4. setRequestHeader(header, value) : utilisé pour définir la valeur de l'en-tête de requête HTTP. Les en-têtes de requête HTTP couramment utilisés incluent Content-Type, Accept, etc.
5. onreadystatechange : utilisé pour spécifier une fonction de rappel, qui sera déclenchée lorsque l'attribut readyState change.

Ce qui suit est un exemple d'utilisation de l'objet XMLHttpRequest pour envoyer une requête GET :

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.open("GET", "https://api.example.com/data", true);
xhr.send();

2 ResponseText et ResponseXML
Après avoir communiqué avec le serveur, les données renvoyées par le serveur peuvent être obtenues via l'attribut ResponseText ou ResponseXML de. l'objet XMLHttpRequest.

responseText sont les données texte renvoyées par le serveur. Vous pouvez obtenir une chaîne de texte renvoyée par le serveur via cet attribut. ResponseXML analyse les données texte renvoyées par le serveur dans un objet document XML. Les données XML renvoyées par le serveur peuvent être obtenues via cet attribut.

Ce qui suit est un exemple d'utilisation de ResponseText pour obtenir des données :

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.open("GET", "https://api.example.com/data", true);
xhr.send();

3. Événements onload et onerror
Dans le processus de traitement des requêtes AJAX, vous pouvez utiliser les événements onload et onerror pour gérer le succès et les erreurs de requête. L'événement

onload est déclenché lorsque la demande réussit, où les données renvoyées peuvent être traitées. L'événement onerror est déclenché lorsqu'une erreur se produit dans la demande et la situation d'erreur peut y être gérée.

Ce qui suit est un exemple d'utilisation des événements onload et onerror pour traiter les résultats de la demande :

const xhr = new XMLHttpRequest();
xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.onerror = function() {
  console.log("请求发生错误");
};
xhr.open("GET", "https://api.example.com/data", true);
xhr.send();

En résumé, les attributs nécessaires d'AJAX sont ce que les développeurs doivent comprendre et maîtriser lorsqu'ils utilisent AJAX pour une interaction de données asynchrone. Grâce aux propriétés et méthodes de l'objet XMLHttpRequest, vous pouvez envoyer une requête au serveur et traiter les données renvoyées, et utiliser les propriétés ResponseText et ResponseXML pour obtenir les données renvoyées par le serveur. Utilisez les événements onload et onerror pour gérer le succès. et les conditions d'erreur de la demande. Comprendre et utiliser habilement ces attributs et méthodes peut améliorer efficacement l'expérience interactive des pages Web.

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!