Before starting with the real article I want to mention two things:

1. Actually I wanted to do a Google Gears roundup as my first non mind42 javascript article. But actually I’m still not finished with playing around with the possibilities myself. Article will have to wait
2. I’m really unsure about the knowledge level I assume. Personally I would like to target a pretty high javascript knowledge level. But as I’m unsure this article will be something like a tryout and therefore the assumed level will fluctuate a bit (medium to high level knowledge).

---

You may have heard about Yahoo Pipes previously. It’s a real neat service from Yahoo which enables everybody to play around with RSS feeds and create mashups. Here’s what they say:

“Pipes is an interactive data aggregator and manipulator that lets you mashup your favorite online data sources.”

So with Yahoo Pipes you can take any RSS data source you wish (or some specified special data sources like Flickr, Google Base, Yahoo Search), apply filters, sorts, joins, regular expressions, translations and many more operations on the data, and finally retrieve the results as HTML page, RSS feed or !!JSON!!

So why is this interesting for me? Well, beside of the fact that they have realized the pipe building process with a nifty graphical editor, it’s the fact that you can retrieve the results as JSON! So lets start a short excursion:

As you may know, current browsers implement a “same origin” security policy for javascript. RSS feeds are generally XML documents, which means that they could be represented and parsed using regular javascript DOM techniques. But the “same origin” policy makes it impossible to do this with RSS feeds from different URLs. Neither you can get the data using an XMLHTTP request, nor you can access the RSS-DOM within an iframe you could use to load the feed. From this point of view your only choice seems to be implementing a server part, which plays proxy for your data retrieval.

The solution? Script tags and JSON! As the same origin policy doesn’t apply to script tags it’s possible to dynamically create such elements, point it’s source to a JSON API URL and add it to the DOM. Using the onload event handler you even know when loading has finished. As JSON is a javascript compatible syntax which can be eval’d, any data can be transfered like this using script tags. The last problem to solve is how to access this transfered data? Two possible solutions: 1. The delivered script puts the data into a global object documented in the API (like the del.icio.us APIs). 2. The delivered API URL allows to specify a callback function. The generated script which will be transfered will then call the specified function with the data as parameter (as some other Yahoo APIs do).

So much for theory - back to Yahoo Pipes and the RSS problem.

What’s the conclusion: RSS feeds from external sources can’t be used, JSON can. Yahoo Pipes offer RSS as input format, and JSON as output format! See it? Instead of writing your own external data proxy server to satisfy the same origin policy you can use Yahoo Pipes as your proxy server/RSS-JSON converter. And in my eyes this is a really cool feature to create mashups on the client :). Tip: The Yahoo Pipes callback paramter is called “_callback” instead of “callback” as in other Yahoo APIs.

I know that this technique is no secret and has be covered elsewhere previously, but I hope that it was interesting and or useful for some of you. Finally I would like to point you to a really interesting Google Tech Talk about Yahoo Pipes held by Pasha Sadri and Jonathan Trevor.