Using jquery $.get to call an external web service

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.

Answer 2

browser dont allow you to make cross domain request(a security feature). there is a hack for that with a limitation that you can get only json as response.

----the trick (hack)----

using jquery(or javascript)you create a new script tag and with src="url_of_third_party?", when that request is made you get json from cross site.

jQuery('body').append('<script src="cross_site_url" type="text/javascript"></script>');

or simply you can do this

  $.ajax({

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

note: dataType=jsonp