cross-site XmlHttpRequest in Firefox?

Question

I understand (I think) that XmlHttpRequest objects adhere to the "same-domain" policy. However, I want to create a simple (POC) local html file that downloads XML from a web server and does something with it (let's start with a simple "alert()").

Is it possible at all? Do I need a special Firefox config option?

The server from which I'm trying to download is not under my control (it's actually a Google API).

My simple attempt is the code from Mozilla's "Using XMLHttpRequest" page. It returns an error I don't really understand from the "send" method.

Disclaimer: I'm mainly a C/C++ developer - never done any serious JS programming, never tried using these APIs.

Answer 1

XMLHttpRequest actually adheres to a much stricter implementation of the same domain policy: while you can set the document.domain property to allow JavaScript served from two sub-domains to talk with each other, you can't do that with XMLHttpRequestObject. In your case, going to a completely different domain, you couldn't do that with JavaScript either.

There are a couple of options. First, you can use a reverse proxy to make it appear that the external site is a sub-domain of your site. Take a look at Apache's mod_proxy, in particular ProxyPassReverse

Another alternative is to return data as a JSON object: <script src="foo"> can retrieve whatever data it wants from wherever it wants. Downside of this is that it's not (easily) repeatable (as in multiple requests from same page).

I also recommend that you Google for "google mashups". Most of these live on the "googlemashops.com" domain, which makes implementation a lot easier. A few live outside that domain, and may give you some ideas.

Edit: rather than use the XMLHttpRequest object directly, I recommend going through a third-party library such as prototype.js

Answer 2

If the XML that you're trying to retrieve is returned by one of Google's JS APIs, then there's no need for XmlHttpRequest(since that can only be used on the same domain as your page anway).

So in the case of using a Google API, such as the Maps one, usually begin by adding a reference to their common API somewhere on your page:

<script type="text/javascript" src="http://www.google.com/jsapi?key=your_google_api_key"&gt;&lt;/script&gt;

Then add a reference to the specific API(s) you plan to use to your page:

<script type="text/javascript">google.load("maps", "2");</script>

Now you can call the various functions provided by that API:

<script type="text/javascript">
  function initialize() {
    var map = new google.maps.Map2(document.getElementById("map"));
    map.setCenter(new google.maps.LatLng(41.86, 87.68), 13);
  }
  google.setOnLoadCallback(initialize);
</script>

No XmlHttpRequest required :)

Answer 3

Alternatively try using IE8. If you are running from disk and not a website IE8 will ignore all normal domain restrictions and get the data you want.

Answer 4

You can use JSONP to do this. I do it here using jQuery and PHP. Basically I use the PHP proxy to wrap the JSON reply so jQuery can handle it. It's under BSD.