jQuery Cross Site Fetch

Question

I feel like this is easy but I am missing something...

Using jQuery, I am trying to fetch a remote page (on a different server), capture the HTML contents, and inject that content into a hidden DIV. However, using either $.ajax or $.get results in a cross-site scripting error in FireFox.

Any suggestions? Code:

$.ajax({
    type: 'GET',
    url: "http://www.remote-url.com",
    dataType: 'html',
    success: function(data) {
        $('#put_here').empty().append(data);
    }
});

Thanks!

Chad

Answer 1

You can't do that - the Same Origin Policy prevents it for security reasons (as you've found).

You need to run a proxy script on your own server that your JavaScript uses to fetch the content from the remote server on its behalf.

Answer 2

Alternatively you could use already-existing APIs like YQL or Pipes to access the data you're after... and then return results using JSONP (cross-domain operable).

Answer 3

AJAX disallows cross-domain fetching. You must have your server fetch from whatever server you want to get information from.

Answer 4

If you want to go cross site, you can't pull in an entire page. There is a way to get data from cross domain sites using JSONP. What you do, is make the js call the data you get back as a function which will evaluate json data. But wont work if you are trying to fetch an entire page, however.