JQuery.ajax success function returns empty

Question

I have a very basic AJAX function in JQuery:

$.ajax({
    url: "http://www.google.com",
    dataType: "html",
    success: function(data) {
        alert(data);
    }
});

But the data is always an empty string, no matter what url I go to... Why is that? I am running this locally at http://localhost:3000, and am using JQuery 1.4.2.

If I make a local response, however, like this:

$.ajax({
    url: "http://localhost:3000/test",
    dataType: "html",
    success: function(data) {
        alert(data);
    }
});

...it returns the html page at that address. What am I missing here?

Answer 1

You can't load data from other domains. It's a security feature.

Here's a link that talks about how to create a proxy from your web server to get around his limitation.

http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html

Answer 2

You're running into the same-origin policy, preventing you from making an ajax request to another domain, for security reasons.

You can't make a request to:

• Another domain
• Another port, even on the same domain
• A sibling domain

You can make a request to:

• The same domain
• A subdomain of the current domain

You can read more about it here