Javascript Help - Amazon Artwork

[yagran]

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...

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:

<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...

[angelwatt]

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.

[yagran]

Hmmm...I get two related errors:

Security Error: Content at http://radiofluff.co.uk/beta/ may not load data from http://webservices.amazon.com/onca/x...Houses&Title=&.

Error: uncaught exception: [Exception... "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" location: "http://radiofluff.co.uk/beta/AlbumArtAmazon.js Line: 136"]

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? :-(

[angelwatt]

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 Code:

        try {
         amazon_req.req.open("GET", url, true);
       }
       catch(e) {
       alert("Error! URL: "+ url +"\nError message: "+ e);
       } 


[yagran]

Error! URL: http://webservices.amazon.com/onca/x...=UNKLE&Title=&
Error message: [Exception... "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" location: "http://radiofluff.co.uk/beta/AlbumArtAmazon.js Line: 137"]

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

$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?

[angelwatt]

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.

[yagran]

Originally Posted by angelwatt

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.

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

ProxyPass    /call/    http://webservices.amazon.com/onca/xml/
ProxyPassReverse    http://webservices.amazon.com/onca/xml/

and changed my base url in javascript to

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.