Ajax XMLHttpRequest instance methods ivocation

Question

function getJSON(url, placeholderForCallback){
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.onprogress = function(event){
        console.log(event.loaded, event.total);
    };
    request.addEventListener('load', function(){
        if(request.status < 400){
            placeholderForCallback(request);
        }
    });
    request.send(null);
}

getJSON('http://api.open-notify.org/astros.json', function(placeholder){
    console.log(placeholder.responseText);
});

I've got three Questions:

1. Which event is passed to the function request.onprogress()?

2. Why can't I see request.onprogres() invocation? Instead, there is a property with the value null before initialization: printscreen of console

3. Is this event passed to the function every period of time or event fire? In case of event fire - why can't I see request.addEventListener('event', request.onprogres()) anywhere?

as usually good idea comes afterwards) - added 'event' itself to the console.log: request.onprogress = function(event){ console.log(event.loaded, event.total, event); }; it gave me 'XMLHttpRequestProgressEvent' object — Dancyg, Mar 06 '16 at 15:55

score 0 · Answer 1 · answered Mar 06 '16 at 15:45

what event is passed to the function request.onprogress

According to the documentation it's passed an object with loaded and total properties among others.

why cannot I see request.onprogres invocation

Because the remote endpoint you are trying to call (http://api.open-notify.org/astros.json) doesn't support CORS and as a result of that your AJAX request is never sent. The progress event will be called once the AJAX request is actually made in order to report the progress.

Please note that you cannot make cross domain AJAX calls unless the remote server supports it explicitly.

3.this event is passed to the function every period of time or event fire?

It's an event that will be triggered during the execution of the AJAX request.

score 0 · Accepted Answer · edited May 23 '17 at 11:50

The onprogress property of the XMLHttpRequest object is called when the server reports some progress of the overall operation. This triggers the XHR's Progress event, which has the following function stored as a handler for that event:
```
function(event){
   console.log(event.loaded, event.total);
} 
```
The invocation of the progress event is triggered by server progress updates, so you won't / can't know exactly when that will happen, but it generally is about every 50 milliseconds for each byte (as mentioned here: XmlHttpRequest onprogress interval).
Yes, every time the Progress event fires, the event is passed to your event handler. This is why you are able to get event.loaded and event.total. Each time that function is called, an updated event is passed with the updated information.

Your code does not "wire up" the progress event using the DOM Event Model:

    request.addEventListener('event', functionToHandleEvent);

Instead, your code uses the onprogress object property to store the function that handles the event:

   request.onprogress = function(event){
      console.log(event.loaded, event.total);
   };

This technique does get your callback function registered, but it is an older technique. The standard (and newer way) would be:

   request.addEventListener("progress", function(event){
        console.log(event.loaded, event.total);
   });

Is 'XMLHttpRequestProgressEvent' object passed to each of the properties: `onabort: null onerror: null onload: (event) onloadend: null onloadstart: null onprogress: (event) onreadystatechange: null ontimeout: null` as an 'event'? — Dancyg, Mar 06 '16 at 18:32
When an event is handled by a callback function, that function is always passed the event object as the first parameter to the function. So, yes, the functions you create to handle abort, error, readystatechange, timeout, etc. will all be passed the event object. Just make sure your callback function receives it by specifying a parameter for it, like function(evt) {. . . } — Scott Marcus, Mar 06 '16 at 19:29

Ajax XMLHttpRequest instance methods ivocation

2 Answers2