Question

Is there any way to follow the output downloaded “so far” when doing a request with Mootools?
I know there’s “onProgress”, but that only gives me the bytes downloaded.

The page that is being downloaded, is a list of e-mail addresses, and for every e-mail that has been sent, the page appends a line to the page until it’s done executing.

I would like to take that latest line, and present that to the user, as the progress goes on…

Answer 1

mootools supports only what webkit and gecko support (and now maybe IE9/10).

onLoadstart(event, xhr)

onProgress(event, xhr)

the progress event – if available – should be enough to get you going. see https://dvcs.w3.org/hg/progress/raw-file/tip/Overview.html for the spec of what is available.

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

this example is using jsfiddle’s ajax api and I am using Faker.js to generate 10000 random emails – whihc jsfiddle sends back to me in chunks. each chunk outputs its own emails in a div.