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.

Was it helpful?

Solution

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

OTHER TIPS

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"></script>

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 :)

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.

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.

With jQuery (and presumably XHR, but I try not to use it directly) you can happily do cross-domain requests, provided that you do not specify unusual headers or non-GET methods. If you do want to use these, you must have control of the server to enable OPTIONS requests.

See https://developer.mozilla.org/En/HTTP_access_control for details.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow