Home

Blogs

Marriage of AJAX and JSON

February 17, 2008 - 4:03pm — Deepak

I recently started developing a small PHP website to access a web service using AJAX.  Now, the last time I dealt with AJAX I using XML to communicate between client and server.  XML needed to be parsed and that usually meant additional time spent debugging.

I had heard of JSON, so I went over to http://json.org to understand how to implement.  It took me about 30 minutes to understand the syntax and another hour or two to implement.  I implemented a PHP page to access parameters via query string and return a JSON object.  I implemented an HTML page to consuned the JSON output by using prototype and eval function in JavaScript. I am so relieved that I no longer need to generate and parse XML. Whew!!!

The application works great.  Now I have a seen a lot of site that use animation to provide some feedback to the user that an AJAX request is being processed by the server.  I thought perhaps I can find one of those animations and plug it in the top right hand corner of my application.  I came across this great site: http://www.ajaxload.info/.  This site can dynamically generate over a dozen different progress indicator in the background and foreground color of your choice.

Integrating Picasa into your website - Part I

November 24, 2007 - 11:13am — Deepak

Google Picasa is a great place to your store your favorite pictures.  It comes with 1 GB of store and you can download a desktop version of Picasa to easily bulk upload pictures. It is also one of the few photo sharing website that provider API that allow developers to integrate it into other websites.

To integrate Picasa, you can either use client-side language (such as Javascript) or server-side languages (such as PHP).  In this first of two parts article I will discuss a Javascript (JSON) solution.

The Basics

Picasa providers an RSS feed of a user's albums and pictures.  Instead of RSS you can also chose to get a JSON (Javascript Object Notation) version that will allow you to parse the albums without being familiar with XML.

RSS version: http://picasaweb.google.com/data/feed/base/user/<username>?kind=album&alt=rss

JSON version: http://picasaweb.google.com/data/feed/base/user/<username>?kind=album&alt=json&callback=parseAlbums

Code Snipplet

Here's a possible implementation of parseAlbums function:

function parseAlbums(data) {

  var nAlbumsCount = data.feed.entry.length;
  var gItem;
  var strTitle:
  var strDescription;

  for (var i = 0; i < nAlbumsCount; i++) {

     gItem = data.feed.entry[i];
     strTitle = gItem.title.$t;
     strDescription = gItem.media$group.media$description.$t;

  }

}

 
I took this basic code and created a wrapper around it in a JavaScript library.  By defining a few HTML elements and making 3 simple function calls, you can have a functioning integration:


<head><title>Picasa Example></title></head>
<body>

...

<script src="picasa.js"></script>

<script type="text/javascript">
 var objPicasa = new MyGooglePicasa("deepak528");
 objPicasa.init("deepak528", "divAlbums", "divHeaderLeft", "divHeaderCenter", "divHeaderRight");
 objPicasa.setAlbumSuffix(" (optics)");
 objPicasa.write_json_code();
</script>

</body>

</html>

Attachments

picasa.js - defines "MyGooglePicasa" object
picasa.cs - some style information
picasa.html -  A sample webpage

 

Syndicate content