AJAX not working with jQuery

Question

I want to load in <div class="test"> some content from another URL ex: http://someurl.com/default.aspx.

I tried this code:

$(".test").load( 'http://someurl.com/default.aspx');

But it doesn't work.

With local file it works, but not with http://...

Can somebody help me?

Thanks

Answer 1

It looks like you have bumped into the same origin policy. You have to use a relative path for the load() method, otherwise most browsers will simply return an empty responseText.

As one possible workaround, you could set up a very simple reverse proxy (using mod_proxy if you are on Apache). This would allow you to use relative paths in your AJAX request, while the HTTP server would be acting as a proxy to any "remote" location.

The fundamental configuration directive to set up a reverse proxy in mod_proxy is the ProxyPass. You would typically use it as follows:

ProxyPass     /ajax/     http://someurl.com/

In this case, the browser would be requesting /ajax/default.aspx but in fact the server would serve this by acting as a proxy to http://someurl.com/default.aspx.

If you are using IIS, you may want to use the Managed Fusion URL Rewriter and Reverse Proxy to set up a reverse proxy.

Answer 2

you can not do cross-domain with AJAX. this is a small solution in PHP load funcion:

JS:

$(".test").load("myloadurl.php", {url: 'http://someurl.com/default.aspx'} );

myloadurl.php

<?php
header('Content-type: text/html');
print load($_GET['url']);

Answer 3

If you have control over someurl.org you should use JSONP which is a proper way to do cross-browser AJAX requests.

For example you have http://someurl.org/default.php containing something like this:

<?php
echo $_GET['jsoncallback'] . '(' . $results_in_json_format . ')';

Now you can make your AJAX query with jQuery like this:

$.getJSON("http://someurl.com/default.php?jsoncallback=?", function(data) {
     $(".test").html(data);
});