ダウンロードの進行状況バーを実装する Ajax サンプル コード

この記事の内容は、ダウンロードプログレスバーのAjax実装のサンプルコードに関するもので、ある程度の参考値はありますので、困っている方は参考にしていただければ幸いです。

XMLHttpRequest オブジェクトの responseType 属性を設定することで、サーバーから返される応答のデータ型を変更できます。使用可能な属性値は、空の文字列 (デフォルト)、「arraybuffer」、「blob」、「document」、および「text」です。

応答属性の値は、 responseType 属性。リクエストが不完全または失敗した場合は、ArrayBuffer、Blob、Document、string、または NULL になります。

新しいバージョンの XMLHttpRequest オブジェクトには、データ送信時に進行状況情報を返す進行イベントがあります。

アップロードとダウンロードの 2 つの状況に分かれます。ダウンロード進行状況イベントは XMLHttpRequest オブジェクトに属し、アップロード進行状況イベントは XMLHttpRequest.upload オブジェクトに属します。

1. フロントエンド コード:

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. バックエンド処理インターフェイス

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

注意::

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

httpヘッダーを記述する際に、「Content-Length」とContent-Encodingを追加します。

##こうすることで、JS側のprogressイベントのevent.lengthComputableの値がtrueになります。送信が完了する前に値を取得します。

それ以外の場合、event.lengthComputable 値は false を返し、データが完了する前にevent.total 値は 0 になります。

この記事はすべてここにあります。その他の興味深いコンテンツについては、PHP 中国語 Web サイトの

JavaScript チュートリアル ビデオ 列に注目してください。

以上がダウンロードの進行状況バーを実装する Ajax サンプル コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。