I’m a big book junkie who buys and reads books non-stop. If I get particularly excited with a most recent reading, I post a review. Since Amazon offers web services for public consumption, I wanted to present information about books I recommend right there, upon hovering over a link to Amazon. I wanted to be able to display the current price of the book, its publication date, number of pages, author, binding (paperback or hardcover), and so forth. The result of this undertaking is BookTip, which is a tool tip on steroids with a snapshot obtained via Amazon web services. If you’re reading this in an aggregator that blocks JavaScript, you might want to actually come to the site.
Unfortunately, Amazon doesn’t offer web services with responses in JSON notation (unlike Yahoo!). If they did, I could write a JavaScript library to read straight from Amazon. Distributing this code to include on other sites would’ve been easy. This is possible because JSON allows you to read from other domains, and it requires no proxy.
On the other hand, out-of-band calls, aka “Ajax”, are confined to the same domain where your code runs. Now, that forces you to develop a local “proxy” to talk to a web service and return a meaningful response to the client (browser). The diagram below illustrates the point.
Writing a proxy is not exactly a walk in the park. For the record: this was my first experience with Amazon web services, and it wasn’t a pleasant one. What irritates me is unpredictability of their response XML. For example, if a book is not sold by Amazon, but only by third parties, a chunk of XML related to pricing simply disappears. Or, if the book has no picture, another sizeable chunk vanishes.
It gets even more fun: if the product in question is not a book, but, say, a digital camera, the response is way different! Considering that you place the request in the exact same way in both cases, it calls for some funky checking of what exactly came back. Very bizarre and perplexing.
Throwing Protype In the Mix
For BookTip I’m using Prototype for all the Ajax functionality. Sam has rolled Ajax-supporting code so nicely, that it’s a shame to monkey around with this yourself.
BookTip fades in at the left edge of a hyperlink. I was doing x and y calculations by hand at first, but noticed Prototype had handy methods for that, so eventually I over to Prototype to handle position calculations as well. Feel free to poke around source code to see how everything works.
More Challenges to Solve
I’ve tested BookTip in IE 6, Safari and Mozilla. I don’t have IE 5.x at the moment, so please let me know if anything looks odd. Retarded Opera is resisting too, so I’ll tackle it later.
It gets pretty challenging to calculate link coordinates when it’s right-floated or left-padded. That’s the next thing I need to figure out how to accommodate.
If anyone is interested, I can make all source code available. That’ll include JavaScript and a single-page Amazon proxy in C#. Note: you will need to include the proxy in your project and have it compiled. I know… Blame Amazon.
Conclusion
The main reason for this side-project was to test the waters. I have a better understanding of constraints of out-of-band calls and the relative freedom JSON affords. Today it’s BookTip. Tomorrow it can be a “smart”, targeted ad, or a mini aggregator, or what have you. Hey, a little DOM scripting goes a long way.
