Amazon offer access to their database via webservice and this is a great opportunity to explore the different AJAX features that we can implement with it. So as you may understand by Day 1, this week I’ll try to focus on the different aspect of using AWS with AJAX using nusoap and prototype. Amazon gives the possibility to retrieve data via REST and SOAP so you can choose the one you want, but I choosed SOAP for the simple reason that I find it very easy to manage with nusoap.
In this first tutorial I choosed a very common usage of AWS which is the Live search. The idea is interesting to implement in your website for example to offer visitors the possibility to search for books, in addition that live search don’t take too much place more than the inputbox and a title to explain what is it for.
So to get started you have to create an amazon associates account if you don’t have one, then create a web service account. After registring, you’ll have an Access Key ID which we’ll need to request the web services.
Then download nusoap and prototype.
Now we can start writing our server-side code, which will make remote queries and retrieve answers. As you can see in the screenshot I just displayed the book title, the author(s), ISBN, publisher, price and a picture. The PHP script is listed below :
<font color="#000000">
<font color="#0000BB"><?php<br /><br /></font><font color="#FF8000">/**<br />* AWS 4.0 with AJAX demos using nusoap and prototype<br />*<br />* Author Hatem Ben Yacoub <hatem@php.net><br />* http://ajax.phpmagazine.net/<br />*/<br /><br />// include nusoap classes<br /><br /></font><font color="#007700">require_once(</font><font color="#DD0000">"lib/nusoap.php"</font><font color="#007700">);<br />require_once(</font><font color="#DD0000">"lib/class.wsdlcache.php"</font><font color="#007700">);<br /><br /></font><font color="#FF8000">//------------------------------------------------//<br />//<br />// Enter your AWS subscription key here<br />//<br />//------------------------------------------------//<br /><br /></font><font color="#0000BB">$SubscriptionId </font><font color="#007700">= </font><font color="#DD0000">''</font><font color="#007700">;<br /><br /></font><font color="#FF8000">//------------------------------------------------//<br /><br /></font><font color="#0000BB">$AmazonUS </font><font color="#007700">= </font><font color="#DD0000">'http://webservices.amazon.com/AWSECommerceService/AWSECommerceService.wsdl'</font><font color="#007700">;<br /><br />function </font><font color="#0000BB">GetItemSearchParams</font><font color="#007700">(</font><font color="#0000BB">$Keywords</font><font color="#007700">) {<br /> global </font><font color="#0000BB">$SubscriptionId</font><font color="#007700">;<br /><br /> </font><font color="#0000BB">$request </font><font color="#007700">= array(<br /> </font><font color="#DD0000">"Keywords" </font><font color="#007700">=> </font><font color="#0000BB">$Keywords</font><font color="#007700">,</font><font color="#FF8000">//"AJAX",<br /> </font><font color="#DD0000">"SearchIndex" </font><font color="#007700">=> </font><font color="#DD0000">"Books"</font><font color="#007700">,<br /> </font><font color="#DD0000">"ResponseGroup" </font><font color="#007700">=> </font><font color="#DD0000">"Medium"<br /> </font><font color="#007700">);<br /><br /> </font><font color="#0000BB">$itemSearch </font><font color="#007700">= array(<br /> </font><font color="#DD0000">'SubscriptionId' </font><font color="#007700">=> </font><font color="#0000BB">$SubscriptionId</font><font color="#007700">,<br /> </font><font color="#DD0000">'AssociateTag' </font><font color="#007700">=> </font><font color="#DD0000">'phpmagazine-20'</font><font color="#007700">,<br /> </font><font color="#DD0000">'Request' </font><font color="#007700">=> </font><font color="#0000BB">$request<br /> </font><font color="#007700">);<br /><br /> return </font><font color="#0000BB">$itemSearch</font><font color="#007700">;<br />}<br /><br /><br /></font><font color="#FF8000">// Setting the WSDL<br /></font><font color="#0000BB">$wsdlurl </font><font color="#007700">= </font><font color="#0000BB">$AmazonUS</font><font color="#007700">;<br /><br /></font><font color="#FF8000">// Try getting data from cache<br /></font><font color="#0000BB">$cache </font><font color="#007700">= new </font><font color="#0000BB">wsdlcache</font><font color="#007700">(</font><font color="#DD0000">'cache'</font><font color="#007700">, </font><font color="#0000BB">120</font><font color="#007700">);<br /></font><font color="#0000BB">$wsdl </font><font color="#007700">= </font><font color="#0000BB">$cache</font><font color="#007700">-></font><font color="#0000BB">get</font><font color="#007700">(</font><font color="#0000BB">$wsdlurl</font><font color="#007700">);<br />if (</font><font color="#0000BB">is_null</font><font color="#007700">(</font><font color="#0000BB">$wsdl</font><font color="#007700">)) {<br /> </font><font color="#0000BB">$wsdl </font><font color="#007700">= new </font><font color="#0000BB">wsdl</font><font color="#007700">(</font><font color="#0000BB">$wsdlurl</font><font color="#007700">);<br /> </font><font color="#0000BB">$cache</font><font color="#007700">-></font><font color="#0000BB">put</font><font color="#007700">(</font><font color="#0000BB">$wsdl</font><font color="#007700">);<br />} else {<br /> </font><font color="#0000BB">$wsdl</font><font color="#007700">-></font><font color="#0000BB">debug_str </font><font color="#007700">= </font><font color="#DD0000">''</font><font color="#007700">;<br /> </font><font color="#0000BB">$wsdl</font><font color="#007700">-></font><font color="#0000BB">debug</font><font color="#007700">(</font><font color="#DD0000">'Retrieved from cache'</font><font color="#007700">);<br />}<br /><br /></font><font color="#0000BB">$client </font><font color="#007700">= new </font><font color="#0000BB">soapclient</font><font color="#007700">(</font><font color="#0000BB">$wsdl</font><font color="#007700">,</font><font color="#0000BB">true</font><font color="#007700">);<br /></font><font color="#0000BB">$client</font><font color="#007700">-></font><font color="#0000BB">soap_defencoding </font><font color="#007700">= </font><font color="#DD0000">'UTF-8'</font><font color="#007700">;<br /><br /><br /></font><font color="#0000BB">$result </font><font color="#007700">= </font><font color="#0000BB">$client</font><font color="#007700">-></font><font color="#0000BB">call</font><font color="#007700">(</font><font color="#DD0000">'ItemSearch'</font><font color="#007700">, array(</font><font color="#DD0000">'body' </font><font color="#007700">=> </font><font color="#0000BB">GetItemSearchParams</font><font color="#007700">(</font><font color="#0000BB">$_GET</font><font color="#007700">[</font><font color="#DD0000">'Keywords'</font><font color="#007700">])));<br /><br />if (</font><font color="#0000BB">is_Array</font><font color="#007700">(</font><font color="#0000BB">$result</font><font color="#007700">[</font><font color="#DD0000">'Items'</font><font color="#007700">][</font><font color="#DD0000">'Item'</font><font color="#007700">])) {<br /><br /> </font><font color="#0000BB">$display </font><font color="#007700">= </font><font color="#DD0000">''</font><font color="#007700">;<br /> foreach(</font><font color="#0000BB">$result</font><font color="#007700">[</font><font color="#DD0000">'Items'</font><font color="#007700">][</font><font color="#DD0000">'Item'</font><font color="#007700">] as </font><font color="#0000BB">$item</font><font color="#007700">) {<br /> <br /> </font><font color="#0000BB">$author </font><font color="#007700">= (</font><font color="#0000BB">is_array</font><font color="#007700">(</font><font color="#0000BB">$item</font><font color="#007700">[</font><font color="#DD0000">'ItemAttributes'</font><font color="#007700">][</font><font color="#DD0000">'Author'</font><font color="#007700">]))?@</font><font color="#0000BB">implode</font><font color="#007700">(</font><font color="#DD0000">', '</font><font color="#007700">,</font><font color="#0000BB">$item</font><font color="#007700">[</font><font color="#DD0000">'ItemAttributes'</font><font color="#007700">][</font><font color="#DD0000">'Author'</font><font color="#007700">]):</font><font color="#0000BB">$item</font><font color="#007700">[</font><font color="#DD0000">'ItemAttributes'</font><font color="#007700">][</font><font color="#DD0000">'Author'</font><font color="#007700">];<br /> <br /> </font><font color="#0000BB">$display </font><font color="#007700">.= </font><font color="#DD0000">"<div class=item><br /> <h2>&l
t;a href=\""</font><font color="#007700">.</font><font color="#0000BB">$item</font><font color="#007700">[</font><font color="#DD0000">'DetailPageURL'</font><font color="#007700">].</font><font color="#DD0000">"\">"</font><font color="#007700">.</font><font color="#0000BB">$item</font><font color="#007700">[</font><font color="#DD0000">'ItemAttributes'</font><font color="#007700">][</font><font color="#DD0000">'Title'</font><font color="#007700">].</font><font color="#DD0000">"</a></h2><br /> <a href=\""</font><font color="#007700">.</font><font color="#0000BB">$item</font><font color="#007700">[</font><font color="#DD0000">'DetailPageURL'</font><font color="#007700">].</font><font color="#DD0000">"\"><img src=\""</font><font color="#007700">.</font><font color="#0000BB">$item</font><font color="#007700">[</font><font color="#DD0000">'SmallImage'</font><font color="#007700">][</font><font color="#DD0000">'URL'</font><font color="#007700">].</font><font color="#DD0000">"\" width=\""</font><font color="#007700">.</font><font color="#0000BB">$item</font><font color="#007700">[</font><font color="#DD0000">'SmallImage'</font><font color="#007700">][</font><font color="#DD0000">'Width'</font><font color="#007700">][</font><font color="#DD0000">'!'</font><font color="#007700">].</font><font color="#DD0000">"\" height=\""</font><font color="#007700">.</font><font color="#0000BB">$item</font><font color="#007700">[</font><font color="#DD0000">'SmallImage'</font><font color="#007700">][</font><font color="#DD0000">'Height'</font><font color="#007700">][</font><font color="#DD0000">'!'</font><font color="#007700">].</font><font color="#DD0000">"\" align=\"right\" border=0></a><br /> <ul><br /> <li><strong>ISBN :</strong> "</font><font color="#007700">.</font><font color="#0000BB">$item</font><font color="#007700">[</font><font color="#DD0000">'ItemAttributes'</font><font color="#007700">][</font><font color="#DD0000">'ISBN'</font><font color="#007700">].</font><font color="#DD0000">" </li><br /> <li><strong>Author(s) :</strong> "</font><font color="#007700">.</font><font color="#0000BB">$author</font><font color="#007700">.</font><font color="#DD0000">"</li><br /> <li><strong>Publisher :</strong> "</font><font color="#007700">.</font><font color="#0000BB">$item</font><font color="#007700">[</font><font color="#DD0000">'ItemAttributes'</font><font color="#007700">][</font><font color="#DD0000">'Publisher'</font><font color="#007700">].</font><font color="#DD0000">"</li><br /> <li><strong>Price: </strong> <font color=red style='text-decoration: line-through;'>"</font><font color="#007700">.</font><font color="#0000BB">$item</font><font color="#007700">[</font><font color="#DD0000">'ItemAttributes'</font><font color="#007700">][</font><font color="#DD0000">'ListPrice'</font><font color="#007700">][</font><font color="#DD0000">'FormattedPrice'</font><font color="#007700">].</font><font color="#DD0000">"</stroke></font> <font size=+2>"</font><font color="#007700">.</font><font color="#0000BB">$item</font><font color="#007700">[</font><font color="#DD0000">'OfferSummary'</font><font color="#007700">][</font><font color="#DD0000">'LowestNewPrice'</font><font color="#007700">][</font><font color="#DD0000">'FormattedPrice'</font><font color="#007700">].</font><font color="#DD0000">"</font></li><br /> </ul><br /> </div><br/>\n"</font><font color="#007700">;<br /> <br /> }<br /> <br />} else {<br /><br /> </font><font color="#0000BB">$display </font><font color="#007700">= </font><font color="#DD0000">"<div class=item><font color=red>No result available for <strong>"</font><font color="#007700">.</font><font color="#0000BB">$_GET</font><font color="#007700">[</font><font color="#DD0000">'Keywords'</font><font color="#007700">].</font><font color="#DD0000">"</strong></font></div>"</font><font color="#007700">;<br /> <br />}<br /><br />echo </font><font color="#0000BB">$display</font><font color="#007700">;<br />exit;<br /><br /><br /><br /></font><font color="#0000BB">?></font>
</font>The script will simply get the keywords from GET method so we can request dynamicly from javascript. The Javascript will observe the inputbox with the id Keywords, and for every event KeyUp it trigger an AJAX request to retrieve data from the previous script.
<font color="#000000">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br /><head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><br /> <title>AJAX Amazon demo - Live Book search</title><br /> <script type="text/javascript" src="prototype.js"></script><br /> <script type="text/javascript" src="effect.js"></script><br /> <link href="style.css" rel="stylesheet" type="text/css" /><br /> <br /></head> <br /><body><br /><script><br /> Event.observe(window, 'load', init, false);<br /> <br /> function init(){<br /> Event.observe('Keywords', 'keyup', livesearch , false);<br /> }<br /><br /> function livesearch(){<br /> var url = 'proxy.php';<br /> var pars = 'Keywords='+escape($F('Keywords'));<br /> var target = 'result';<br /> <br /> var myAjax = new Ajax.Updater(<br /> target, <br /> url, <br /> {<br /> method: 'get', <br /> parameters: pars,<br /> onComplete:function(request){Element.hide('search_spinner')},<br /> onLoading:function(request){Element.show('search_spinner')},<br /> onFailure: reportError<br /> });<br /> }<br /><br /> function reportError(request)<br /> {<br /> alert('Sorry. There was an error.');<br /> }<br /></script><br /> <form method="get" action="proxy.php" id="greeting-form"><br /> <div class="item"><br /> <label for="Keywords">Search amazon books :</label><br /> <input id="Keywords" type="text" size="64" /><br /> <img alt="Spinner" id="search_spinner" src="spinner.gif" style="display:none;" /><br /> </div><br /> </form><br /><br/><br /><div id="result"></div><br /><br /></body><br /></html></font>
There is two ways to make AJAX request with prototype using Ajax.Request and then setting the onComplete: showResponse event fonction with the showResponse() the function that prototype will run after completing request data from server. And depending if you want to use the result as xml to parse it with Javascript or display it directly in the page you can use responseXML or responseText :
function showResponse(originalRequest)
{
// get the response as text
var result = originalRequest.responseText;
// get the response as xml
//var resultxml = originalRequest.responseXML;
}
Now the script is done you can see it working online. You can play with the script and display for examples title of the book, link and the current price only see demo 2. This will be also an excellent alternative for people looking to monetize their website, by offering more dynamic ways to find products more easily.
Conclusion
This script is maybe the most simple and classic thing we can do with AWS, i wanted to began with it to introduce using AJAX with Amazon Web Services. We’ll see more demos later, so if you have questions or suggestions you can drop me a message.
Update : Download code of this demo
18 Comments on "Explore Amazon Web Services with AJAX – LiveSearch – Day 1"
hmmm
.
hitting return in the text field drops a error message
Is a simple missing event for enter
Amazon+Ajax
Part One of an informative tutorial on using PHP + Prototype + nusoap + Amazon Web ServicesAJAX Magazine: Explore Amazon Web Services with AJAX – Day 1Technorati Tags: ajax, javascript, aws, amazon, prototype, nusoap
Very interesting article but It’s not good with sources overflow. Maybe It’s possible to reformat source code?
Articles are updated, you can download the demo source code now.
Hi there. Nice little tutorial but there is one thing that is bothering me.. In the T&C of amazon it says that you may not query their service more then once in a second. You have no delay set up in favor to that rule. Would not a “fast typer” literally spam the amazon services? Any ideas for a workaround? I know this example is ment basic but not flooding amazon api with an app may not be overlooked.
Good article, also, I need informations about amazon API with PHP. Where I can get informations about it ?
muito bom exemplo de nusoap e prototype .
very nice, added in delicious.
when implementing it gives me an error :
Warning: fopen(cache/wsdlcache-f5456923626cd8004b16fcd76cb4df24.lock) [function.fopen]: failed to open stream: No such file or directory in C:\wamp\www\bib5\ajaxamazon1\lib\class.wsdlcache.php on line 129
I believe he isn’t able to create the file so he cannot open it later but I don’t understand why he doesn’t create the file. Any ideas?
Heh nice idea! I think with a few snippets of ajax code from ajaxtutorials.com you will be able to get this completed. Good luck!
Heh nice idea! I think with a few snippets of ajax code from ajaxtutorials.com you will be able to get this completed. Good luck!
Afriver.com – 0.25% – 1.5% Daily for 7 Days!
American Financial River INC was founded to bring this investment solution to you. We offer a professional investment service Liberty Reserve, Perfect Money.
American Financial River offers two investment packages for you to choose from – Standard and Premium. The package you choose will interest structure.
Standart Plan
—————
0.25%-0.90% fixed Daily interest
Investment term – 7 days
Interest is paid on trading Daily (Monday to Friday)
Minimal deposit is $15.00
Maximum $5000.00 per deposit
Fast withdrawals!
Principal is returned back to investor
Compounding is available
$1.00 startup bonus
Level Amount Daily Interest
Starter $15 – $250 0.25%
Basic $250 – $500 0.50%
Advanced $500 – $1,000 0.70%
Professional $1,000 – $5,000 0.90%
Premium Plan
1.20%-1.50% fixed Daily interest
Investment term – 7 days
Interest is paid once in a Daily
Minimal deposit is $5000.00
Maximum $100000.00 per deposit
Fast withdrawals!
Principal is returned back to investor
Compounding available
$1.00 startup bonus
Level Amount Daily Interest
Starter $5,000 – $10,000 1.20%
Basic $10,000 – $20,000 1.30%
Advanced $20,000 – $50,000 1.40%
Professional $50,000 – $100,000 1.50%
Referral Program
Open an account at American Financial River and you will be able to participate in our referral program. We will pay you up to 10.00% of your referrer’s deposit. The referral commission is paid instantly and you can reinvest or withdraw it.
>> AFRiver is a registered company
>> DDos Protected Server
>> Powerful SSL Protection
>> Enhanced Account Security
>> Online Customer Service
>> Fast Withdrawals
>> Startup Bonus for New Investors
http://afriver.com/?ref=Kir
This is a very nice article on AWS. I have now bookmarked it
It serves as a prelude to what one can do with AWS…good job.
Evans
I got the same problem as you Marta! Did you ever figure it out?
This is great but i can
I got the same problem…….
Warning: fopen(cache/wsdlcache-f5456923626cd8004b16fcd76cb4df24.lock) [function.fopen]: failed to open stream: No such file or directory in G:\wamp\www\Amazone\ajaxamazon1\lib\class.wsdlcache.php on line 119
I can’t figure it out, why it is…….
I got this error as well….
(((
Fatal error: Allowed memory size of 8388608 bytes exhausted (tried to allocate 524266 bytes) in G:\wamp\www\Amazone\ajaxamazon1\lib\class.wsdlcache.php on line 136
Can’t someone post a fix for this, please?
Another example of why ajax is so powerful and popular. thanks.