Changes of XMLHttpRequest in Firefox 3.1

The XMLHttpRequest has undergone an enormous change in Firefox 3.1 (atm not released, the release is for begin 2009) and I would like to let you know what the differences are. Actually XMLHttpRequest has undergone two major changes. One is the support for cross-site XMLHttpRequest. The other new feature is the ability to add progress events to the XMLHttpRequest.

Cross-site XMLHttpRequest

Let's start with Cross-site requests. Until now it was prohibited to get content from other sites then the site it was on. That was because of security raisons. In development that was sometimes a pain in the ass. It happened that you wanted to get data from a server you own yourself, but didn't had the same domainname. Therefor implemented Firefox 3.1 a special way to make it possible to have XMLHttpRequest across different domains.
On the coding part nothing changes for JavaScript. You just change the url to the webpage you want to fetch. On the webpage itself you need to change some bits. You need to let to know that it is alright that the page can be fetched with an cross-site XMLHttpRequest. You need to add an access-control header to the page. There you can specify if it is possible to fetch the page and which domains can fetch it. I will list here some examples of acces-control headers:

// Anyone is allowed to access this resource - no restrictions
Access-Control: allow <*>

// Everyone is denied access to this resource - no exceptions
Access-Control: deny <*>

// Only sites that are hosted on 'mozilla.org' may access this resource
// (this includes sub-domains as well)
Access-Control: allow <mozilla.org>

// All sub-domains but developer.mozilla.org, of mozilla.org, can access this resource
Access-Control: allow <mozilla.org> exclude <developer.mozilla.org>

// Only this domain, on this port, with this request method can access the resource
Access-Control: allow <developer.mozilla.org:80> method GET, POST

more examples can be found in the W3C Acces Control working draft

Progress events

As of now it is much easier to monitor the state of an XMLHttpRequest. You are now easily able to monitor the percentage that is done. You can run an function when the transfer is complete. The same for when the download is canceled or failed. All that is with the use of eventListener on the XMLHttpRequest. This demands some example code that is coming now...

var req = new XMLHttpRequest();

req.addEventListener("progress", updateProgress, false);
req.addEventListener("load", transferComplete, false);
req.addEventListener("error", transferFailed, false);
req.addEventListener("abort", transferCanceled, false);

req.open();

...

function updateProgress(evt) {
  if (evt.lengthComputable) {
    var percentComplete = evt.loaded / evt.total;
    ...
  } else {
    // Unable to compute progress information since the total size is unknown
  }}
}

function transferComplete(evt) {
  alert("The transfer is complete.");
}

function transferFailed(evt) {
  alert("An error occurred while transferring the file.");
}

function transferCanceled(evt) {
  alert("The transfer has been canceled by the user.");
}

And now hopefully the other browser will adapt this soon, so it gets very easy to monitor the state of XMLRequests.