Question

I am calling the following jQuery code on page load to test the concept of calling an external web service from the client. The data object in the success callback is always empty. What am I doing wrong?

 $.ajax({
    url: "http://www.google.com/search",
    type: 'GET',
    data: { q: "green tea" },
    success: function(data) { alert("Data Loaded: " + data) },
    dataType: "text/html"
 });

Answer 1

It’s the same-origin policy you’re hitting here, it’s specifically in place to prevent cross-domain calls for security reasons. The expected behavior is for the response to be empty here.

You either need to fetch the data via JSONP or get the data via your own domain, your server proxying the request.

It’s worth noting Google has a full JavaScript API for searching that you may want to check out for doing this.