How do you get content from another domain with .load()?

Question

Requesting data from any location on my domain with .load() (or any jQuery ajax functions) works just fine.

Trying to access a URL in a different domain doesn't work though. How do you do it? The other domain also happens to be mine.

I read about a trick you can do with PHP and making a proxy that gets the content, then you use jQuery's ajax functions, on that php location on your server, but that's still using jQuery ajax on your own server so that doesn't count.

Is there a good plugin?

EDIT: I found a very nice plugin for jQuery that allows you to request content from other pages using any of the jQuery function in just the same way you would a normal ajax request in your own domain.

The post: http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/

The plugin: https://github.com/jamespadolsey/jQuery-Plugins/tree/master/cross-domain-ajax/

Answer 1

This is because of the cross-domain policy, which, in sort, means that using a client-side script (a.k.a. javascript...) you cannot request data from another domain. Lucky for us, this restriction does not exist in most server-side scripts.

So...

Javascript:

$("#google-html").load("google-html.php");

PHP in "google-html.php":

echo file_get_contents("http://www.google.com/");

would work.

Answer 2

Different domains = different servers as far as your browser is concerned. Either use JSONP to do the request or use PHP to proxy. You can use jQuery.ajax() to do a cross-domain JSONP request.

Answer 3

One really easy workaround is to use Yahoo's YQL service, which can retrieve content from any external site.

I've successfully done this on a few sites following this example which uses just JavaScript and YQL. http://icant.co.uk/articles/crossdomain-ajax-with-jquery/using-yql.html

This example is a part of a blog post which outlines a few other solutions as well. http://www.wait-till-i.com/2010/01/10/loading-external-content-with-ajax-using-jquery-and-yql/