Fun with Ajax and Flickr

Ever notice how sometimes a web page reloads and sometimes it doesn't after searching, submitting or other web-type functions?  The pages that don't reload and have more of the desktop application feel, use a technology called AJAX.  It stands for Asnychonous Javascript and XML, and it makes the Internet a much better place.

Today we are going to use AJAX to display some images from Flickr search.  Flickr provides a great API (Application Programming Interface) to access it's pictures and meta data about them.  We are going to use JQuery, and this URL to do most of the work:  http://api.flickr.com/services/feeds/photos_public.gne?tagmode=any&format=json&tags=mountains.

Before we get started, we need to talk briefly about cross site scripting attacks.  What ???  Who cares about those, we just want to display some images from Flickr.  Well, unfortunately, since hackers find it easy to launch these types of attacks against javascript, we have to jump through a few more hoops if we are going to make an AJAX request from the client side (from Javascript, rather than PHP, C#, etc..).  It turns out this type of request is a bit easier if you are doing it from the server side, but we can still get the results we want.

Here is the plunk from class this evening.  We will be expanding upon it in our remaining classes.