Ajax-Beispielcode zum Implementieren der Download-Fortschrittsleiste

Der Inhalt dieses Artikels befasst sich mit dem Beispielcode der Ajax-Implementierung des Download-Fortschrittsbalkens. Er hat einen gewissen Referenzwert. Ich hoffe, er wird für Sie hilfreich sein.

Sie können den Datentyp einer vom Server zurückgegebenen Antwort ändern, indem Sie das Attribut „responseType“ eines XMLHttpRequest-Objekts festlegen. Verfügbare Attributwerte sind die leere Zeichenfolge (Standard), „arraybuffer“, „blob“, „document“ und „text“.

Der Wert des Antwortattributs variiert je nach Wert des Das ResponseType-Attribut kann ein ArrayBuffer, Blob, Document, String oder NULL sein, wenn die Anforderung unvollständig ist oder fehlgeschlagen ist.

Die neue Version des XMLHttpRequest-Objekts verfügt über ein Fortschrittsereignis, um Fortschrittsinformationen bei der Datenübertragung zurückzugeben.

Es ist in zwei Situationen unterteilt: Hochladen und Herunterladen. Das Download-Fortschrittsereignis gehört zum XMLHttpRequest-Objekt und das Upload-Fortschrittsereignis gehört zum XMLHttpRequest.upload-Objekt.

1. Front-End-Code:

downLoadProcess(url,filename){
            filename = filename || 'xxx.csv';
            // 创建xhr对象
            var req = new XMLHttpRequest(); 
            //向服务器发送请求 open() send()
            req.open("POST", url, true);    //(method-GET/POST ,url, async) 
            req.setRequestHeader("Content-type","application/x-www-form-urlencoded");//POST时需要传递            
            //监听进度事件 
            xhr.addEventListener("progress", uploadProgress, false);
            xhr.addEventListener("load", uploadComplete, false);
            xhr.addEventListener("error", uploadFailed, false);
            xhr.addEventListener("abort", uploadCanceled, false);
            
            /*
                XMLHttpRequest 的 responseType 属性
                一个枚举类型的属性，返回响应数据的类型,只能设置异步的请求
                1、''                 -- DOMString (默认);  UTF-16
                2、arraybuffer        -- arraybuffer对象，即类型化数组
                3、blob               -- Blob对象， 二进制大数据对象
                4、document           -- Document对象
                5、json
                6、text                
            */
            //设置返回数据的类型
            req.responseType = "blob";
            
            req.onreadystatechange = function () {  //同步的请求无需onreadystatechange      
                if (req.readyState === 4 && req.status === 200) {                    
                    var filename = $(that).data('filename');                    
                    if (typeof window.chrome !== 'undefined') {                        
                        // Chrome version
                        var link = document.createElement('a');
                        link.href = window.URL.createObjectURL(req.response);
                        link.download = filename;
                        link.click();
                    } else if (typeof window.navigator.msSaveBlob !== 'undefined') {                        
                        // IE version
                        var blob = new Blob([req.response], { type: 'application/force-download' });
                        window.navigator.msSaveBlob(blob, filename);
                    } else {
                        // Firefox version
                        var file = new File([req.response], filename, { type: 'application/force-download' });
                        window.open(URL.createObjectURL(file));
                    }
                }
            };
            
            req.send("fname=Henry&lname=Ford");
        }   
        function uploadProgress(evt) {
            if (evt.lengthComputable) {　　　　　　　　　　/*后端的主要时间消耗都在查询数据和生成文件，所以可以设置默认值，直到真正到达下载的进度，再开始走进度条*/
                var percent = Math.round(evt.loaded * 100 / evt.total);
                                 
                document.getElementById('progress').innerHTML = percent.toFixed(2) + '%';
                document.getElementById('progress').style.width = percent.toFixed(2) + '%';
            }else {
                document.getElementById('progress').innerHTML = 'unable to compute';
            }
        }
        function uploadComplete(evt) {
            /* 服务器端返回响应时候触发event事件*/
            document.getElementById('result').innerHTML = evt.target.responseText;
        }
        function uploadFailed(evt) {
            alert("There was an error attempting to upload the file.");
        }
        function uploadCanceled(evt) {
            alert("The upload has been canceled by the user or the browser dropped the connection.");
        }

2. Backend-Verarbeitungsschnittstelle

public void aaa()
        {            
            string result = string.Empty;
            for (int i = 1; i <= 6000; i++)
            {
                result += i.ToString();
                int len = result.Length;
                Response.Headers.Add("Content-Length", len.ToString());
                Response.Headers.Add("Content-Encoding", "UTF-8");
                Response.Write(result);
            }
        }

Hinweis ::

Response.Headers.Add("Content-Length", len.ToString());
Response.Headers.Add("Content-Encoding", "UTF-8");

Fügen Sie beim Schreiben des http-Headers „Content-Length“ und Content-Encoding hinzu,

Auf diese Weise ist der event.lengthComputable-Wert des Fortschrittsereignisses auf der JS-Seite wahr, und event.total wird in den Daten sein. Holen Sie sich den Wert, bevor die Übertragung abgeschlossen ist,

andernfalls gibt der Wert von event.lengthComputable false zurück und der Wert von event.total ist 0, bevor die Daten abgeschlossen sind.

Dieser Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie in der Spalte JavaScript-Tutorial-Video auf der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonAjax-Beispielcode zum Implementieren der Download-Fortschrittsleiste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!