Ajax-Fortschrittsbalken-Download-Implementierungsbeispielcode basierend auf Blod

In diesem Artikel wird hauptsächlich der Beispielcode für die Implementierung des Ajax-Fortschrittsbalken-Downloads basierend auf Blod vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor, um einen Blick darauf zu werfen

Normaler Browser-Download

Wenn Sie in der Webentwicklung die Download-Funktion implementieren möchten, verwenden Sie häufig eine neu geöffnete Webseite Oder verwenden Sie iframe. Die Implementierung ist eigentlich sehr einfach:

<a target="_blank" href="download.zip" rel="external nofollow" >点击下载</a>
//或者
<iframe style="display:none" src="download.zip"></iframe>

Nachdem der Benutzer auf das a-Tag geklickt hat, um einen neuen Tab zu öffnen, oder nach dem Öffnen des Iframes, akzeptiert der Browser eine Download-Antwort und lädt den Anhang herunter. Tatsächlich bedeutet der sogenannte Anhang-Download, dass der Browser, nachdem er den Header der Antwortnachricht gelesen hat, ein Download-Eingabeaufforderungsfeld generiert und den Download der Datei fortsetzt, nachdem der Benutzer dies bestätigt hat. Eine Datei ist eigentlich ein Stream. Der Browser verwaltet diesen Übertragungsprozess automatisch und generiert automatisch einen Fortschrittsbalken, eine Schaltfläche zum Stoppen des Downloads, eine Schaltfläche zum Abbrechen des Downloads und eine Schaltfläche zum Anzeigen der heruntergeladenen Bytenummer. usw. . Der Browser erledigt dies automatisch für uns und der gesamte Vorgang unterliegt nicht unserer Kontrolle.

Ajax-Download

Browser-Unterstützung für den Download kann grundsätzlich unsere Anforderungen erfüllen Methode macht wenig Sinn. Es gibt jedoch immer noch einige Szenarien, die Browser-Downloads nicht erfüllen können. Beispielsweise muss unsere Webanwendung den Download-Fortschritt überwachen oder nach Abschluss des Downloads ein bestimmtes Ereignis auslösen, oder die Webanwendung kann den Download-Vorgang automatisch abbrechen Verwenden Sie einen Worker, um einen Hintergrund zu erstellen, auf dem Download und mehr ausgeführt werden. Für die oben genannten Situationen können wir einen Ajax-Download basierend auf dem Blod-Objekt verwenden.

Das Herunterladen von Anhängen mit Ajax ist dasselbe wie das Hochladen von Anhängen mit Ajax, und der Browser muss Ajax2.0 unterstützen. Tatsächlich unterscheidet sich der sogenannte Download nicht von einer gewöhnlichen Ajax-Anfrage. Bei Downloads handelt es sich jedoch im Allgemeinen um Binärdateien, bei denen kein JavaScript-Typ erforderlich ist die Binärdatei. Das ist Blut. Legen Sie daher den Antworttyp und den Wert von „responseType“ auf „blod“ fest:

var xhr =new XMLHttpRequest();
xhr.open(option.type ? option.type.toUpperCase() : 'GET', url, true);
xhr.responseType = 'blob';

erfordert, dass der Feldwert „responseType“ des XMLHttpRequest-Objekts „blob“ ist. Was ist also das Blutobjekt?

Blob-Objekt

MDN beschreibt es als:

Blob-Objekt ist ein dateiähnliches Objekt, das schreibgeschützte Rohdaten enthält. Die Daten in einem Blob-Objekt müssen nicht unbedingt in ihrer nativen Form in JavaScript vorliegen. Die Dateischnittstelle basiert auf Blob, erbt die Funktionen von Blob und erweitert die Unterstützung für lokale Dateien auf dem Computer des Benutzers. Durch das Blob-Objekt können wir einen Binärstrom in ein Objekt kapseln.

Wenn Sie die dateibezogene API von HTML5 kennen, sollten Sie mit dem Blod-Objekt vertraut sein. Blod kann einen Bytestream in eine Datei kapseln. Wenn der ResponseType-Wert des XMLHttpRequest-Objekts Blob ist, können wir den Antworttext als Blob-Objekt behandeln.

xhr.onload = function () {
  //对于重定向的文件不予理会
  if (this.status >= 200 && this.status < 300) {
    var blob = new Blob([this.response], {type: this.response.type});
  }
}

Verwenden Sie Ajax, um die Datei herunterzuladen, speichern Sie die Datei dann als Blob-Objekt und speichern Sie sie im Browser zwischen. Wie können Benutzer also Dateien auf ihrer Festplatte speichern?

Speichern Sie das Blob-Objekt auf der Festplatte

Wir können den Browser-Download nachahmen, ein Tag oder einen Iframe generieren und dann eine URL generieren, damit wir zurückkehren zum Browser Nach dem Herunterladen generiert der Browser automatisch ein Fenster zum Speichern des Anhangs. Die URL kann mit der Methode URL.createObjectURL(blob) abgerufen werden. URL.createObjectURL unterstützt Blob-Objekte und Dateiobjekte und kann eine virtuelle URL generieren, sodass der aktuelle Benutzer auf diese Objekte zugreifen kann, natürlich auch auf Downloads. Anders als beim direkten Herunterladen vom Server erfolgt der Download hier intern für den Client und verwendet kein Netzwerk-IO, sodass der Download nahezu augenblicklich erfolgt. Nach dem Generieren der URL muss diese jedoch freigegeben werden, da die Blob-Ressource sonst nicht durch Garbage Collection erfasst wird. Sie können URL.revokeObjectURL verwenden, um die URL freizugeben und die Blob-Ressource freizugeben. Für den IE-Browser gibt es einen eigenen Satz von Blob-Objektverarbeitungsstrategien, bei denen es sich um zwei Navigatormethoden handelt: msSaveOrOpenBlob und msSaveBlob.

//ie的下载
if (window.navigator.msSaveOrOpenBlob) {
  navigator.msSaveBlob(blob, fileName);
} else {
  //非ie的下载
  var link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = fileName;
  link.click();
  window.URL.revokeObjectURL(link.href);
}

Fortschrittsbalken und Download-Abbruch

Dann gibt es noch den Fortschrittsbalken und die Download-Abbruchfunktion. Tatsächlich verfügt das XMLHttpRequest-Objekt über ein Fortschrittsereignis, das wir jedoch normalerweise durchführen Ajax-Anfragen Ignorieren Sie ihn schließlich, und es besteht keine Notwendigkeit, einen Fortschrittsbalken für sie festzulegen. Da das Herunterladen von Anhängen jedoch etwas Zeit in Anspruch nimmt, ist es notwendig, einen Fortschrittsbalken dafür zu entwickeln. Durch Abhören des Fortschrittsereignisses können wir den Download-Fortschritt ermitteln.

Verwenden Sie die Abbruchfunktion des XMLHttpRequest-Objekts, um den Download abzubrechen. Darüber hinaus kann das Ladeereignis den Download-Abschluss und das Fehlerereignis den Download-Fehler überwachen. Kurz gesagt, die Ereignisse und Methoden eines Ajax-Downloads und einer gewöhnlichen Ajax-Anfrage sind genau die gleichen.

Leistungsoptimierung und Same-Origin-Richtlinie

Ajax-Downloads beanspruchen wie lange Verbindungen mehr Bandbreite als normale Anfragen, insbesondere Downloads, die mehr Bandbreite beanspruchen. Daher können andere Ajax-Anfragen während des Downloadvorgangs blockiert werden. Daher wird empfohlen, dass die von Ajax heruntergeladenen Ressourcen und andere angeforderte Ressourcen unterschiedliche Domänennamen verwenden. Dies führt jedoch zu einem neuen Problem – dem gleichen Ursprungsrichtlinienproblem.

Die Same-Origin-Richtlinie ist der Grundstein der Browsersicherheit. Ohne eine Same-Origin-Richtlinie kann jede Website einen CSRF-Angriff starten. Wenn nicht garantiert werden kann, dass die URL der heruntergeladenen Ressource denselben Ursprung hat wie die URL der aktuellen Seite, wird die gleiche Ursprungsrichtlinie ausgelöst und der Download schlägt fehl. Daher ist eine domänenübergreifende Ajax-Verarbeitung erforderlich. Im Vergleich zu den Download-Methoden von Iframe und New Tab (tatsächlich verfügt Iframe auch über eine Same-Origin-Richtlinie, die erfordert, dass die Seite innerhalb des Iframes und die übergeordnete Seite nicht auf den Inhalt des anderen zugreifen können, die Download-Funktion umfasst diese Art jedoch nicht des Zugriffs auf die Inhalte des anderen, daher ist der Iframe-Download nicht von der Same-Origin-Richtlinie betroffen), der Ajax-Download ist immer noch Ajax-Natur und wird daher von der Same-Origin-Richtlinie des Browsers beeinflusst. Wenn Sie daher einen Anhang von einer nicht originalen Quelle herunterladen, muss der Server, auf dem sich der Anhang befindet, CORS unterstützen. Wenn der Server auf Cookies zugreifen muss, muss „withCredentials“ des XMLHttpRequest-Objekts auf „true“ gesetzt werden.

Gleichzeitig können wir aufgrund der gleichen Ursprungsrichtlinie Ajax nicht zum Herunterladen von Ressourcen von Drittanbietern verwenden, da die üblichen Download-Dienste keine Cors-Verarbeitung durchführen, z. B. Iframe-Downloads oder neue Tab-Downloads Die Methode ist von der Same-Origin-Richtlinie nicht betroffen, sodass keine Cors-Verarbeitung erforderlich ist. Dies schränkt die Anwendbarkeit des Ajax-Downloads erheblich ein.

Zusammenfassung:

Lassen Sie uns abschließend die Nutzungsszenarien des Ajax-Downloads zusammenfassen:

1. Szenarien, in denen der Download-Fortschritt überwacht werden muss, z Es wurde festgestellt, dass der Download-Fortschritt des Benutzers zu langsam war und andere Lösungen proaktiv bereitgestellt wurden.

2. Nach Abschluss des Downloads muss ein bestimmtes Ereignis ausgelöst werden, z. B. ein Desktop-Benachrichtigungs-Popup.

3. Ein Hintergrund-Download ist erforderlich. Beispielsweise können wir den Anhang heimlich herunterladen, nachdem der Benutzer die Webseite geöffnet hat, ihn zwischenspeichern und ihn dann lokal speichern, wenn der Benutzer den Anhang wirklich herunterladen möchte. Wir können sogar Worker verwenden, um einen Hintergrundthread zu erstellen, um sicherzustellen, dass der Downloadvorgang die normale Darstellung der Seite nicht beeinträchtigt.

4. Es muss heruntergeladen und nicht auf der Festplatte gespeichert werden, aber die Webanwendung verarbeitet den Anhang direkt. Beispielsweise verwendet pdf.js zum Herunterladen Ajax.

Abschließend präsentiere ich eine Ajax-Download-Demo des Autors: ajaxDownloadDemo_jb51.rar

Das Obige habe ich hoffentlich für Sie zusammengestellt hilfreich für Sie in der Zukunft.

Verwandte Artikel:

So konvertieren Sie einfache Entitätsklassen und XML-Dateien ineinander und voneinander

Verwenden Sie Ajax, um Razor teilweise zu aktualisieren Seiten (grafisches Tutorial)

AjaxFileUpload+Struts2 implementiert die Funktion zum Hochladen mehrerer Dateien

Das obige ist der detaillierte Inhalt vonAjax-Fortschrittsbalken-Download-Implementierungsbeispielcode basierend auf Blod. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!