The Art & Science Of JavaScript72
Finally, we need to call our init method when the document has finished loading. We do this by
applying an onload handler to the window object using addEvent:
deliciousbadge.js (excerpt)
/* initiate when the window has finished loading */
deliciousbadge.addEvent(window, 'load', deliciousbadge.init, false);
And thats all there is to it! Because weve used unobtrusive JavaScript techniques, you can add
this script to your document simply by including at the top of your page a script element that
points to it. Just add a link to your own bookmarks that has the correct id, and the script
will do the rest! You can then make use of the ids to style the final result to your liking.
Calling for Server Backup
While the script weve just walked through creates a nifty little badge that will make your personal
site the envy of all your friends, there are occasions when you may want to implement a server-side
component that acts as a backup, should the client-side script fail. There are several reasons why
this can be a good idea:
Some APIs have rate limits, which dictate how many times per day you can call them. With a
server-side control you could store a cached copy of the external sites data on your server and
only update it every few hours. This type of rate limiting usually only applies to APIs that require
a developer key.
If youre dealing with a flaky API, you could store a copy of the data on your server each time
you query the third-party server. This cache can then be used as a backupthe data may not be
the most up to date, but at least you can be sure that your badge wont break.
You can use a server-side component to pare the amount of data you retrieve down to the absolute
minimum, or to convert any data thats not in an easily manageable format into something more
digestible (like JSON).

Get The Art & Science of JavaScript now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.