AngularJS Ajax using $http JSONP

In the previous post AngularJS Ajax using $http, we saw on how to make Ajax calls in AngularJS using $http, we also saw that we cannot make cross site calls using the $http service, but in practical situations we might have to call services/APIs deployed in a different server/domain, example could be making service / API calls to 3^rd part services which are deployed in the Vendor’s server.

To overcome this, the $http service supports making Ajax calls using JSONP, the normal Ajax calls made using $http use the XMLHttpRequest object which does not support cross site referencing, however we can modify the request a bit to make JSONP calls to support cross domain.

The syntax for making JSONP Ajax calls using $http is as follows

$http({
       method: 'JSONP',
       url: 'serviceURL'?callback=JSON_CALLBACK'
}).success(function(data, status, headers, config)
{
           // Process response for Success here
}).error(function(data, status, headers, config)
{
          // Process response for Failure here
});