Compréhension approfondie de l'objet XHR dans la première partie de la série ajax

ajax est l'abréviation de javascript asynchrone et XML. La traduction chinoise est javascript asynchrone et XML. Cette technologie peut demander des données supplémentaires au serveur sans décharger la page, ce qui apportera une meilleure expérience utilisateur à ceux qui sont intéressés par ajax. Les amis, jetons un coup d'œil à l'objet XHR, le premier article de la série ajax

Les mots précédents

Ajax est l'abréviation. de javascript asynchrone et XML, la traduction chinoise est javascript asynchrone et XML. Cette technologie peut demander des données supplémentaires au serveur sans décharger la page, ce qui apportera une meilleure expérience utilisateur. Bien que XML soit dans le nom, la communication ajax n'a rien à voir avec le format des données. Ce qui suit présentera le contenu d'ajax en détail

Création

Le cœur de la technologie ajax est l'objet XMLHttpRequest (appelé comme XHR), qui est composé d'une fonctionnalité introduite pour la première fois par Microsoft et ensuite mise en œuvre par d'autres fournisseurs de navigateurs. XHR fournit une interface fluide pour envoyer des requêtes au serveur et analyser la réponse du serveur. Il peut obtenir plus d'informations du serveur de manière asynchrone, ce qui signifie qu'après que l'utilisateur a cliqué, il peut obtenir de nouvelles données sans actualiser la page

. IE5 C'était le premier navigateur à introduire des objets XHR. Dans IE5, l'objet XHR est implémenté via un objet ActiveX dans la bibliothèque MSXML, tandis qu'IE7+ et d'autres navigateurs standard prennent en charge les objets XHR natifs

La création d'un objet XHR est également appelée instancier un objet XHR car XMLHTTPRequest() l'est. un constructeur. Ce qui suit est une manière compatible d'écrire un objet XHR

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

Envoyer une demande

open()

Lors de l'utilisation d'un objet XHR, la première méthode à appeler est open(), qui accepte 3 paramètres : le type de requête à envoyer. ("get", "post", etc.), l'URL demandée et une valeur booléenne indiquant s'il faut envoyer la requête de manière asynchrone

xhr.open("get","example.php", false);

[Remarque] L'URL est relative à la page actuelle où le code est exécuté, et les requêtes ne peuvent être envoyées qu'à des URL du même domaine en utilisant le même port et le même protocole. Si l'URL est différente de la page qui a initié la requête, une erreur de sécurité se produira

send()

La méthode send() reçoit un paramètre, qui doit être envoyé en tant que données du corps de la demande. Après avoir appelé la méthode send(), la requête est envoyée au serveur

xhr.open("get", "example.txt", false);
xhr.send(null);

pour recevoir la réponse

Après réception de la réponse, les données de réponse rempliront automatiquement les attributs de l'objet XHR, comprenant principalement les 4 attributs suivants

responseText : le texte renvoyé comme corps de réponse

responseXML : Si le type de contenu de la réponse est 'text/xml' ou 'application/xml', cet attribut stockera le document XML DOM des données de réponse

status : Statut HTTP de la réponse

statusText : Description du statut HTTP

Après avoir reçu la réponse, la première étape consiste à vérifier l'attribut status pour confirmer que la réponse a été renvoyée avec succès. De manière générale, le code d'état HTTP 200 peut être utilisé comme un signe de réussite. À ce stade, le contenu de l'attribut ResponseText est prêt et ResponseXML est également accessible si le type de contenu est correct. De plus, un code d'état de 304 signifie que la ressource demandée n'a pas été modifiée, et que la version mise en cache dans le navigateur peut être utilisée directement bien sûr, cela signifie aussi que la réponse est valide

Quel que soit le type de contenu, le contenu du corps de la réponse sera enregistré dans l'attribut ResponseText, et pour les données non XML, la valeur de l'attribut ResponseXML sera nulle

if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){
  alert(xhr.responseText);
}else{
  alert(&#39;request was unsuccessful:&#39; + xhr.status);
}

Asynchrone

Si vous devez recevoir une réponse asynchrone, vous devez détecter l'attribut readyState de l'objet XHR, qui représente l’étape active actuelle du processus de demande/réponse. Les valeurs possibles pour cet attribut sont les suivantes :

0 (UNSENT) : Non initialisé. La méthode open() n'a pas encore été appelée

1 (OPENED) : Start. La méthode open() a été appelée, mais la méthode send() n'a pas encore été appelée

2 (HEADERS_RECEIVED) : Envoyer. La méthode send() a été appelée et les informations d'en-tête

3 (LOADING) : reçues. Des informations partielles sur le corps de la réponse ont été reçues

4 (TERMINÉ) : Terminé. Toutes les données de réponse ont été reçues et peuvent être utilisées sur le client

Chaque fois que la valeur de l'attribut readyState passe d'une valeur à une autre, un événement readystatechange sera déclenché. Vous pouvez utiliser cet événement pour détecter la valeur de readyState après chaque changement d'état. Généralement, nous nous intéressons à l'étape où la valeur readyState est 4, car à ce moment toutes les données sont prêtes

[Note] Le gestionnaire d'événements onreadystatechange doit être spécifié avant d'appeler open() pour garantir la compatibilité entre navigateurs. . Sinon, l'instance

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

Ce qui suit est un petit exemple. pour démontrer l'application des objets xhr en ajax

<button id="btn">获取信息</button>
<p id="result"></p>
<script>
btn.onclick = function(){
  //创建xhr对象
  var xhr;
  if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
  }else{
    xhr = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);
  }
  //异步接受响应
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      if(xhr.status == 200){
        //实际操作
        result.innerHTML += xhr.responseText;
      }
    }
  }
  //发送请求
  xhr.open(&#39;get&#39;,&#39;message.xml&#39;,true);
  xhr.send();
}
</script>

//message.xml

<p>hello world</p>

Grâce à la démonstration d'exemples, nous avons constaté que le contenu du front-end ajax lui-même n'est pas difficile. Cependant, comme ajax implique certaines connaissances en back-end et en réseau, il n’est pas facile à apprendre. Les prochains articles de blog présenteront progressivement le contenu clé d'ajax en profondeur

Ce qui précède est le premier article de la série de compréhension approfondie d'ajax introduite par l'éditeur de l'objet XHR. J'espère qu'il sera utile pour. tout le monde!

Recommandations associées :

Explication détaillée de la mise en œuvre simple de l'effet de pagination AJAX

Formulaire de soumission Ajax et recevoir la méthode json

Un exemple de la façon d'implémenter Ajax avec une simple barre de progression en pourcentage

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!