Home » Cool & Future Tech, Things I've Made, Uncategorized, Web Experiments

New Feature: Amazon Zuggest!

2 March 2005 51 Comments

UPDATE: Since originally posting, the site’s been getting a lot more traffic than usual so I’ve made some improvements to Zuggest.

I incorporated some zuggestions (groan) which folks emailed so the overall UI is a little nicer. I’m definitely HTML impaired. I’ve also improved caching on my server so Amazon doesn’t get such a big whack. Still tweaking things but have definitely learned a lot over the last few days.

-=====================-

UPDATE: Jeff Barr of Amazon has posted a link to Zuggest on the Amazon Web Services Blog. Thanks Jeff!

I’ve also upgraded to the latest Amazon web service WSDL. Tonnes more information available such as list, new and used prices, even inventory levels on used items! Great stuff.

-=====================-

You’ve got to make life interesting and I just couldn’t resist! After hearing all the buzz about XMLHttp (eh, it’s been out for 2 years already) I figured I’d take a look at it. This is my take on “Google Suggest” only with Amazon so I’ve called it “Amazon Zuggest” – TAKE A LOOK AT IT HERE.

This is a technology experiment in creation of Rich Internet User Interfaces using asynchronous communication from a browser to the server to gather data while the user’s doing something else.

While you type, the page gets results without a page refresh and without having to hit “submit” all the time.

HOW IT WORKS The technology involved is Javascript, Web Services, SOAP, XMLHttp, XML, C# and ASP.NET.
The Javascript runs in the browser and fires once you’re done typing. It looks for something to search on. If it finds something, it shoots a request using XMLHttp to my webserver.

The webserver constructs a SOAP request and sends it to the Amazon Web Services server (AWS ECM 4.0). Amazon sends back a SOAP response to my server, this response is then parsed into HTML. I think this is where Zuggest differs from Google Maps.

I think Maps is sending back XML to the browser and that gets XSLT’d into HTML on the browser. I do that part on the web server and stream HTML to the browser.

Lastly, I cache all the results on my side and check the cache before I query anything. I also cache the results on the browser side, so if you’ve searched for something you can just mouseover the history to bring it straight back, instantly. All in the blink of an eye.

So you might say well why not just issue the Web Service request or a REST request directly from the browser to the AWS server, eliminating the extra hop through my server. The main reason for this convoluted Web Service approach through my server is the security constraints around the client-side javascript blending content from other sources.

You can’t issue XMLHttp requests from the browser back to a domain other than the one the original page was served from. Otherwise this would be REALLY fast, as in Google Suggest. Google Maps works the same way.

I’ve tested it in Firefox and IE6 without too many problems. Again, this is an experiment so it’s a little rough around the edges. It would be a little nicer if I wasn’t restricted to 1 request every second max to Amazon.

UPDATES:
Question from Jonathan Sambrook:
Does the Amazon API allow you to use amazon.co.uk ? Answer: Yes. There are WSDLs available for the US, UK, DE, JP, FR and CA Locales although Zuggest only searches the US right now.

Question from Roshawn Dawson: You said that you are using Soap. Are you using a code-behind file? Answer: Yes. The XMLHttpRequest is sent to my ASP.NET page from the browser. The code-behind constructs the SOAP message, etc. etc.

What do you think? Would love to hear your thoughts or happy to link to other experiments like this.

51 Comments »

  • Ted (author) said:

    This thing is nice. Howd you figure it out?

  • Arn Lieberman said:

    Cant you make it faster?

  • Steve said:

    I Love it! Is the source available? Or could you point me into the right direction?

    Steve

  • Francis (author) said:

    Sorry, no source code just yet. I want to work out the kinks. Its only been 72 hours since I wrote this thing and already my sites getting hammered.

    Look for some subtle improvements over the next few days, better caching, better HTML and hopefully better performance.

  • MikeD said:

    Two suggestions – make the image display use fixed width tables, only search on whole word changes since the results arent going to change much per-letter.

  • Francis (author) said:

    Its because Im searching the entire catalog. If you said CJ Cherryh and I was just searching books, youd probably get a better result.

  • Christopher Allen said:

    Very interesting. Im sure it is not your fault, buy why the high percentage of weird retrievals? For instance, entering in the relatively unique author name CJ Cherryh results in a couple of her books, but also things like a wood tool case and movies like the Village. Is that the quality of the info from Amazon?

  • gareth jax (author) said:

    Id second the “weird results” thing :)
    I tried with “ireland” and its really weird.
    Only the 6th o 7th result is ireland-related :)
    I think that you could gain money by simply becoming affiliate of Amazon. For every purchase made by zuggest youd gain a %.

  • Hasan Diwan said:

    Works with Apple WebKit (OmniWeb, Safari, etc.)

  • dlenox said:

    does the servlet need to send back a specific content type? any more info on servlet side would be appreciated

  • FS (author) said:

    Ive updated the description above, tried to be a little more descriptive this time.

  • Roshawn Dawson said:

    Man, this is awesome, especially considering the fact that you are using AWS as the example.
    Can you point me to some of your resources, or, better yet, make available the source code? Freakin cool!

  • rDawson said:

    Props for the updated description. However, you said that you are using Soap. Are you using a code-behind file? If so, how do you use it with the Javascript functions? This baffles me!!!

  • Jonathan Sambrook (author) said:

    Does the Amazon API allow you to use amazon.co.uk (or the other CCds) instead of .com?

    BTW, this is v.nice :)

  • Roshawn said:

    This might sound like a lame question, but how do you place the results of the Soap call into the xmlHttpRequest object? Or am I right in guessing that the results are automatically inserted in the object?

  • Roshawn said:

    When looking at the zuggest2.js file, the doHTTP function creates a new url. Is this url an actual page on your server? If not, then how can you pass it to your server and read it from server-side code?

  • Roshawn said:

    Got it! Took me long enough, but Ive got it. However, theres a problem if searching for, say, A+. No data is returned. Wonder why that is. Anyway thanks for the inspiration!

  • Mike (author) said:

    great site. question: how do you make sure that youre not querying amazon more than 1 time each second? if multiple users access your site at the same time do add their requests to a temporary list of requests to be made with one-second intervals?

  • Dick Marcum said:

    You have developed an amazing web app! I suspect it is subject to the same limitations of any website that employs Javascript, namely if the user has javascript turned off it doesnt work. Also it works on some browsers but not all. In case you are interested, I tried it on several browsers with the following results:

    OS: Mac OS 10.2.8
    Works on:
    Firefox 1.0
    Mozilla 1.7.2

    Doesnt work on:
    Safari 1.0.3
    Internet Explorer 5.2
    Opera 6.0

    Windows XP Pro
    Works on:
    Firefox 1.0.3
    Mozilla 1.7.5
    Internet Explorer 6.0
    Doesnt work on:
    Opera 7.54
    Great work!

  • Jonas (author) said:

    Works with opera 8

  • Phani said:

    super

  • Larry (author) said:

    Fabulous example of how open APIs and loosely coupled systems can make amazing things possible. If more enterprise IT systems were built with SOAP, RSS, and other open http-based APIs, enterprise systems integration would look very different than it typically does now. <a href=”http://www.emediacommunications.biz/blog/archives/000072.html”>[noted in my blog]</a><p>
    Great job on Zuggest!

  • kanthi (author) said:

    Really great

  • FR said:

    how do search books on “C++” The C++ keyword doesnt work.

  • Iain Cheyne said:

    I am British, so I cant use it for now, but it looks great.

  • skonealone said:

    its fantastic job and its greate to see such good ajax example and this is a very good apporch to ajax .. good keep itup dude
    one more request dude if u can write some tutorial or docs with some example…? it would be helpful to other programmer..
    regards
    -skonealone

  • Kassim said:

    An excellent and applicable use of AJAX. Great work.

  • mistergin said:

    Great approach! There seems to be a few select *on the fringe* sites out there using Ajax and doing it extremely well, I havent seen this done before!

  • Emmanuel Prat said:

    Great example of use of AJAX with Web Services. I am going to write a post about it in my French blog. Thanks.

  • Rick said:

    I dont understand it, but this always seems to find the book Im looking for instantly… way better than Amazons native search.

  • Irfan Sayed said:

    Really Great.. Good combination of ajax and web service..
    but why did u choose ASP.NET. any specific reason?
    Ill be trying this with PHP.

  • Filip Rachunek said:

    Hi Francis and thanks for the inspiration :-) Ive just developed my own AJAX implementation of Amazon Web Services, feel free to check it out.

    Best regards.
    Filip

    http://BrainKing.com

  • Filip Rachunek (author) said:

    I forgot to add, my server side piece of code is written in Java.

  • Suraj jain said:

    Here is the code to display entries from database as Google Suggest . It is an combination of ASP + JS . works with acces database . Download the full source code and see example at

    http://www.guwahatiwebhosting.com/ajax/dynamiclist/index.asp

  • Jonathan Moore (author) said:

    Wow, this is great. So much better than anything on Amazons own site.

  • satya said:

    HI its working simply superb
    can i some code snippets of this program
    thanks in advance
    regards
    satya

  • Francis (author) said:

    Hi Satya, Im afraid I cannot email the code but I am currently writing a book on Amazon Mashups which you can find on Amazon.com. The book will explain Zuggest and other projects in detail along with plenty of sample code to build your own mashups. Search Amazon for Francis Shanahan to find the book. Regards,
    -fs

  • Shoam Boinus (author) said:

    Francis done a really great work, but I just wonder whether is it possible to retreive data from other web site also, like http://www.walmart.com, http://www.shopping.com etc.

  • Ed said:

    I like this zuggest service for sure. But. I got some headache about the page reload that occur if I press ENTER in the search box. Then I’m back to the original “zeppelin” search again and my search key is gone.. Well, maybe something about my firefox but I thought it was worth mentioning.. Eat that code now! =)

  • Walter (author) said:

    This is awesome, I haven’t seen anything like this on the web. Nice.

  • listín (author) said:

    Really cool Francis, guess I’ll have to wait for a Spanish version of Amazon.
    Cheers.

  • Andrey said:

    An excellent and applicable use of AJAX. Great work.

  • natcur (author) said:

    I like this cool stuff with amazon zuggest

  • Piadas (author) said:

    Very Cool !!

  • Mark said:

    Amazing application, great work indeed..

  • Gareth said:

    Hi
    I am trying to produce the same effect with products and categories from my local server, I’d love to see your request functions when you are typing in, I think I’ve got the sending to page request working where it returns the values syncronously but if this is open source and you wouldn’t mind, I’d love to see it.

    Thanks
    Gareth

  • Shanahan (author) said:

    Gareth; If you install an sniffer like Fiddler (free) you’ll see the exact request I’m making back to Amazon. I use a proxy on my own server for speed. I recommend my book (of course I do) if you have further questions.

  • Paul said:

    Good work, ive used bits and pieces of this for a little idea of mine..

  • fedmich said:

    Cool :), it seems to be a bit slow. I bet this can be faster…

  • Jose Da Luz said:

    Great application Francis. Congratulations. I think you have very creative applications. I will discuss later with you the possibility of using this schema for trade information applications. Do you Twitt?

    Thanks. Success. Best regards.

  • pharmnet said:

    I get a 404 error

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.