4

私はいくつかのAJAXコードで忙しかった。ロードされたデータの量を計算し、それをパーセントで表示したいと思います。

プリロードされた情報はすべて「フィードバック」内にあります。含まれているデータの量（バイト単位）を計算できますか？また、進行状況を表示できますか？ロードしたときのように：10kb、20kb、30kbなど

私のコード：

function calc(page)
    {
    $('#pageLoad h2').animate({ marginTop : '0px'}, 200);
        $.ajax(
        {
            url:            './pages/page.php',
            type:           'POST',
            data:           'page='+page,
            success:        function( feedback )
            {
                $('#content').html( feedback );
            }                               

        });
    };

英語が下手でごめんなさい。

4

1 に答える 1

7

それは可能です。XHRにはprogressイベントがあります。唯一の問題はXHRオブジェクトへのアクセスです。残念ながら、オブジェクトbeforeSendのみを受け取りjqXHR、基になるXHRオブジェクトは受け取りません。また、ラッパーのプロパティとしてアクセスすることもできません。ただし、次のオプションを追加することで、XHRオブジェクトの作成プロセスにフックできます$.ajax()。

xhr: function () {
    var xhr = $.ajaxSettings.xhr(); // call the original function
    xhr.addEventListener('progress', function (e) {
        if (e.lengthComputable) {
            var percentComplete = e.loaded / e.total;
            // Do something with download progress
        }
    }, false);
    return xhr;
}

これが私の最初の解決策です。onreadystatechangeハンドラーに簡単にフックできず、設定後に安全に置き換えることができないため、jQueryと組み合わせるのは非常に困難です。

onreadystatechangeカスタムハンドラーを追加する必要があります。readyStateXHRオブジェクトのが（2* HEADERS_RECEIVED *）になると、ヘッダーにアクセスして合計サイズを取得し、 （LOADINGContent-Length ）でイベントが発生するのを待つことができます。xhr.readyState == 3

次に、を見て進行状況を計算できますxhr.responseText.length。
ただし、これは1回だけ発生します。したがって、（を使用して）タイマーを開始する必要があります。タイマーsetInterval()は、たとえば100ミリ秒ごとに準備完了状態と応答サイズをチェックします。リクエストが終了したらすぐに、を使用して間隔を再び停止しますclearInterval()。

于 2012-05-11T22:31:45.077 に答える