Cross-site Ajax in Firefox 3

John Resig has posted a good summary (including demo code) for how one might implement cross-site XMLHttpRequest calls, a feature currently implemented by the beta 2 release of Firefox 3.

In a nutshell, there are two techniques that you can use to achieve your desired cross-site-request result: specifying a special access-control header for your content, or including an access-control processing instruction in your XML.

What’s particularly exciting is the code that is required to take advantage of this feature. For example, to request an HTML file from a remote domain, you might do the following (you’ll need to download Firefox 3 first, of course):

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if ( xhr.readyState == 4 ) {
    if ( xhr.status == 200 ) {
      document.body.innerHTML = "And the winner is... " + xhr.responseText;
    } else {
      document.body.innerHTML = "ERROR";
    }
  }
};
xhr.open("GET", "https://www.sitepoint.com/example.php", true);
xhr.send(null);

Look familiar? Aside from the inclusion of the domain in the URL parameter of the open function, this code is identical to the standard Ajax calls that you are probably already making.

Of course, whether cross-site Ajax requests are a Bad Thing™ or not is a debate that will no doubt rage for years up until enough browsers support the functionality for it to be actually useful. Once we reach that point, it’s my bet that a whole world of new mashups, apps and other services will open up (and, yes, people who don’t understand it will no doubt do stupid things with it, as they did when Ajax became the new hotness a couple of years ago).

Read the official documentation on the Mozilla Development Center for more information (and maybe check out the documentation for some of the other features to come while you’re there).