request - Mootools リクエスト フォロー プログレス 出力

Question

Mootools でリクエストを実行するときに、「これまでに」ダウンロードされた出力を追跡する方法はありますか? 「onProgress」があることは知っていますが、ダウンロードされたバイトしか得られません。

ダウンロードされるページは電子メール アドレスのリストであり、送信された電子メールごとに、実行が完了するまでページに行が追加されます。

その最新の行を取り上げて、進行状況に応じてユーザーに提示したいと思います...

Answer 1

mootools は、Webkit と gecko がサポートするもののみをサポートします (現在はおそらく IE9/10 もサポートしています)。

onLoadstart(event, xhr)

onProgress(event, xhr)

進行状況イベント (利用可能な場合) で十分です。利用可能なものの仕様については、https://dvcs.w3.org/hg/progress/raw-file/tip/Overview.htmlを参照してください。

http://jsfiddle.net/dimitar/tYdjN/

var list = [], 
    len = 10000, 
    loaded = $('loaded'),
    output = $('output'),
    count = 168,
    chunks = 0;

while(len--)
    list.push(Faker.Internet.email());

list = list.join('<br/>\n');

new Request({
    url: '/echo/html/',
    data: {
        html: list
    },
    onProgress: function (event, xhr) {
        chunks++;
        loaded.set('html', event.loaded + ' bytes');
        new Element('h4[html=Chunk ' + chunks +']').inject(output);

        new Element('div.chunk', {
            html: xhr.response,
            styles: {
                background: ['rgb(', count, ',', count,',', count, ')'].join('')
            }
        }).inject(output);
        count -= 16;
    },
    onComplete: function(){
        //console.log(this.response.text);
        // $('list').set('html', this.response.text);
    }
}).send();

この例では jsfiddle の ajax api を使用しており、私は Faker.js を使用して 10000 通のランダムなメールを生成しています。各チャンクは独自のメールを div に出力します。