Maison > Article > interface Web > Analyse approfondie des événements de progression ajax (avec exemples)
Le contenu de cet article concerne une analyse approfondie des événements de progression ajax (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
De manière générale, utilisez l'événement readystatechange pour détecter l'achèvement d'une requête HTTP. Le projet de spécification XHR2 définit la spécification Progress Events. L'objet XMLHttpRequest déclenche différents types d'événements à différentes étapes de la requête, il n'a donc plus besoin de vérifier l'attribut readyState. Ce projet définit les événements liés à la communication client-serveur. Au début, ces événements étaient en fait uniquement destinés aux opérations XHR, mais sont désormais également utilisés par d'autres API (telles que l'API File). Cet article présentera l'événement de progression en détail
Bases
Il existe les 6 événements de progression suivants
loadstart : déclenché lorsque le premier octet de données de réponse est reçu
progress : déclenché en continu lors de la réception de la réponse
erreur : déclenché lorsqu'une erreur se produit dans la requête
abort : déclenché lorsque la connexion est terminée en raison de l'appel de la méthode abort()
load : déclenché lorsque des données de réponse complètes sont reçues
loadend : déclenché une fois la communication terminée ou une erreur, un abandon ou un événement de chargement est déclenché
timeout : déclenché lorsque le délai d'attente se produit
[Remarque] Le navigateur IE9 ne prend pas en charge les événements ci-dessus (le navigateur IE9 ne prend en charge que l'événement de chargement)
Chaque requête démarre en déclenchant l'événement loadstart. Ensuite, la progression est généralement déclenchée toutes les 50 millisecondes environ. ., puis déclencher l'un des événements de chargement, d'erreur, d'abandon ou de délai d'attente, et enfin terminer par le déclenchement de l'événement de fin de chargement
Pour toute demande spécifique, le navigateur ne déclenchera qu'un seul des événements de chargement, d'abandon, de délai d'attente et événements d'erreur. Le projet de spécification XHR2 indique qu'une fois l'un de ces événements survenu, le navigateur doit déclencher l'événement Loadend
load
L'événement Load sera déclenché après la réception de la réponse, il n'est donc pas nécessaire de vérifier le Attribut readyState. Mais une requête terminée n'est pas nécessairement une requête réussie. Par exemple, le gestionnaire de l'événement de chargement doit vérifier le code d'état de l'objet XMLHttpRequest pour déterminer qu'il a reçu une réponse HTTP « 200 OK » plutôt qu'une réponse HTTP « 404 Not Found ». 🎜>
<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.onload = function(){ if(xhr.status == 200){ result.innerHTML += xhr.responseText; } } //发送请求 xhr.open('get','message.xml',true); xhr.send(); } </script>progressL'événement progress est déclenché périodiquement pendant que le navigateur reçoit de nouvelles données. Le gestionnaire d'événements onprogress recevra un objet événement dont l'attribut cible est l'objet XHR, mais contient trois attributs supplémentaires : lengthComputable,loaded et total. Parmi eux, lengthComputable est une valeur booléenne indiquant si les informations de progression sont disponibles, chargée indique le nombre d'octets reçus et total indique le nombre attendu d'octets déterminé en fonction de l'en-tête de réponse Content-Length. Avec ces informations, il est possible de créer un indicateur de progression pour l'utilisateur
<button id="btn">获取信息</button> <p id="result"></p> <p id="music"></p> <script> btn.onclick = function(){ //创建xhr对象 var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //进度事件 xhr.onprogress = function(e){ e = e || event; if (e.lengthComputable){ result.innerHTML = "Received " + e.loaded + " of " + e.total + " bytes"; } }; xhr.onload = function(e){ var data = xhr.response; e = e || event; if(xhr.status == 200){ var audio = document.createElement('audio'); audio.onload = function(){ URL.revokeObjectURL(audio.src); } audio.src = URL.createObjectURL(data); console.log(audio); audio.setAttribute('controls',''); if(!music.innerHTML){ music.appendChild(audio); } } }; //发送请求 xhr.open('get','myocean.mp3',true); xhr.responseType = 'blob'; xhr.send(); } </script>Progression du téléchargement
En plus de ces événements utiles définis pour surveiller le chargement des réponses HTTP, XHR2 fournit également pour la surveillance HTTP demander des événements de téléchargement. Dans les navigateurs qui implémentent ces fonctionnalités, l'objet XMLHttpRequest aura un attribut upload. La valeur de l'attribut upload est un objet qui définit la méthode addEventListener() et l'ensemble de la collection d'événements de progression, tels que onprogress et onload (mais l'objet upload ne définit pas l'attribut onreadystatechange, et le téléchargement ne peut déclencher que de nouveaux types d'événements)
<input type="file" name="file1" id="file1" style="display:none"> <button id="btn">上传文件</button> <p id="pro"></p> <p id="result"></p> <script> btn.onclick = function(){ file1.click(); pro.innerHTML = result.innerHTML = ''; }
file1.onchange = function(){ //创建xhr对象 var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } var data = file1.files[0]; //上传事件 xhr.upload.onprogress = function(e){ e = e || event; if (e.lengthComputable){ pro.innerHTML = "上传进度为:" + e.loaded + " of " + e.total + " bytes" + ';百分比为:' + e.loaded/e.total; } } xhr.onload = function(e){ var data = xhr.responseText; e = e || event; if(xhr.status == 200){ result.innerHTML = data; } }; //发送请求 xhr.open('post','pp.php',true); xhr.setRequestHeader("content-type",data.type); xhr.send(data); } </script>
<?php error_reporting(E_ALL & ~E_NOTICE); touch($file); if(preg_match('/image/',apache_request_headers()['content-type'])){ $file = 'photo/test.jpg'; binary_to_file($file); echo '文件上传成功!'; }else{ echo '文件格式不正确,请选择图片文件'; } function binary_to_file($file){ $content = $GLOBALS['HTTP_RAW_POST_DATA']; // 需要php.ini设置 if(empty($content)){ $content = file_get_contents('php://input'); //不需要php.ini设置,内存压力小 } $ret = file_put_contents($file, $content, true); return $ret; }; ?>Autres événements
var xhr = new XMLHttpRequest(); btn.onclick = function(){ xhr.abort(); }; xhr.ontimeout = function(){ console.log('The request timed out.'); } xhr.timeout = 100; xhr.onabort = function(){ console.log("The transfer has been canceled by the user."); } xhr.onerror = function(){ console.log("An error occurred while transferring the file."); } xhr.onloadend = function(){ console.log("请求结束"); }Cet article est partout ici, plus d'autres passionnants le contenu peut être Suivez la colonne
Tutoriel vidéo JavaScript sur le site Web PHP chinois !
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!