Compréhension des objets XHR dans la série ajax

Mots précédents

En 1999, Microsoft a publié IE5, qui introduisait pour la première fois une nouvelle fonctionnalité : permettre aux scripts javascript d'initier des requêtes HTTP vers le serveur. Cette fonctionnalité n’a pas attiré l’attention à l’époque. Ce n’est qu’avec la sortie de Gmail en 2004 et de Google Map en 2005 qu’elle a attiré l’attention. En février 2005, le terme ajax a été officiellement proposé pour la première fois, faisant référence à un ensemble de pratiques de développement autour de cette fonction. Depuis lors, ajax est devenu synonyme de communication HTTP initiée par un script, et le W3C a également publié sa norme internationale en 2006. Cet article est le premier article de la série ajax - Présentation des objets XHR

Ajax est l'abréviation de javascript asynchrone et XML La traduction chinoise est javascript asynchrone et XML. Cette technologie peut demander. le serveur Des données supplémentaires sans avoir à décharger la page se traduiront par une meilleure expérience utilisateur. Bien que le nom contienne du XML, la communication ajax n'a rien à voir avec le format des données

Ajax comprend les étapes suivantes : 1. Créer un objet AJAX 2. Émettre une requête HTTP 3. Recevoir les données renvoyées par le serveur ; 4. Mettre à jour la page Web Données

Pour résumer, en une phrase, ajax envoie une requête HTTP via l'objet natif XMLHttpRequest, et après avoir récupéré les données renvoyées par le serveur, il traite

Créer

Le cœur de la technologie ajax est l'objet XMLHttpRequest (XHR en abrégé), qui est une fonctionnalité introduite pour la première fois par Microsoft. D'autres fournisseurs de navigateurs ont ensuite fourni la même implémentation. 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. Voici la manière compatible de créer un objet XHR

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

[Note] Si vous souhaitez créer N requêtes différentes, vous devez utiliser N objets XHR différents. Il est bien sûr possible de réutiliser un objet XHR existant, mais cela mettra fin à toutes les requêtes précédemment en attente via cet objet

Envoyer la requête

open()

Lors de l'utilisation d'un objet XHR, la première méthode à appeler est open(), comme indiqué ci-dessous. Cette méthode accepte 3 paramètres

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

1. . Le premier paramètre de la méthode open() est utilisé pour spécifier la méthode d'envoi de la requête. Cette chaîne n'est pas sensible à la casse, mais les lettres majuscules sont généralement utilisées. "GET" et "POST" sont largement pris en charge

"GET" est utilisé pour les requêtes régulières. Il convient lorsque l'URL spécifie complètement la ressource demandée, lorsque la requête n'a aucun effet secondaire sur le serveur et lorsque. la réponse du serveur est disponible. Dans le cas de la mise en cache

La méthode "POST" est couramment utilisée dans les formulaires HTML. Il inclut des données supplémentaires dans le corps de la demande et ces données sont souvent stockées dans une base de données sur le serveur. Les requêtes POST répétées pour la même URL peuvent obtenir des réponses différentes de la part du serveur, et les requêtes utilisant cette méthode ne doivent pas être mises en cache

En plus de "GET" et "POST", les paramètres peuvent également être "HEAD" et "OPTIONS" "," METTRE ". En raison des risques de sécurité, l'utilisation de "CONNECT", "TRACE" et "TRACK" est interdite

[Note] L'introduction détaillée des 8 méthodes courantes du protocole HTTP se déplace ici

2 Le deuxième paramètre de la méthode open() est l'URL, qui est relative à la page actuelle sur laquelle le code est exécuté, et ne peut envoyer des requêtes qu'aux URL du même domaine qui utilisent le même port et le même protocole. S'il y a une différence entre l'URL et la page qui initie la requête, une erreur de sécurité se produira

3. Le troisième paramètre de la méthode open() est une valeur booléenne indiquant s'il faut envoyer la requête de manière asynchrone. S'il n'est pas renseigné, la valeur par défaut est true. Indique un envoi asynchrone

4. Si vous demandez une URL protégée par mot de passe, transmettez le nom d'utilisateur et le mot de passe utilisés pour l'authentification comme 4ème et 5ème paramètres à la méthode open()

send()

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

S'il s'agit de la méthode GET, la méthode send() n'a pas de paramètres, ou le paramètre est nul s'il s'agit de la méthode POST ; les paramètres de la méthode send() sont ceux à envoyer Data

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

Recevoir la réponse

Une réponse HTTP complète consiste en une réponse HTTP complète. du code d'état, de la collection d'en-tête de réponse et du corps de la réponse. Après avoir reçu la réponse, celles-ci peuvent être utilisées via les propriétés et méthodes de l'objet XHR. Il y a principalement les 4 propriétés suivantes

responseText: 作为响应主体被返回的文本(文本形式)
responseXML: 如果响应的内容类型是'text/xml'或'application/xml'，这个属性中将保存着响应数据的XML DOM文档(document形式)
status: HTTP状态码(数字形式)
statusText: HTTP状态说明(文本形式)

.

　　在接收到响应后，第一步是检查status属性，以确定响应已经成功返回。一般来说，可以将HTTP状态码为200作为成功的标志。此时，responseText属性的内容已经就绪，而且在内容类型正确的情况下，responseXML也可以访问了。此外，状态码为304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本；当然，也意味着响应是有效的

　　无论内容类型是什么，响应主体的内容都会保存到responseText属性中，而对于非XML数据而言，responseXML属性的值将为null

if((xhr.status >=200 && xhr.status 

 

同步

　　如果接受的是同步响应，则需要将open()方法的第三个参数设置为false，那么send()方法将阻塞直到请求完成。一旦send()返回，仅需要检查XHR对象的status和responseText属性即可

　　同步请求是吸引人的，但应该避免使用它们。客户端javascript是单线程的，当send()方法阻塞时，它通常会导致整个浏览器UI冻结。如果连接的服务器响应慢，那么用户的浏览器将冻结

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

//message.xml
<p>hello world</p>

 

 

异步

　　如果需要接收的是异步响应，这就需要检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下：

0(UNSENT):未初始化。尚未调用open()方法
1(OPENED):启动。已经调用open()方法，但尚未调用send()方法
2(HEADERS_RECEIVED):发送。己经调用send()方法，且接收到头信息
3(LOADING):接收。已经接收到部分响应主体信息
4(DONE):完成。已经接收到全部响应数据，而且已经可以在客户端使用了

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

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

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

<button>获取信息</button>
<div></div>
<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>

 

超时

　　XHR对象的timeout属性等于一个整数，表示多少毫秒后，如果请求仍然没有得到结果，就会自动终止。该属性默认等于0，表示没有时间限制

　　如果请求超时，将触发ontimeout事件

　　[注意]IE8-浏览器不支持该属性

xhr.open('post','test.php',true);
xhr.ontimeout = function(){
    console.log('The request timed out.');
}
xhr.timeout = 1000;
xhr.send();

 

优化

　　使用AJAX接收数据时，由于网络和数据大小的原因，并不是立刻就可以在页面中显示出来。所以，更好的做法是，在接受数据的过程中，显示一个类似loading的小图片，并且禁用按钮；当数据完全接收后，再隐藏该图片，并启用按钮

<button>获取信息</button>
<img  src="/static/imghw/default1.png" data-src="data:image/gif;base64,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" class="lazy" alt="Compréhension des objets XHR dans la série ajax" >
<div></div>
<script>
var add = (function(){
    var counter = 0;
    return function(){
        return ++counter;
    }
})();
btn.onclick = function(){
    img.style.display = &#39;inline-block&#39;;
    btn.setAttribute(&#39;disabled&#39;,&#39;&#39;);
    //创建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){
              img.style.display = &#39;none&#39;;
              btn.removeAttribute(&#39;disabled&#39;);
              var data = JSON.parse(xhr.responseText);
              var sum = add() - 1;
              if(sum < data.length){
                result.innerHTML += data[sum];    
              }
            }
        }
    }
    //发送请求
    xhr.open(&#39;get&#39;,&#39;data.php&#39;,true);
    xhr.send();
}
</script>

<?php echo json_encode([1,2,3,4,5]);
?>

Enfin

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 les contenus clés d'ajax en profondeur

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!