Javascript Help - Amazon Artwork

Discussion in 'Web Design and Development' started by yagran, Aug 9, 2008.

  1. yagran macrumors 6502a

    Joined:
    Jan 8, 2007
    Location:
    Brighton, East Sussex, UK
    #1
    Hi, i'm trying to use Javascript to search for and display artwork for a given artist and album name. I've found this great javascript which uses amazon web services, and running it locally on my machine works great. But when using it on my web server it doesn't work. Any help would be greatly appreciated...

    Code:
    var amazon_key = "1AQ1FG9Z***FPG2DPR2";
    
    var amazon_base = new Array();
    amazon_base["us"] = "http://webservices.amazon.com/onca/xml";
    amazon_base["uk"] = "http://webservices.amazon.co.uk/onca/xml";
    amazon_base["de"] = "http://webservices.amazon.de/onca/xml";
    amazon_base["jp"] = "http://webservices.amazon.co.jp/onca/xml";
    amazon_base["fr"] = "http://webservices.amazon.fr/onca/xml";
    amazon_base["ca"] = "http://webservices.amazon.ca/onca/xml";
    
    function _amazon_make_search(base, store) {
        var amazon_music_prefix = "/exec/obidos/search-handle-url/index=";
        var amazon_music_suffix = "&field-keywords=";    
        return base + amazon_music_prefix + store + amazon_music_suffix;
    }
    
    var amazon_search = new Array();
    amazon_search["us"] = _amazon_make_search("http://www.amazon.com", "music");
    amazon_search["uk"] = _amazon_make_search("http://www.amazon.co.uk", "music");
    amazon_search["de"] = _amazon_make_search("http://www.amazon.de", "pop-music-de");
    amazon_search["jp"] = _amazon_make_search("http://www.amazon.co.jp", "music-jp");
    amazon_search["fr"] = _amazon_make_search("http://www.amazon.fr", "music-fr");
    amazon_search["ca"] = _amazon_make_search("http://www.amazon.ca", "music-ca");
    
    var amazon_params = new Array();
    amazon_params["Service"] = "AWSECommerceService";
    amazon_params["Operation"] = "ItemSearch";
    amazon_params["SearchIndex"] = "Music";
    amazon_params["SubscriptionId"] = amazon_key;
    amazon_params["ResponseGroup"] = "Images";
    amazon_params["Keywords"] = "";
    amazon_params["Artist"] = "";
    amazon_params["Title"] = "";
    
    var amazon_req = {req: null, on_finish: null, on_error: null};
    var amazon_req_interval = 1000;
    var amazon_req_time = 0;
    
    var amazon_throttle_timer = null;
    var amazon_throttle_args = null;
    
    function amazon_make_url(artist, albumname, trackname, locale) {
        var url = amazon_base[locale] + "?";
        
        amazon_params["Keywords"] = trackname;
        amazon_params["Artist"] = artist;
        amazon_params["Title"] = albumname;
        
        for (var i in amazon_params) {
            url = url + i + "=" + encodeURIComponent(amazon_params[i]) + "&";
        }
        return url;
    }
    
    function amazon_make_html_url(artist, albumname, trackname, locale) {
        var url = amazon_search[locale];
        var params = new Array();
        if (artist)
            params.push(encodeURIComponent(artist));
        if (albumname)
            params.push(encodeURIComponent(albumname));        
        if (trackname)
            params.push(encodeURIComponent(trackname));                
            
        return url + params.join("%20");
    }
    
    function amazon_process_request() {
        if (amazon_req.req.readyState == 4) { 
            amazon_req_time = (new Date).getTime();
            if (amazon_req.req.status == 200) {
                if (amazon_req.on_finish != null) {
                    amazon_req.on_finish(amazon_req.req);
                }
            }
            else {
                if (amazon_req.on_error != null) {
                    amazon_req.on_error(amazon_req.req);
                }
            }
        }
    }
    
    function amazon_make_request(artist, albumname, trackname, locale, on_finish, on_error) {
        var url = amazon_make_url(artist, albumname, trackname, locale);
        now = (new Date).getTime();
    
        if (amazon_req_time + amazon_req_interval > now) {
            amazon_throttle_delay(amazon_req_interval, artist, albumname, trackname, locale, on_finish, on_error);
            return;
        }
        amazon_req_time = now;
    
        if (window.XMLHttpRequest) {
            amazon_req.req = new XMLHttpRequest();
            amazon_req.on_finish = on_finish;
            amazon_req.on_error = on_error;
            amazon_req.req.url = amazon_make_html_url(artist, albumname, trackname, locale);
            amazon_req.req.onreadystatechange = amazon_process_request;
            amazon_req.req.open("GET", url, true);
            amazon_req.req.send();
        }
    }
    
    function amazon_get_url_medium(req) {
        var images = req.responseXML.getElementsByTagName("MediumImage");
        for (var i = 0; i < images.length; i++) {
            var urls = images[i].getElementsByTagName("URL");
            if (urls && urls.length > 0 && urls[i].firstChild.nodeValue) {
    			document.getElementById('debug').innerHTML = urls[i].firstChild.nodeValue;
                document.getElementById('artwork').innerHTML = "<img height='120px' wid  th='120px' src='" + urls[i].firstChild.nodeValue + "'>";
            }
        }
    	return "";
    }
    
    function amazon_throttle_delay(delay, artist, album, title, locale, on_finish, on_error) {
    
        if (amazon_throttle_timer != null) {
            clearInterval(amazon_throttle_timer);
            amazon_throttle_timer = null;
        }
        amazon_throttle_args = new Object
        amazon_throttle_args.artist = artist;
        amazon_throttle_args.album = album;
        amazon_throttle_args.title = title;
        amazon_throttle_args.on_finish = on_finish;
        amazon_throttle_args.on_error = on_error;
        amazon_throttle_args.locale = locale;
        amazon_throttle_timer = setInterval("amazon_throttle_resume();", delay);    
    }
    
    function amazon_throttle_resume() {
        artist = amazon_throttle_args.artist;
        album = amazon_throttle_args.album;
        title = amazon_throttle_args.title;
        on_finish = amazon_throttle_args.on_finish;
        on_error = amazon_throttle_args.on_error;
        locale = amazon_throttle_args.locale;
        
        if (amazon_throttle_timer != null) {
            clearInterval(amazon_throttle_timer);
            amazon_throttle_timer = null;
        }
    
        amazon_make_request(artist, album, title, locale, on_finish, on_error);
    }
    
    function art_request(a, b, c) {
        var title = a;
        var album = b;
        var artist = c;
        amazon_make_request(artist, album, title, "us", amazon_get_url_medium, alert);
    }
    Im calling the code in a php file using:
    Code:
    <script type="text/javascript">
    art_request("<? echo $art_song ?>","<? echo $art_album ?>","<? echo $art_artist ?>");
    </script>
    
    where the three variables are included from a separate php file.

    I know this is a big chunk of code to help with but i would greatly appreciate any pointers...
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    What exactly doesn't work? Are there any error messages (In Firefox, go under Tools and choose Error Console)? Is there any PHP errors on the server? Just trying to narrow things down. Error messages can help.
     
  3. yagran thread starter macrumors 6502a

    Joined:
    Jan 8, 2007
    Location:
    Brighton, East Sussex, UK
    #3
    Hmmm...I get two related errors:

    Line 136 of the code is where the XML request is performed...

    Why would it work on my local computer but not from my webserver, why a security error? :-(
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    For line 136 place a try block around it like the code below. This should hopefully give some more detail about the error. Post what shows up in the alert.
    PHP:
            try {
             
    amazon_req.req.open("GET"urltrue);
           }
           catch(
    e) {
           
    alert("Error! URL: "url +"\nError message: "e);
           }
     
  5. yagran thread starter macrumors 6502a

    Joined:
    Jan 8, 2007
    Location:
    Brighton, East Sussex, UK
    #5
    Thats what it alerted me with, "NS_ERROR_DOM_BAD_URI" doesnt sound good.

    Its the typical cross domain security error.

    In a past twitter project i found a php/curl workaround
    Code:
    $url = 'http://twitter.com/statuses/update.xml';
    	$curl_handle = curl_init();
    	curl_setopt($curl_handle, CURLOPT_URL, "$url");
    	curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);
    	curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
    	curl_setopt($curl_handle, CURLOPT_POST, 1);
    	curl_setopt($curl_handle, CURLOPT_POSTFIELDS, "status=$message");
    	curl_setopt($curl_handle, CURLOPT_USERPWD, "$username:$password");
    	$buffer = curl_exec($curl_handle);
    	curl_close($curl_handle);
    
    would this be applicable?
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    When I go to the page http://radiofluff.co.uk/beta/ I'm not seeing any JavaScript errors. Not sure if this is the same page you're testing from. You may also want to test the site in a different browser just in case you have some browser setting that's creating a conflict.

    One thing that I see that makes me wonder, in the JavaScript the locale is set to "us" at the bottom, but the site domain is a .uk domain. Do you think it's possible that mismatch is causing the permission issues? Just a thought.
     
  7. yagran thread starter macrumors 6502a

    Joined:
    Jan 8, 2007
    Location:
    Brighton, East Sussex, UK
    #7
    Its not a browser issue im pretty sure its to do with the security issues involved with cross domain xmlhttprequest functions.

    Ive looked into the issue, and xml.com (an oreily site) suggested setting up a server wide redirect in the httpd.conf file of my server.

    I followed the instructions and added the following two lines to httpd.conf
    Code:
    ProxyPass    /call/    http://webservices.amazon.com/onca/xml/
    ProxyPassReverse    http://webservices.amazon.com/onca/xml/
    
    and changed my base url in javascript to
    Code:
    http://radiofluff.co.uk/call/
    
    but i dont think the redirect is working properly as the error console is now suggesting that the xml file doesnt exist. :-(

    if anyone knows where im going wrong please help thankyouuu.
     

Share This Page