Verwenden Sie Blod, um den Ajax-Fortschrittsbalken herunterzuladen

Dieses Mal werde ich Ihnen die Verwendung von Blod zum Herunterladen von Ajax-Fortschrittsbalken vorstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung von Blod zum Herunterladen von Ajax-Fortschrittsbalken?

Normaler Browser-Download

Wenn Sie in der Webentwicklung die Download-Funktion implementieren möchten, verwenden Sie häufig eine neue Webseite oder einen 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 Tag „a“ 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 und nicht um JavaScript Stellen Sie ein Paar bereit, um dies zu kapseln. Der Typ der Binärdatei ist blöd. 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 „blod“ 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 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 dh Browser gibt es einen eigenen Satz von Blob-Objektverarbeitungsstrategien, nämlich die beiden Navigatormethoden 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 hat das XMLHttpRequest-Objekt ein Fortschrittsereignis, aber wir Ignorieren Sie es normalerweise, wenn Sie Ajax-Anfragen stellen. Schließlich erfolgen allgemeine Anfragen sofort und es besteht keine Notwendigkeit, einen Fortschrittsbalken für sie festzulegen. Das Herunterladen von Anhängen dauert jedoch anders. Daher ist es erforderlich, einen Fortschrittsbalken 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.

Leistungsoptimierungund Same-Origin-Richtlinie

Ajax-Downloads beanspruchen wie lange Verbindungen mehr Bandbreite als normale Anfragen, insbesondere Downloads Die Besetzung ist noch ernster. 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, wie z. B. Iframe-Downloads oder neue Tab-Downloads Die Methode ist nicht von derselben Ursprungsrichtlinie 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 wir haben proaktiv andere Lösungen bereitgestellt.

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 die Ajax-Download-Demo des Autors: ajaxDownloadDemo_jb51.rar

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Kommen Sie für weitere spannende Informationen. Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie kommuniziere ich Daten zwischen C und View?

Was sind Front-End und Back- Ende? Ajax-Interaktionsmethode

Das obige ist der detaillierte Inhalt vonVerwenden Sie Blod, um den Ajax-Fortschrittsbalken herunterzuladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!