AngularJS Ajax Overview

Ajax using AngularJS

AngularJS Ajax using $http

AngularJS Ajax using $http JSONP

How JSONP enables cross-site request

$http vs JSONP for cross-site request

AngularJS $http.get Ajax calls

AngularJS $http.post Ajax calls

AngularJS $http.delete Ajax calls

$http vs JSONP for cross-site request

In the previous posts we saw on how to make Ajax requests using $http and JSONP, we also saw that $http does not support cross-site server requests, and JSONP supports it. In this post we shall see an example of making cross-site service requests using $http and JSONP and observer the responses in both the cases.

The following example makes the same Ajax calls using JSONP and $http, let us observe the response from both the requests.

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
});

AngularJS Ajax using $http

In the previous post Ajax using AngularJS, we saw on what Ajax is and its need in modern web development tools, in this post we shall see on Ajax is supported in AngularJS using the $http service.

$http is an important service in AngularJS which helps in making Ajax calls to the server, $http takes the service URL to be invoked as a parameter, makes calls to the server gets the response and service and passes it back to Angular

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

$http.get('serviceURL').
  success(function(data, status, headers, config) {
          // Process response for Success here
  }).
  error(function(data, status, headers, config) {
          // Process response for Failure here
  });

The $http Ajax calls supports methods success() and error() to handle the response from the server end, the method names are self-descriptive they are used to handle success and error scenarios from the Ajax calls.

$http supports Get, Post, Put and Delete operations, all these take the service URL as parameters, the Post and Put variant in addition takes the Post data which is to be submitted to the service.

The $http service communicates with the server using XMLHttpRequest, due to this Ajax calls made using $http should be within the same domain, i.e both the client application and the service should be hosted in the same domain, calls made to a service/API in a different domain will fail.

$http service in AngularJS

$http is an important service in AngularJS which helps in making Ajax calls to the server, $http takes the service URL to be invoked as a parameter, makes calls to the server gets the response and service and passes it back to Angular

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

$http.get('serviceURL').
  success(function(data, status, headers, config) {
          // Process response for Success here
  }).
  error(function(data, status, headers, config) {
          // Process response for Failure here
  });

$http supports Get, Post and Delete operations, all these take the service URL as parameters, the Post variant in addition takes the Post data which is to be submitted to the service.

The following example shows how to make an API call using $http and display the results in the view using ng-repeat directive.