Compréhension approfondie des objets XHR d'Ajax

Cette fois, je vais vous apporter une compréhension approfondie des objets XHR d'ajax. Quelles sont les précautions d'utilisation des objets XHR d'ajax Voici des cas pratiques, jetons un coup d'oeil.

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 (XHR en abrégé), qui a été introduit pour la première fois par Microsoft. Une fonctionnalité dont d'autres fournisseurs de navigateurs ont ensuite fourni des implémentations identiques. 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 que 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 de l'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 de la requête et si la représentation est asynchrone Valeur booléenne pour l'envoi d'une requête

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

[Note] 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 dans le 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);

Recevoir la réponse

Après avoir reçu la réponse, le données de réponse Les attributs de l'objet XHR seront automatiquement renseignés, 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 de la réponse data

status : Statut HTTP de la réponse

statusText : Description du HTTP status

Après réception Après avoir répondu, la première étape consiste à vérifier l'attribut status pour déterminer que la réponse a été renvoyée avec succès. De manière générale, le code d'état HTTP de 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 cas ; 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 avez besoin de 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

　　只要readyState属性值由一个值变成另一个值，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。通常，我们对readyState值为4的阶段感兴趣，因为这时所有数据都已就绪

　　[注意]必须在调用open()之前指定onreadystatechange 事件处理程序才能确保跨浏览器兼容性，否则将无法接收readyState属性为0和1的情况

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

实例

　　下面以一个小实例来演示ajax中xhr对象的应用

<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('Microsoft.XMLHTTP');
  }
  //异步接受响应
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      if(xhr.status == 200){
        //实际操作
        result.innerHTML += xhr.responseText;
      }
    }
  }
  //发送请求
  xhr.open('get','message.xml',true);
  xhr.send();
}
</script>

//message.xml

<p>hello world</p>

最后

　　通过实例的演示发现，ajax前端本身的内容并不难。但是，由于ajax涉及到一些后端及网络的知识，使得学起来不是很容易。以后的博文将逐步深入地介绍ajax的重点内容

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

AJAX的队列请求如何实现（附代码）

pushState+Ajax实现无刷新的页面切换

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!