Network Programming Wikiclass | Tutorial / Access Web Services via JavaScsript

Overview: We can access RESTful Web Services via JavaScript. This tutorial gives you some exercises to experiment with Flickr API and Panoramio API.

Activity One: Access Flickr API via JavaScript

Test the following JavaScript with your Flickr API key.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Access Flickr API via JavaScript</title>

<style type="text/css" media="screen">

body {text-align:center; font-family:Georgia, "Times New Roman", Times, serif;}

img {margin:10px;border:2px solid #555;}

.imageDisplay {margin:auto;width:500px;}

.imageDisplay a {text-decoration:none;}

</style>

</head>

<body>

<script>

function jsonFlickrApi(rsp) { 

  window.rsp = rsp; var s = "";

  // http://farm{id}.static.flickr.com/{server-id}/{id}_{secret}_[mstb].jpg

  // http://www.flickr.com/photos/{user-id}/{photo-id}

  s = "<h1>Total number is: " + rsp.photos.photo.length + "<h1/>";

  s += '<div class="imageDisplay">';

  for (var i=0; i < rsp.photos.photo.length; i++) {

    photo = rsp.photos.photo[i];

    t_url = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server 

    + "/" + photo.id + "_" + photo.secret + "_" + "s.jpg";

    p_url = "http://www.flickr.com/photos/" + photo.owner + "/" + photo.id;

    s +=  '<a href="' + p_url + '">' + '<img alt="'+ photo.title + '"src="' + t_url + '"/>' + '</a>';

  }

  s += '</div>'

  document.writeln(s);

}

</script>

<script src="http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=xxx&tags=causeway+bay&per_page=20&format=json">

</script>

</body>

</html>

[Get Code]

Activity Two

Write a JavaScript that can access Panoramio API to get photos.
Reference: Panoramio API — 在您的網站上顯示來自 Panoramio 的照片
Hint: The API also available as JSONP. Add an extra callback=your_function_name to the GET, and you will get:

     your_function_name({ "count": 773840, "photos": [...] })

Submission

Please submit your work to Steven by email: sochoy@ouhk.edu.hk.
Please use SXXXXXXX - NP Tutorial 17 Submission as the email subject.