Barre de progression Ajax télécharger un exemple de code d'implémentation basé sur Blod-js tutoriel-php.cn

Cet article présente principalement l'exemple de code pour l'implémentation du téléchargement de la barre de progression ajax basée sur Blod. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour jeter un œil

Téléchargement par navigateur ordinaire

Dans le développement Web, si vous souhaitez implémenter la fonction de téléchargement, vous utilisez souvent une page Web nouvellement ouverte Ou utilisez iframe. La mise en œuvre est en fait très simple :

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

Copier après la connexion

Après que l'utilisateur ait cliqué sur la balise a pour faire apparaître un nouvel onglet, ou après avoir ouvert l'iframe, le navigateur acceptera une réponse de téléchargement et téléchargera la pièce jointe. En fait, ce que l'on appelle le téléchargement de pièces jointes signifie qu'une fois que le navigateur a lu l'en-tête du message de réponse, le navigateur génère une boîte d'invite de téléchargement et continuera à télécharger le fichier après confirmation de l'utilisateur. Un fichier est en fait un flux. Le soi-disant flux est un processus de transmission. Le navigateur gérera automatiquement ce processus de transmission et générera automatiquement une barre de progression, un bouton d'arrêt du téléchargement, un bouton de continuation, un bouton d'annulation du téléchargement, un bouton de mise à jour du numéro d'octet téléchargé, etc. . Le navigateur le fait automatiquement pour nous et l’ensemble du processus n’est pas sous notre contrôle.

téléchargement ajax

La prise en charge du navigateur pour le téléchargement peut essentiellement répondre à nos besoins. Nous explorerons d'autres options dans des scénarios généraux de téléchargement. la méthode n’a pas beaucoup de sens. Cependant, il existe encore certains scénarios que les téléchargements par navigateur ne peuvent pas satisfaire. Par exemple, notre application Web doit surveiller la progression du téléchargement ou déclencher un événement spécifique une fois le téléchargement terminé, ou l'application Web peut automatiquement annuler le processus de téléchargement, ou encore. utilisez un travailleur pour créer un arrière-plan exécutant Download et plus encore. Pour les situations ci-dessus, nous pouvons utiliser le téléchargement ajax basé sur l'objet Blod.

Le téléchargement de pièces jointes Ajax est identique au téléchargement de pièces jointes Ajax, et le navigateur doit prendre en charge ajax2.0. En fait, ce qu'on appelle le téléchargement n'est pas différent d'une requête ajax ordinaire. Ce sont toutes des requêtes d'adresse URL. Cependant, les téléchargements sont généralement des fichiers binaires, et non des objets texte ou des objets json qui doivent fournir un type pouvant être encapsulé. le fichier binaire. C'est du sang. Par conséquent, définissez le type de réponse et la valeur de ResponseType sur "blod" :

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

Copier après la connexion

Exige que la valeur du champ ResponseType de l'objet XMLHttpRequest soit blob. Alors, quel est l'objet sang ?

Objet Blod

MDN le décrit comme :

L'objet Blob est un objet de type fichier contenant des données brutes en lecture seule. Les données d’un objet Blob ne doivent pas nécessairement être sous leur forme native en JavaScript. L'interface File est basée sur Blob, hérite des fonctions de Blob et étend la prise en charge des fichiers locaux sur l'ordinateur de l'utilisateur. Grâce à l'objet Blob, nous pouvons encapsuler un flux binaire dans un objet.

Si vous connaissez l'API HTML5 relative aux fichiers, vous devriez être familier avec l'objet blod. Blod peut encapsuler un flux d'octets dans un fichier. Si la valeur ResponseType de l'objet XMLHttpRequest est blob, nous pouvons traiter le corps de la réponse comme un objet blob.

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

Copier après la connexion

Utilisez ajax pour télécharger le fichier, puis enregistrez le fichier en tant qu'objet blob et mettez-le en cache dans le navigateur. Alors, comment permettre aux utilisateurs de sauvegarder des fichiers sur leur disque dur ?

Enregistrer l'objet blob sur le disque dur

Nous pouvons imiter le téléchargement du navigateur, générer une balise a ou une iframe, puis générer une URL, afin de revenir au navigateur Après le téléchargement, le navigateur générera automatiquement une fenêtre pour enregistrer la pièce jointe. L'URL peut être obtenue à l'aide de la méthode URL.createObjectURL(blob). URL.createObjectURL prend en charge les objets Blob et les objets File, et peut générer une URL virtuelle afin que l'utilisateur actuel puisse accéder à ces objets, y compris les téléchargements, bien sûr. Contrairement au téléchargement directement depuis le serveur, le téléchargement ici est interne au client et n'utilise pas le réseau io, le téléchargement est donc presque instantané. Cependant, après avoir généré l'URL, elle doit être libérée, sinon la ressource blob ne sera pas récupérée. Vous pouvez utiliser URL.revokeObjectURL pour libérer l'URL et libérer la ressource blob. Pour le navigateur IE, il possède son propre ensemble de stratégies de traitement des objets Blob, qui sont deux méthodes de navigateur : msSaveOrOpenBlob et msSaveBlob.

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

Copier après la connexion

Barre de progression et annulation de téléchargement

Ensuite, il y a la barre de progression et la fonction d'annulation de téléchargement. En fait, l'objet XMLHttpRequest a un événement de progression, mais nous. Ignorez-le généralement lorsque vous effectuez des requêtes ajax. Après tout, les requêtes générales sont instantanées et il n'est pas nécessaire de définir une barre de progression pour elles. Mais le téléchargement ajax est différent. Le téléchargement de pièces jointes prend du temps, il est donc nécessaire de développer une barre de progression pour cela. En écoutant l'événement de progression, nous pouvons obtenir la progression du téléchargement.

Utilisez la fonction abort de l'objet XMLHttpRequest pour annuler le téléchargement. De plus, l'événement de chargement peut surveiller l'achèvement du téléchargement et l'événement d'erreur peut surveiller l'échec du téléchargement. En bref, les événements et les méthodes de téléchargement ajax et d'une requête ajax ordinaire sont exactement les mêmes.

Optimisation des performances et politique de même origine

Les téléchargements Ajax, comme les longues connexions, occuperont plus de bande passante que les requêtes ordinaires, en particulier les téléchargements, qui occupent plus de bande passante. Par conséquent, d'autres requêtes ajax peuvent être bloquées pendant le processus de téléchargement, il est donc recommandé que les ressources téléchargées par ajax et les autres ressources demandées utilisent des noms de domaine différents, mais cela entraînera de nouveaux problèmes - le même problème de politique d'origine.

La même politique d'origine est la pierre angulaire de la sécurité du navigateur. Sans une même politique d'origine, n'importe quel site Web peut lancer une attaque CSRF. S'il ne peut pas être garanti que l'URL de la ressource téléchargée a la même origine que l'URL de la page actuelle, la même politique d'origine sera déclenchée et le téléchargement échouera. Par conséquent, le traitement inter-domaines Ajax est requis. Par rapport aux méthodes de téléchargement iframe et new tab (en fait, iframe a également une politique de même origine, qui exige que la page à l'intérieur de l'iframe et la page parent ne puissent pas accéder au contenu de l'autre, mais la fonction de téléchargement n'implique pas ce type d'accès au contenu de chacun, donc le téléchargement iframe n'est pas affecté par la même politique d'origine), le téléchargement ajax est toujours de nature ajax, il sera donc affecté par la même politique d'origine du navigateur. Par conséquent, si vous téléchargez une pièce jointe à partir d'une source non originale, le serveur sur lequel se trouve la pièce jointe doit prendre en charge cors. Si le serveur doit accéder aux cookies, le withCredentials de l'objet XMLHttpRequest doit être défini sur true.

Dans le même temps, en raison de la même politique d'origine, nous ne pouvons pas utiliser ajax pour télécharger des ressources tierces, car les services de téléchargement habituels n'effectuent pas de traitement cors, comme les téléchargements iframe ou les téléchargements de nouveaux onglets. La méthode n'est pas affectée par la politique de même origine, il n'est donc pas nécessaire d'effectuer un traitement cors. Cela limite considérablement l'applicabilité du téléchargement ajax.

Résumé :

Enfin, résumons les scénarios d'utilisation du téléchargement ajax :

1. Scénarios dans lesquels la progression du téléchargement doit être surveillée, tels que Il a été constaté que la progression du téléchargement de l'utilisateur était trop lente et d'autres solutions ont été proposées de manière proactive.

2. Un événement spécifique doit être déclenché une fois le téléchargement terminé, comme une fenêtre contextuelle de notification sur le bureau.

3. Un téléchargement en arrière-plan est requis. Par exemple, nous pouvons télécharger secrètement la pièce jointe une fois que l'utilisateur a ouvert la page Web et l'a mise en cache, puis l'enregistrer localement lorsque l'utilisateur souhaite réellement télécharger la pièce jointe. Nous pouvons même utiliser des Workers pour créer un fil d'arrière-plan afin de garantir que le processus de téléchargement n'affecte pas le rendu normal de la page.

4. Il doit être téléchargé et non enregistré sur le disque dur, mais la webapp traite directement la pièce jointe. Par exemple, pdf.js utilise ajax pour télécharger.

Enfin, je présente la démo de téléchargement ajax de l'auteur : ajaxDownloadDemo_jb51.rar

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile. vous dans le futur.