Using AJAX and APIs: XML, RSS & JSON
This assignment consists of creating 3 panels (i.e. fixed size DIVs) on a single page, each of
which can have its content updated (either automatically or in response to user interaction)
without reloading the page.
You must use AJAX techniques to achieve this.
All panels should be a fixed size (height and weight). If the content of the panel exceeds the
fixed size it should scroll within the panel.
Ajax loader images should be shown while loading data .
[ you can generate one here http://www.ajaxload.info/ ]
Panel 1: Twitter Public Timeline / XML & Twitter API
The first panel should contains the Twitter Public time line. This contains the most recent
messages (i.e. Tweets) sent by people whose Twitter feed is public. You should automatically
update this display at regular intervals (via an interval). Twitter provides a REST API to
retrieve this data.
You must display the following data for each Tweet.
• Profile Image
• Name
• Screen name
• Text of Message
• Source (the software used to send the tweet)
Display the data for the tweets that come back from the Twitter API in a fixed size element on
the page The user should be able to scroll downward to the see any data that doesn't fit in
the element.
This data should be automatically refreshed on a regular basis so that it always shows the
most recent Tweets.
You must get the data back from Twitter in their XML format using the appropriate REST
request documented here:
http://apiwiki.twitter.com/REST+API+Documentation#statuses/publictimeline
Panel 2: Twitter Trends / JSON & Twitter API
The Twitter API also provides a method for looking up the most popular search terms used on
the site. These are called trends. This is updated frequently.
You must write a panel that displays these trends. You must also provide a button that will
refresh the list (i.e. retrieve the most recent data from the site and redisplay it).
You must get the data back from Twitter in the JSON format using the appropriate REST
request documented here:
http://apiwiki.twitter.com/Search+API+Documentation#Trends
This data must be converted to a JavaScript object and the HTML generated in JavaScript (not
PHP). The PHP script you need should only retrieve the JSON data and echo it back unaltered.
The data you must display includes:
• The date the trends were generated
• The names of the current trends
• A link to the twitter search page for that trend (You can use the name of the trend for the
link).
All this data (including the data) can be found in the data sent back by the API request.s
Panel 3: RSS Reader
This Panel should contain two buttons. One labelled "Smashing", the other labelled
"Freelance".
Clicking on a button will display the corresponding RSS feed:
http://rss1.smashingmagazine.com/feed/
http://feedproxy.google.com/FreelanceSwitch
The feeds can be retrieved in the RSS format in PHP. You can then create HTML from this data.
You should display:
Name of Feed (the title tag of the channel tag)
Title of each blog post (the title of each item)
Each post title should link to the actual blog post (the link of each item)
Technological Notes
CURL
In order to examine the data that comes back from a URL request you can use the curl
command in the terminal in Mac OS X/Linux machines (it can be installed on Windows)
You can examine the output you get to see the structure of the XML/JSON that you will be
using. You can also use browsers to examine the result of your request by typing the URL in
the address bar.
Twitter
There is a limit of 100 requests per hour (From the same IP address) when using the Twitter
API
The public timeline feed is cached for 60 seconds which means there is no point refreshing the
timeline more than once a minute.
Unicode
Messages on the Twitter timeline use unicode so you will need to direct browser's to use
Unicode when rendering the page rather than Latin-1.
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
JSON
When you retrieve JSON data it is essentially a JavaScript object literal. There is a JavaScript
command that will convert a string into functioning JavaScript: eval();
Therefore, when you retrieve JSON data you can easily convert it into a JavaScript object.
Assume the JSON data is in the variable data. The following will create an object out of it.
obj = eval('('+data+')');
Note the extra brackets placed around the JSON string.
Scope
When creating XMLHTTPRequest objects for each panel you should ensure that you create a
different object for each request (in case two panels are updated simultaneously). To avoid
problems make sure all variables are local to their functions. I.e. declare then with the var
keyword inside the function you create them in.