Invoking instance methods of Ajax XMLHttpRequest

Question

Invoking instance methods of Ajax XMLHttpRequest

function fetchJSONData(url, callback){
    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){
            callback(request);
        }
    });
    request.send(null);
}

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

I have a few queries:

1. What kind of event is passed to the function request.onprogress()?

2. Why am I unable to see request.onprogress() being called? Instead, there is a property with a value of null before it was initialized: Check screenshot in console

3. Is this event propagated to the function every time or only on event trigger? If it's upon event trigger, why can't I find

request.addEventListener('event', request.onprogress())

anywhere?

javascript ajax

Answer 1

Answer №1

When the XMLHttpRequest object's onprogress property is called, it means that the server has provided an update on the progress of the operation. This triggers the XHR's Progress event, where a specific function is set up to handle that event:
```
function(event){
   console.log(event.loaded, event.total);
} 
```
The progress event is activated by updates from the server, and the timing of when this will occur is not precise. Generally, it happens approximately every 50 milliseconds for each byte transferred (as noted here: XmlHttpRequest onprogress interval).
Each time the Progress event is triggered, the event is sent to your event handler. This enables you to access the values of event.loaded and event.total. With each invocation of the function, an updated event is passed along with fresh information.

In your code example, the progress event is not being connected using the DOM Event Model:

    request.addEventListener('event', functionToHandleEvent);

Instead, the progress event handling function is stored within the onprogress object property:

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

Although this approach registers your callback function, it relies on an older technique. The more standard (and modern) method would be as follows:

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

Answer 2

When the XMLHttpRequest object's onprogress property is called, it means that the server has provided an update on the progress of the operation. This triggers the XHR's Progress event, where a specific function is set up to handle that event:
```
function(event){
   console.log(event.loaded, event.total);
} 
```
The progress event is activated by updates from the server, and the timing of when this will occur is not precise. Generally, it happens approximately every 50 milliseconds for each byte transferred (as noted here: XmlHttpRequest onprogress interval).
Each time the Progress event is triggered, the event is sent to your event handler. This enables you to access the values of event.loaded and event.total. With each invocation of the function, an updated event is passed along with fresh information.

In your code example, the progress event is not being connected using the DOM Event Model:

    request.addEventListener('event', functionToHandleEvent);

Instead, the progress event handling function is stored within the onprogress object property:

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

Although this approach registers your callback function, it relies on an older technique. The more standard (and modern) method would be as follows:

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

Answer 3

Answer №2

What type of event is passed to the request.onprogress function?

As stated in the documentation, the event is passed an object with properties such as loaded and total.

Why am I not seeing the invocation of request.onprogress?

The reason you are unable to see the invocation is because the remote endpoint () does not support CORS. Therefore, your AJAX request is not being sent. The progress event will only be triggered once the AJAX request is successfully made to report progress.

It's important to note that cross-domain AJAX calls are not allowed unless explicitly supported by the remote server.

3. Is this event passed to the function periodically or triggered by a specific event?

This event is triggered during the execution of the AJAX request.

Answer 4

What type of event is passed to the request.onprogress function?

As stated in the documentation, the event is passed an object with properties such as loaded and total.

Why am I not seeing the invocation of request.onprogress?

The reason you are unable to see the invocation is because the remote endpoint () does not support CORS. Therefore, your AJAX request is not being sent. The progress event will only be triggered once the AJAX request is successfully made to report progress.

It's important to note that cross-domain AJAX calls are not allowed unless explicitly supported by the remote server.

3. Is this event passed to the function periodically or triggered by a specific event?

This event is triggered during the execution of the AJAX request.

Invoking instance methods of Ajax XMLHttpRequest

Answer №1

Answer №2

Similar questions

Exploring the capabilities of JW Player 6 for seeking and pausing video

Include chosen select option in Jquery form submission

What is the most effective method for organizing an object by its values using multiple keys?

When faced with the error message "Typescript property does not exist on union type" it becomes difficult to assess the variable

Unfortunately, I am currently unable to showcase the specifics of the items on my website

Leetcode Algorithm for Adding Two Numbers

Search for the location where the code is not functioning as intended

A guide to extracting the Jquery Version from the Chrome browser console while browsing webpages and transferring it to the Eclipse Java console using Selenium

Refresh your inbox after sending a response by leveraging jQuery and AJAX requests

concerns regarding the security of user availability names

How can I obtain the model values for all cars in the primary object?

Customize your Bootstrap navbar dropdown to showcase menu items in a horizontal layout

Using AngularJS to filter an array using the $filter function

Leveraging jquery $.ajax when handling window.onerror in Internet Explorer

What is the best way to extract user input from a bootstrap search bar and integrate it into an ajax request to fetch information?

Javascript: Accessing a shared variable within the class

Issues with AngularJS Validation not functioning properly with File Inputs marked as 'Required'

Is it possible to refresh a div with just one click on an image?

Manage SPA forms using Dataform Javascript - Safeguarding form information by avoiding inclusion in the URL

CSS selector targeting the value inside a textbox