JQuery and Ajax
View a raw JSON feed

Using JQuery, you can make "Asynchronous JavaScript and XML" (aka AJAX) calls to websites, retrieve data from those sites and insert this data into your own web pages. All of this can be done without the web page having to reload.

One of the main data formats that can be exchanged via AJAX is one called JavaScript Object Notation (or JSON).

This exercise uses an ajax call called $.getJSON to retrieve JSON data from the Google Feed API for RSS feeds. The format of the call is $.getJSON(<url>, <callback function when data is retrieved>).


Add the following URL into the $.getJSON call and view the raw JSON output that is returned (you can right-click it to copy it):

You also need to add the following text to the end of this URL string:

The reason this is also needed is for what is called Cross Origin Resource Sharing (or CORS). Most sites do not allow ajax calls to retrieve JSON from sites directly. Instead they need a callback function.

Stuck? Get a hint! Hint

Place the URL instead of the <insert URL here> placeholder in script.js. Then add &callback=? to the end of the URL string.

What you should see is the JSON feed returned as text, with the last 5 tweets from @twitter. This JSON feed is coming from the Twitter API.

View Preview

Sign in