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 的照片

Questions

What is the advantages of using JavaScript to access Web Service when compared to using PHP or Java?
What is the big drawback of using JavaScript to access Web Service when compared to using PHP or Java?

Submission

Please submit your work to Steven by email.
Email: sochoy@ouhk.edu.hk
Email title: NP Tutorial 16 Submission -SXXXXXXX