views:

124

answers:

8

I've just starting learning jQuery and AJAX. I'm able to load a local page (on my disk) into a div via jQuery.load(), but external sites don't seem to work. I've even used wireshark to check if the data is being sent from the server (it is). Sample code is below:

<html>
<head>
    <script src='jquery-1.4.2.min.js'></script>
    <script>
        $(document).ready(function() {
            // $('#test').load('localpage.htm'); works!
            $('#test').load('http://www.google.com/'); // does not work!
        });
    </script>
</head>
<body>
<div id='test'></div>
</body>
</html>

Is it possible to do this in the first place? If so, how?

A: 

You can't call Ajax from another domain. Check JSON technique for this

Aykut
JSON won't help you here as it is just a format for doing e.g. ajax calls. Same origin policy strikes here, too.
henchman
He might be referring to JSONP.
SLaks
+1  A: 

You're running into the Same Origin Policy. You can't access data from an external domain using AJAX, it's considered a security risk. The reasoning behind it is that AJAX requests work with cookies stored by the browser -- if I tried to access facebook.com, and you were logged in there, the cookie would be sent and I'd have access to your personal data.

Andy E
+2  A: 

Out of the box: no. It's a security issue. There are a few different workarounds though.

Hooray Im Helping
+2  A: 

For security reasons, you cannot use AJAX to request a page from a different domain (or protocol or port).

Instead, you can write a server-side script on your server to forward requests to another domain. (This is not possible if you're running a page from a file:// url)

SLaks
I'm not sure if you meant HTTP redirection or proxying by `to forward requests to another domain` - the former wouldn't work but forwarding wouldn't be the correct term for the latter.
Andy E
@Andy: I meant proxying. What is the correct verb?
SLaks
@SLaks, sorry, I'm just being picky when there's really no need (stress of the job, maybe? ;-)). I suppose forwarding could be used as a term, but it just read wrong to me and I almost downvoted ;-)
Andy E
Do you know of a more precise verb?
SLaks
Proxy is the correct term. Not that it really matters; your point is clear. :)
musicfreak
+2  A: 

You cannot do ajax calls to a different domain than the script originates from.

For doing such a thing, you have to use a proxy page on your own page, eg:

<script>
    $(document).ready(function() {
        $('#test').load('ajax/getgoogle.php');
    });
</script>

getgoogle.php:

<?php

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

?>
henchman
+2  A: 

Ajax? Yes. XHR? No (unless the browser implements Cross-site XHR which isn't widespread yet).

To get the data with Ajax without using XHR the external site must provide the data in the JSONP format.

Alternatively, you can proxy the data through a server side script on your server, thus making it come from the same host (as far as JavaScript is concerned).

David Dorward
+2  A: 

No, it's not. Have a look at Same Origin Policy. The site you are trying to request would need to have JSONP enabled for that to work, and you would utilize a cross-domain callback. Alternatively, you could create a proxy on your own domain which grabs the page on behalf of your ajax request.

karim79
+1  A: 

Load this PHP script instead of trying to load website directly

$filename = "http://www.sitename.com";
$handle = fopen($filename, "r");
if ($handle)
{
    while (!feof($handle))
    {
        $text .= fread($handle, 128);
    }
    fclose($handle);
}
print $text;

Edit: Or simply like henchman's solution with *file_get_contents*

Ergec
Use cURL in preference to fopen: http://stackoverflow.com/questions/636678/what-are-the-important-differences-between-using-fopenurl-and-curl-in-php/637693
David Dorward