Angular $http and Fusion Tables in IE9

Question

I am trying a simple get request to a google fusion table in my angular controller.

$http.get(url)
    .success(function(data) {
        //Do stuff with data
    })

This works in firefox, chrome, safari and IE10+ however in IE9 (Which I am requried to support) the request fails to even send and the console shows access is denied. I have looked at other stackoverflow answers and I believe it is related to a Cross Origin Request. I tried This stackoverflow answer to no avail.

I have managed to get around the issue for now using the jQuery below. However I would rather be utilising the angular library where possible. I would also like to know why the below works and my angular $http request does not.

$.ajax({
  url: urlForId.join(''),
  dataType: 'jsonp',
  success: function(data) {
    //Do stuff with data
  }
});

Answer 1

You should use the Angular $http.jsonp() request rather than $http.get().

JSONP or “JSON with padding” is the communication technique which allows for data to be requested from a server under a different domain (also known as a Cross Origin Request). Which is what you have used in your jQuery AJAX request.

See https://docs.angularjs.org/api/ng/service/$http#jsonp