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.

How JSONP enables cross-site request

In the previous post AngularJS Ajax using$http JSONP we saw on using JSONP to make cross-site requests, i.e the AnjularJS client and the service/API are located in different domains, by default browsers do not allow cross-site Ajax requests.

JSONP stands for JSON with padding, JSONP enables cross-site requests using the <script> tag, normal $http requests are sends server request URL as plain text, hence browsers reject the requests made to different domains, JSONP pads the requests within <script> tags and sends it to the server, browsers do not enforce same-origin validation for content in the <script> tag hence JSONP requests by-pass the validations and thereby enable us to make cross-site requests from the client to the server.