Eingehende Analyse von Ajax-Fortschrittsereignissen (mit Beispielen)

Der Inhalt dieses Artikels befasst sich mit der ausführlichen Analyse von Ajax-Fortschrittsereignissen (mit Beispielen). Ich hoffe, dass er für Freunde in Not hilfreich ist.

Im Allgemeinen verwenden Sie das Ereignis „readystatechange“, um den Abschluss einer HTTP-Anfrage zu erkennen. Der XHR2-Spezifikationsentwurf definiert die Progress Events-Spezifikation. Das XMLHttpRequest-Objekt löst verschiedene Arten von Ereignissen in verschiedenen Phasen der Anfrage aus, sodass das readyState-Attribut nicht mehr überprüft werden muss. Dieser Entwurf definiert Ereignisse im Zusammenhang mit der Client-Server-Kommunikation. Ursprünglich waren diese Ereignisse nur auf XHR-Operationen ausgerichtet, werden aber mittlerweile auch von anderen APIs (z. B. File API) verwendet. In diesem Artikel wird das Fortschrittsereignis im Detail vorgestellt

Grundlagen

Es gibt die folgenden 6 Fortschrittsereignisse

Loadstart: Wird ausgelöst, wenn das erste Byte der Antwortdaten empfangen wird

Fortschritt: Kontinuierlich ausgelöst, während die Antwort empfangen wird

Fehler: Wird ausgelöst, wenn ein Fehler in der Anfrage auftritt

Abbruch: Wird ausgelöst, wenn die Verbindung aufgrund des Aufrufs der abort()-Methode

load: Wird ausgelöst, wenn vollständige Antwortdaten empfangen werden

loadend: Wird ausgelöst, nachdem die Kommunikation abgeschlossen ist oder ein Fehler-, Abbruch- oder Ladeereignis ausgelöst wird

timeout: Wird ausgelöst, wenn eine Zeitüberschreitung auftritt

[Hinweis] Der IE9-Browser unterstützt die oben genannten Ereignisse nicht (der IE9-Browser unterstützt nur das Ladeereignis)

Jede Anfrage beginnt mit dem Auslösen des Ladestartereignisses. Als nächstes wird der Fortschritt normalerweise etwa alle 50 Millisekunden ausgelöst .-Ereignis, löst dann eines der Lade-, Fehler-, Abbruch- oder Timeout-Ereignisse aus und endet schließlich mit dem Auslösen des Loadend-Ereignisses

Für jede bestimmte Anfrage löst der Browser nur eines der Lade-, Abbruch-, Timeout- und Timeout-Ereignisse aus Fehlerereignisse. Im XHR2-Spezifikationsentwurf heißt es, dass der Browser, sobald eines dieser Ereignisse eintritt, das Loadend-Ereignis

load

auslösen soll. Das Load-Ereignis wird ausgelöst, nachdem die Antwort empfangen wurde, sodass keine Überprüfung erforderlich ist readyState-Attribut. Eine abgeschlossene Anfrage ist jedoch nicht unbedingt eine erfolgreiche Anfrage. Beispielsweise sollte der Handler des Ladeereignisses den Statuscode des XMLHttpRequest-Objekts überprüfen, um festzustellen, ob es eine HTTP-Antwort „200 OK“ und nicht eine „404 Not Found“-Antwort erhalten hat 🎜>

<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>

Fortschritt

Das Fortschrittsereignis wird regelmäßig ausgelöst, während der Browser neue Daten empfängt. Der Onprogress-Ereignishandler empfängt ein Ereignisobjekt, dessen Zielattribut das XHR-Objekt ist, aber drei zusätzliche Attribute enthält: lengthComputable, Loaded und Total. Unter diesen ist „lengthComputable“ ein boolescher Wert, der angibt, ob Fortschrittsinformationen verfügbar sind, „loaded“ gibt die Anzahl der empfangenen Bytes an und „total“ gibt die erwartete Anzahl von Bytes an, die basierend auf dem Content-Length-Antwortheader ermittelt wird. Mit diesen Informationen ist es möglich, eine Fortschrittsanzeige für den Benutzer

<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>

Upload-Fortschritt

zu erstellen. Zusätzlich zu diesen nützlichen Ereignissen, die für die Überwachung des Ladens von HTTP-Antworten definiert sind, stellt XHR2 auch Ereignisse bereit, die durch HTTP-Anfragen hochgeladen werden . In Browsern, die diese Funktionen implementieren, verfügt das XMLHttpRequest-Objekt über ein Upload-Attribut. Der Wert des Upload-Attributs ist ein Objekt, das die Methode addEventListener() und die gesamte Fortschrittsereignissammlung definiert, z. B. onprogress und onload (das Upload-Objekt definiert jedoch nicht das Attribut onreadystatechange und der Upload kann nur neue Ereignistypen auslösen)

Kann den Upload-Ereignishandler nur wie einen normalen Fortschrittsereignishandler verwenden. Legen Sie für das XMLHttpRequest-Objekt XHR.onprogress fest, um den Download-Fortschritt der Antwort zu überwachen, und legen Sie XHR.upload.onprogress fest, um den Upload-Fortschritt der Anfrage zu überwachen

<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;
};
?>

Andere Ereignisse

Die HTTP-Anfrage konnte nicht abgeschlossen werden. Es gibt 3 Situationen, die 3 Arten von Ereignissen entsprechen. Wenn die Anforderung abläuft, wird das Timeout-Ereignis ausgelöst. Wenn die Anfrage abgebrochen wird, wird das Abort-Ereignis ausgelöst. Schließlich können Netzwerkfehler wie zu viele Weiterleitungen den Abschluss der Anfrage verhindern, aber wenn diese Situationen auftreten, wird ein Fehlerereignis ausgelöst

Eine laufende HTTP-Anfrage kann durch Aufrufen der abort()-Methode des XMLHttpRequest-Objekts abgebrochen werden. Der Aufruf der abort()-Methode löst das Abort-Ereignis für dieses Objekt aus

Die Hauptgründe für den Aufruf von abort() sind, wenn die Ausführung einer abgebrochenen oder abgelaufenen Anfrage zu lange dauert oder wenn die Antwort irrelevant wird. Angenommen, Sie verwenden XMLHttpRequest, um Empfehlungen zur automatischen Vervollständigung für ein Texteingabefeld anzufordern. Wenn der Benutzer neue Zeichen eingibt, bevor die Vorschläge des Servers erreicht werden, ist das Warten auf die Anfrage nicht mehr sinnvoll und sollte abgebrochen werden

Das Timeout-Attribut des XHR-Objekts ist gleich einer Ganzzahl und gibt an, wie viele Millisekunden später Wenn die Anfrage immer noch kein Ergebnis liefert, wird sie automatisch beendet. Dieses Attribut ist standardmäßig auf 0 eingestellt, was bedeutet, dass es kein Zeitlimit gibt.

Wenn die Anfrage abläuft, wird das Ontimeout-Ereignis ausgelöst

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("请求结束");    
}

Dieser Artikel ist hier für weitere spannende Inhalte , können Sie der Rubrik

JavaScript-Video-Tutorial

der PHP Chinese-Website folgen!

Das obige ist der detaillierte Inhalt vonEingehende Analyse von Ajax-Fortschrittsereignissen (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!