JavaScript中XMLHttpRequest.onload赋值疑问及构造原理问询

Great question—this is one of those browser API details that trips up a lot of developers when they first dive into XMLHttpRequest. Let’s break this down clearly:

Is onload a property or a method? #

Short answer: it’s a property. Specifically, it’s an event handler property designed to store a function that runs when the load event fires on the XMLHttpRequest instance.

Unlike methods (which are functions defined on the object to perform actions), onload is just a slot that holds a callback. By default, its value is null—meaning no code runs when the load event triggers until you assign a function to it.

Why can we assign a function to it? #

That’s exactly what it’s built for! When you do:

let http = new XMLHttpRequest();
http.onload = function(event) {
  // Code to run when the request finishes
};

You’re replacing the default null value with your custom function. The browser watches this property, and when the request successfully completes (the load event fires), it executes the function you’ve assigned.

Yes, assigning a new function does overwrite any previous value stored in onload. If you set it twice, only the last function will run when the event triggers.

What’s the structure of XMLHttpRequest.onload? #

onload is defined on the XMLHttpRequest.prototype, so every instance of XMLHttpRequest inherits this property. It’s typed as an EventHandler—a special function type that accepts a single ProgressEvent parameter (a subclass of the standard browser Event).

This event parameter gives you access to details about the completed request:

• event.target refers to the XMLHttpRequest instance itself (so you can use event.target.status or event.target.responseText instead of referencing the http variable directly)
• event.type will be "load"
• Other properties like event.loaded (bytes transferred) are available too

Here’s a more complete example using the event parameter:

let http = new XMLHttpRequest();
http.onload = function(event) {
  const request = event.target;
  if (request.status >= 200 && request.status < 300) {
    console.log('Request succeeded:', request.responseText);
  } else {
    console.error('Request failed:', request.status);
  }
};
http.open('GET', '/api/data');
http.send();

Quick side note: onload vs addEventListener #

If you want to attach multiple functions to the load event (instead of overwriting with a single callback), you can use addEventListener instead:

http.addEventListener('load', function() {
  console.log('First load callback');
});
http.addEventListener('load', function() {
  console.log('Second load callback');
});

Both functions will run when the load event fires, which isn’t possible with the onload property alone.

Hopefully this clears up the confusion—event handler properties like onload are a common pattern in browser APIs, and once you see them as "callback storage slots" instead of methods, their behavior makes perfect sense!

内容的提问来源于stack exchange，提问作者arman rozika