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>

progress

L'é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)

Ne peut utiliser le gestionnaire d'événements de téléchargement que comme un gestionnaire d'événements de progression normal. Pour l'objet XMLHttpRequest, définissez XHR.onprogress pour surveiller la progression du téléchargement de la réponse, et définissez XHR.upload.onprogress pour surveiller la progression du téléchargement de la demande

<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(&#39;/image/&#39;,apache_request_headers()[&#39;content-type&#39;])){
$file = &#39;photo/test.jpg&#39;; 
binary_to_file($file);
echo &#39;文件上传成功!&#39;;
}else{
echo &#39;文件格式不正确，请选择图片文件&#39;;
}
function binary_to_file($file){
$content = $GLOBALS[&#39;HTTP_RAW_POST_DATA&#39;];  // 需要php.ini设置
if(empty($content)){
    $content = file_get_contents(&#39;php://input&#39;); //不需要php.ini设置，内存压力小
}
$ret = file_put_contents($file, $content, true);
return $ret;
};
?>

Autres événements

Il existe 3 situations où la requête HTTP ne peut pas aboutir, correspondant à 3 types d'événements. Si la demande expire, l'événement timeout sera déclenché. Si la demande est abandonnée, l'événement d'abandon sera déclenché. Enfin, des erreurs réseau comme un trop grand nombre de redirections peuvent empêcher la requête de se terminer, mais un événement d'erreur est déclenché lorsque ces situations se produisent

Une requête HTTP en cours peut être annulée en appelant la méthode abort() de l'objet XMLHttpRequest. L'appel de la méthode abort() déclenche l'événement abort sur cet objet

Les principales raisons d'appeler abort() sont lorsqu'une requête annulée ou expirée prend trop de temps à se terminer ou lorsque la réponse devient non pertinente. Supposons que vous utilisiez XMLHttpRequest pour demander des recommandations de saisie semi-automatique pour un champ de saisie de texte. Si l'utilisateur saisit de nouveaux caractères avant que les suggestions du serveur ne soient atteintes, alors attendre la requête n'est plus utile et doit être interrompu

L'attribut timeout de l'objet XHR est égal à un entier, indiquant combien de millisecondes plus tard , si la requête n'obtient toujours pas de résultat, se terminera automatiquement. Cet attribut est par défaut à 0, ce qui signifie qu'il n'y a pas de limite de temps

Si la requête expire, l'événement ontimeout sera déclenché

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!