Our application uses several JavaScript functions to parse (build), transmit and process the request that queries the Amazon ECS for information. These functions can be included as inline JavaScript statements or as a separate JavaScript attachment. The latter option is a lot neater in my opinion, so the search page will include an attachment to the JavaScript code controlling the web services application. Search Function
// Search function - creates, builds, and adds remote JSON script // to the page, which in turn calls amzJSONCallback var amazonSearch = function(x, s, c, p) { // Determine Sort Variable if (s && c) { if ((s == 'salesrank') && (bssort)) { s = bssort; } else if ((s == 'psrank') && (featuredsort)) { s = featuredsort; } else if ((s == 'price') && (pricedown)) { s = pricedown; } else if ((s == '-price') && (priceup)) { s = priceup; } else { s = ''; } } // Assign default page number p = (typeof p == 'undefined') ? '1' : p; // Build Request String var request = 'http://xml-us.amznxslt.com/onca/xml?Service=AWSECommerceService'; request += '&SubscriptionId=0AQDYVHJNF45Z9AXKG82'; request += '&AssociateTag=tropidesig-20'; request += '&Operation=ItemSearch'; request += '&Keywords=' + x; request += '&SearchIndex=' + c; request += '&ItemPage=' + p; request += '&Sort=' + s; request += '&MerchantId=All'; request += '&ResponseGroup=OfferFull,Medium,Reviews'; request += '&Condition=All'; request += '&Style=http://arstropica.com/dev/amazon/example10/ajsonCategorySearch.xsl'; request += '&ContentType=text/javascript'; request += '&CallBack=amzJSONCallback'; getEl('searchResults').innerHTML = "Loading..."; // Build Script Object aObj = new JSONscriptRequest(request); // Build Script Tag aObj.buildScriptTag(); // Append Script Tag to Document aObj.addScriptTag(); }
The above code snippet is a JavaScript function that takes four arguments (x, s, c, p): Keyword, Sort, Category and Page, respectively. The function will build our search form output into a REST request and, using a DOM function, append it to head of our search page as the source of a <script> object. The scriptbuilder DOM function is below. JSON ScriptBuilder Function
// JSON ScriptBuilder Function and Prototype, from Jason Levitt of Yahoo ! // code found here : http : // devx.com / webdev / Article / 30860 / 1954 function JSONscriptRequest(fullUrl) { this.fullUrl = fullUrl; this.noCacheIE = '&noCacheIE=' + (new Date()).getTime(); this.headLoc = document.getElementsByTagName("head").item(0); this.scriptId = 'azScriptId' + JSONscriptRequest.scriptCounter ++ ; } JSONscriptRequest.scriptCounter = 1; JSONscriptRequest.prototype.buildScriptTag = function () { this.scriptObj = document.createElement("script"); this.scriptObj.setAttribute("type", "text/javascript"); this.scriptObj.setAttribute("src", this.fullUrl + this.noCacheIE); this.scriptObj.setAttribute("id", this.scriptId); } JSONscriptRequest.prototype.removeScriptTag = function () { this.headLoc.removeChild(this.scriptObj); } JSONscriptRequest.prototype.addScriptTag = function () { this.headLoc.appendChild(this.scriptObj); }
As previously discussed in the JSON section, the <script> object is the part of the DOM responsible for sending the request across the domain boundary to the Amazon ECS Web Service server and accepting the server response as its source. Additionally, several ancilliary functions that will be useful in manipulating the DOM are listed below. DOM Functions
// Basic DOM shortcut functions function getEl(x) { return document.getElementById(x) } function ctn(x) { return document.createTextNode(x) } function cel(x) { return document.createElement(x) }
Two functions are also included to search string variables. One applies to string arrays, the other to regular string variables. String Search Functions
String Search functions // Array Search Function function in_array(needle, haystack, strict) { // http : // kevin.vanzonneveld.net // + original by : Kevin van Zonneveld (http : // kevin.vanzonneveld.net) // * example 1 : in_array('van', ['Kevin', 'van', 'Zonneveld']); // * returns 1 : true var found = false, key, strict = ! ! strict; for (key in haystack) { if ((strict && haystack[key] === needle) || ( ! strict && haystack[key] == needle)) { found = true; break; } } return found; } // String Search Function function stristr( haystack, needle, bool ) { // http : // kevin.vanzonneveld.net // + original by : Kevin van Zonneveld (http : // kevin.vanzonneveld.net) // * example 1 : stristr('Kevin van Zonneveld', 'Van'); // * returns 1 : 'van Zonneveld' // * example 2 : stristr('Kevin van Zonneveld', 'VAN', true); // * returns 2 : 'Kevin ' var pos = 0; pos = haystack.toLowerCase().indexOf( needle.toLowerCase() ); if( pos == - 1 ) { return false; } else { if( bool ) { return haystack.substr( 0, pos ); } else { return haystack.slice( pos ); } } }
Note the final parameter of the request variable in the search function is a callback value. This parameter takes advantage of the argument reflection capability of the Amazon Web Service so that it can be reflected back as part of the JSON/XSL response and used to build a function call to the amzJSONCallback function responsible for interpreting the JSON formatted output and converting it to HTML.