16. April 2012

How to get started with JSONP and jQuery function getJSON

Hello to all friends of webdesign out there! We're currently working on a project which is about getting Data from another server and therefore I'm going to show you how to get started with JSONP, why you maybe should use it and what you can do with it.

For those of you who haven't heard of JSON before have a look here. The P at JSONP stands for JSON with Padding and is a cross-domain method to get a JSON Object from another server. This usually won't work with JSON because of the Same Origin Policy. To overcome this JSONP comes in action.

In my little example we'll use the getJSON() method from jQuery and Apples Search API to load an image and display it.

After understanding the core concept of getting data from another server with JSONP and any JSONP supported API you'll be able to create your own apps like maybe a dynamic fotogallery with the Flickr API, an own Facebook app with the Facebook API or an own map with Google Map API.

At the end of this tutorial I'll also show you some alternatives to get the JSONP with jQuery functions $.get() and $.ajax(), so keep on reading ;).

CHECK OUT THE DEMO                         DOWNLOAD EXAMPLE FILES

Demo: type in a name of a software and click on the search button.

Yeah, yeah I know. The demo is not that super mega sexy piece of webdesign but it should rather demonstrate how it works ;)
Okay, so let's start!

The first thing I did was to create an empty HTML document, I called it index.html (super ordinary name, huh?).

 

As you could see, standard declaration and including of jQuery and a search.js script which we'll create.
In the body part I've created 3 elements:
- an input where we'll type in our search terms
- a div that allows us to click on it to start the search: onclick="search();" (this function is within the search.js we included in the head)
- and an image element which will shows our image

In the end are just some lines of css to make our demo and our button super good looking.

Well ok, not that hard wasn't it? Now comes the core of this little example: the search.js which we have included in the head of our index.html.

 

The first 2 lines of codes are variables for the type of media we're searching for and for the limits of results. That means how many results should be returned to us. In this example it's okay when we just get 1 result because we just want to display 1 image.

On Line 4 we declare the search() function which will be called whenever someone clicks on our super sexy div button from the index.html:
As you can see the function gets the inputfield via the id (#search) and stores it in a variable called element.
After this it gets the value of the attribute of element to store it in the variable searchterm.

After those preparations we can call the getJSON() method from jQuery on line 9. In our example we passed 2 parameters into that function. The 1st parameter is the url to get the JSONP and the 2nd one is the callbackfunction where we can decide what to do with the data we receive.

If you're surprised now and think where the url comes from check on Apples Search API which I used for this example. On this site you can see how our URL is formed. The term "&callback=?" at the end of the url is jQuery specific to use JSONP instead of JSON, otherwise you would get a same origin policy error.
As I've said it in the intro there are a lot of APIs out there (e.g. Flickr API, Facebook API, google Maps API etc.) so just google for it and you'll make a find.

Well, ok let's go on. Now after we have received the JSONP object we can work with the data. For your information, our JSONP object should looks something like this (You can see it when you type the url in your adressbar
e.g.: http://itunes.apple.com/search?term=angry%20birds&;country=de&limit=1&media=software) :

json

Now I've browsed through the JSONP object and searched for the keyword which stores the URL of the image. In that case: "artworkUrl100"
From the results I took the first one and select the artworkUrl100 keyword to get the URL and saved it in a variable img.
Finally I just insert an img element inside of our img div which I've prepared above.

Voila thats it. :)

 

2 other similar methods to get JSONP

Why other methods of getting JSONP?

The reason is to get "cleaner code". You'll understand it when you see it. If you download the source files you see that I've putted all 3 ways into the search.js and you can then comment your preferred method in or out to play with it. I've started with getJSON() because this was just a little example and maybe now you cherish the other methods below ;)

$.get()

 

You can just replace it with the $.getJSON() from above, it will work the same way. The difference here compared to the getJSON() is that you don't specify the data you want directly in the url by appending it but rather give another parameter to the function which data you want to receive, Line 3 - 6. Another difference is that you have to declare which datatype you want to get in line 13 "jsonp"

$.ajax()

 

With jQuery function ajax() you even have "cleaner" code because of the settings you can pass into the function. The settings are simply key value pairs as you can see in the source code.

 

That's it! I hope you enjoyed it. Please give feedback or ask questions below :)

At this place also a special thanks at Stefan for his suggestion to mention the 2 other ways to get the JSONP.

For further information about getting data with ajax calls I've found this article on nettuts.





Schreibe einen Kommentar

Bitte achte darauf, alle Felder mit einem Stern (*) auszufüllen. HTML-Code ist nicht erlaubt.

team work2