jQuery AJAX with JSONP

JSONP Example

On many occasions, you may come across a requirement to request data from a remote website. These websites provide APIs that accept requests and send back a response. For security reasons, Ajax requests are limited to the same domain or also known as the same origin. In this context, an origin is the combination of three components: URL protocol, hostname and port. If two URLs have the same components, then they are within the same origin, however if any of the components is different, then they are of different origins or cross origin.

This cross domain policy is enforced to reduce the risks of a cross-site scripting (CSS) attack, where the browser or user maliciously attempts to contact another site.

So how do you make Ajax requests outside your domain or in other words, how do you make cross-domain Ajax requests? jQuery makes it possible to request JSON data outside the domain by requesting JSON with Padding – also known as JSONP. In your Ajax request, if the data is marked as JSONP, jQuery appends a query string parameter callback=? to the URL. Alternatively, you can also manually add &jsoncallback=? to the URL which notifies the calling site that you want to receive JSONP data. Doing so also lets jQuery’s $.getJSON() function treat this request as if the browser was requesting an external JavaScript file. Simply put, JSONP is JSON wrapped inside a function call

Let’s see this in action. We will use the Ziptastic API service (http://ziptasticapi.com/) which accepts a US zip code and returns City and State based on it and gives the data back in JSONP format which you can consume in your jQuery application.

The format of the API call is : http://ziptasticapi.com/zipcode?callback=mycallback

An important thing to observe in this API url is that ZipCode is part of the url.

Create a file ‘SimpleJSONP.html’. Let’s declare two text boxes, one for the Zip code and the other for the City.

Here’s the code to consume this API:

We start by monitoring the change event on the Zip Code textbox. We then use val() to retrieve the value of the Zip Code entered by the user in a variable zip. Since the Ziptastic API is of the format http://ziptasticapi.com/zipcode?callback=mycallback, in our code, we are concatenating the zip code in the url, followed by the callback parameter to tell the API to return JSONP. We then use $.getJSON and pass in the url and a success parameter result that consists of a callback function that will be called if the request is successful. Inside the callback function, we check the value of the city and if it exists, update the value of the City textbox. Run the example, enter a zip code say 94101 and hit tab. You will see that the City textbox populates with the City name.