NeoCat · March 9, 2011 11:45
diff --git a/toptracks.html b/toptracks.html
 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>last.fm API test</title>
 <script>
 var api_key = '0809689c938abf942a0d980ff25b5689';
 var api_url = "http://ws.audioscrobbler.com/2.0/?method=artist.gettoptracks&api_key="+api_key+"&format=json&autocorrect=1&artist=";

 function $(id) { return document.getElementById(id); }

 // アーティストのtoptracksを取得
 function gettoptracks(artist) {
 	xds.load(api_url + artist, function(res) {
 		document.res = res;
 		if (!res.toptracks)
 			$("result").innerHTML = res.message || "APIエラー";
 		else
 			display_tracks(res.toptracks.track);
 	}, function(){
 		alert("last.fm APIの呼出しに失敗しました。");
 	});
 }

 // 結果表示
 function display_tracks(tracks) {
 	if (!tracks) {
 		$("result").innerHTML = "見つかりませんでした。";
 		return;
 	}
 	if (!tracks[0]) tracks[0] = tracks; // ヒット数=1
 	$("result").innerHTML = "";
 	var ele = document.createElement("h1");
 	ele.innerHTML = tracks[0].artist.name + " のトップ曲";
 	$("result").appendChild(ele);
 	ele = document.createElement("ol");
 	for (var i = 0; i < tracks.length; i++) {
 		var t = tracks[i];
 		var e = document.createElement("li");
 		var a = document.createElement("a");
 		a.href = t.url;
 		a.innerHTML = t.name;
 		if (t.image && t.image[0]) {
 			var img = document.createElement("img");
 			img.src = t.image[0]["#text"];
 			e.appendChild(img);
 		}
 		e.appendChild(a);
 		ele.appendChild(e);
 	}
 	$("result").appendChild(ele);
 }

 // クロスドメインJavaScript呼出し ( http://d.hatena.ne.jp/NeoCat/20110206/1296934235 )
 var xds = {
 	load: function(url, callback, onerror, retry, callback_key) {
 		var url2 = url + (url.indexOf('?')<0?'?':'&') +
 								(callback_key?callback_key:'callback') + '=cb';
 		if (!url2) return null;
 		loading(true);
 		var ifr = document.createElement("iframe");
 		ifr.style.display = "none";
 		document.body.appendChild(ifr);
 		var d = ifr.contentWindow.document;
 		var cnt = 0; // 二重onload防止
 		ifr[ifr.readyState/*IE*/ ? "onreadystatechange" : "onload"] = function() {
 			if (this.readyState && this.readyState != 'complete' || cnt++) return;
 			if (d.x) {
 				if (callback) callback.apply(this, d.x);
 			} else if (retry && retry > 1) {
 				loading(true); // retry待ち表示
 				setTimeout(function(){ xds.load(url, callback, onerror, retry-1);
 					loading(false);
 				}, 1000);
 			} else if (onerror)
 				onerror();
 			loading(false);
 			setTimeout(function(){ try { ifr.parentNode.removeChild(ifr); } catch(e) {} }, 0);
 		};
 		d.write('<scr'+'ipt>function cb(){document.x=arguments}</scr'+'ipt>' +
 				'<scr'+'ipt src="'+url2+'"></scr'+'ipt>');
 		d.close();
 		return ifr;
 	},
 	abort: function(ifr) {
 		if (ifr && ifr.parentNode) {
 			ifr.parentNode.removeChild(ifr);
 			loading(false);
 		}
 	}
 }
 // プログレスバー表示
 var loading_cnt = 0;
 function loading(start) {
 	loading_cnt += start ? 1 : loading_cnt > 0 ? -1 : 0;
 	$('loading').style.display = loading_cnt > 0 ? "block" : "none";
 }
 </script>
 </head>
 <body>

 <form onsubmit="gettoptracks(this.artist.value); return false;">
 <label for="artist">Artist: </label>
 <input type="text" name="artist" id="artist" size="30">
 <input type="submit" value="Search">
 </form>
 <img src="data:image/gif;base64,R0lGODlhEAAQAPQAAP///xIAt/j4/EY4xoyE2xcGuDUmwdjW8q6o5SYWvX9213Bm0+Xk9p+Y4cnG7lRIy2FWzwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFUCAgjmRpnqUwFGwhKoRgqq2YFMaRGjWA8AbZiIBbjQQ8AmmFUJEQhQGJhaKOrCksgEla+KIkYvC6SJKQOISoNSYdeIk1ayA8ExTyeR3F749CACH5BAkKAAAALAAAAAAQABAAAAVoICCKR9KMaCoaxeCoqEAkRX3AwMHWxQIIjJSAZWgUEgzBwCBAEQpMwIDwY1FHgwJCtOW2UDWYIDyqNVVkUbYr6CK+o2eUMKgWrqKhj0FrEM8jQQALPFA3MAc8CQSAMA5ZBjgqDQmHIyEAIfkECQoAAAAsAAAAABAAEAAABWAgII4j85Ao2hRIKgrEUBQJLaSHMe8zgQo6Q8sxS7RIhILhBkgumCTZsXkACBC+0cwF2GoLLoFXREDcDlkAojBICRaFLDCOQtQKjmsQSubtDFU/NXcDBHwkaw1cKQ8MiyEAIfkECQoAAAAsAAAAABAAEAAABVIgII5kaZ6AIJQCMRTFQKiDQx4GrBfGa4uCnAEhQuRgPwCBtwK+kCNFgjh6QlFYgGO7baJ2CxIioSDpwqNggWCGDVVGphly3BkOpXDrKfNm/4AhACH5BAkKAAAALAAAAAAQABAAAAVgICCOZGmeqEAMRTEQwskYbV0Yx7kYSIzQhtgoBxCKBDQCIOcoLBimRiFhSABYU5gIgW01pLUBYkRItAYAqrlhYiwKjiWAcDMWY8QjsCf4DewiBzQ2N1AmKlgvgCiMjSQhACH5BAkKAAAALAAAAAAQABAAAAVfICCOZGmeqEgUxUAIpkA0AMKyxkEiSZEIsJqhYAg+boUFSTAkiBiNHks3sg1ILAfBiS10gyqCg0UaFBCkwy3RYKiIYMAC+RAxiQgYsJdAjw5DN2gILzEEZgVcKYuMJiEAOwAAAAAAAAAAAA==" style="display: none" id="loading">
 <div id="result"></div>

 </body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>last.fm API test</title>
	<script>
	var api_key = '0809689c938abf942a0d980ff25b5689';
	var api_url = "http://ws.audioscrobbler.com/2.0/?method=artist.gettoptracks&api_key="+api_key+"&format=json&autocorrect=1&artist=";

	function $(id) { return document.getElementById(id); }

	// アーティストのtoptracksを取得
	function gettoptracks(artist) {
	xds.load(api_url + artist, function(res) {
	document.res = res;
	if (!res.toptracks)
	$("result").innerHTML = res.message \|\| "APIエラー";
	else
	display_tracks(res.toptracks.track);
	}, function(){
	alert("last.fm APIの呼出しに失敗しました。");
	});
	}

	// 結果表示
	function display_tracks(tracks) {
	if (!tracks) {
	$("result").innerHTML = "見つかりませんでした。";
	return;
	}
	if (!tracks[0]) tracks[0] = tracks; // ヒット数=1
	$("result").innerHTML = "";
	var ele = document.createElement("h1");
	ele.innerHTML = tracks[0].artist.name + " のトップ曲";
	$("result").appendChild(ele);
	ele = document.createElement("ol");
	for (var i = 0; i < tracks.length; i++) {
	var t = tracks[i];
	var e = document.createElement("li");
	var a = document.createElement("a");
	a.href = t.url;
	a.innerHTML = t.name;
	if (t.image && t.image[0]) {
	var img = document.createElement("img");
	img.src = t.image[0]["#text"];
	e.appendChild(img);
	}
	e.appendChild(a);
	ele.appendChild(e);
	}
	$("result").appendChild(ele);
	}

	// クロスドメインJavaScript呼出し ( http://d.hatena.ne.jp/NeoCat/20110206/1296934235 )
	var xds = {
	load: function(url, callback, onerror, retry, callback_key) {
	var url2 = url + (url.indexOf('?')<0?'?':'&') +
	(callback_key?callback_key:'callback') + '=cb';
	if (!url2) return null;
	loading(true);
	var ifr = document.createElement("iframe");
	ifr.style.display = "none";
	document.body.appendChild(ifr);
	var d = ifr.contentWindow.document;
	var cnt = 0; // 二重onload防止
	ifr[ifr.readyState/IE/ ? "onreadystatechange" : "onload"] = function() {
	if (this.readyState && this.readyState != 'complete' \|\| cnt++) return;
	if (d.x) {
	if (callback) callback.apply(this, d.x);
	} else if (retry && retry > 1) {
	loading(true); // retry待ち表示
	setTimeout(function(){ xds.load(url, callback, onerror, retry-1);
	loading(false);
	}, 1000);
	} else if (onerror)
	onerror();
	loading(false);
	setTimeout(function(){ try { ifr.parentNode.removeChild(ifr); } catch(e) {} }, 0);
	};
	d.write('<scr'+'ipt>function cb(){document.x=arguments}</scr'+'ipt>' +
	'<scr'+'ipt src="'+url2+'"></scr'+'ipt>');
	d.close();
	return ifr;
	},
	abort: function(ifr) {
	if (ifr && ifr.parentNode) {
	ifr.parentNode.removeChild(ifr);
	loading(false);
	}
	}
	}
	// プログレスバー表示
	var loading_cnt = 0;
	function loading(start) {
	loading_cnt += start ? 1 : loading_cnt > 0 ? -1 : 0;
	$('loading').style.display = loading_cnt > 0 ? "block" : "none";
	}
	</script>
	</head>
	<body>

	<form onsubmit="gettoptracks(this.artist.value); return false;">
	<label for="artist">Artist: </label>
	<input type="text" name="artist" id="artist" size="30">
	<input type="submit" value="Search">
	</form>
	<img src="data:image/gif;base64,R0lGODlhEAAQAPQAAP///xIAt/j4/EY4xoyE2xcGuDUmwdjW8q6o5SYWvX9213Bm0+Xk9p+Y4cnG7lRIy2FWzwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFUCAgjmRpnqUwFGwhKoRgqq2YFMaRGjWA8AbZiIBbjQQ8AmmFUJEQhQGJhaKOrCksgEla+KIkYvC6SJKQOISoNSYdeIk1ayA8ExTyeR3F749CACH5BAkKAAAALAAAAAAQABAAAAVoICCKR9KMaCoaxeCoqEAkRX3AwMHWxQIIjJSAZWgUEgzBwCBAEQpMwIDwY1FHgwJCtOW2UDWYIDyqNVVkUbYr6CK+o2eUMKgWrqKhj0FrEM8jQQALPFA3MAc8CQSAMA5ZBjgqDQmHIyEAIfkECQoAAAAsAAAAABAAEAAABWAgII4j85Ao2hRIKgrEUBQJLaSHMe8zgQo6Q8sxS7RIhILhBkgumCTZsXkACBC+0cwF2GoLLoFXREDcDlkAojBICRaFLDCOQtQKjmsQSubtDFU/NXcDBHwkaw1cKQ8MiyEAIfkECQoAAAAsAAAAABAAEAAABVIgII5kaZ6AIJQCMRTFQKiDQx4GrBfGa4uCnAEhQuRgPwCBtwK+kCNFgjh6QlFYgGO7baJ2CxIioSDpwqNggWCGDVVGphly3BkOpXDrKfNm/4AhACH5BAkKAAAALAAAAAAQABAAAAVgICCOZGmeqEAMRTEQwskYbV0Yx7kYSIzQhtgoBxCKBDQCIOcoLBimRiFhSABYU5gIgW01pLUBYkRItAYAqrlhYiwKjiWAcDMWY8QjsCf4DewiBzQ2N1AmKlgvgCiMjSQhACH5BAkKAAAALAAAAAAQABAAAAVfICCOZGmeqEgUxUAIpkA0AMKyxkEiSZEIsJqhYAg+boUFSTAkiBiNHks3sg1ILAfBiS10gyqCg0UaFBCkwy3RYKiIYMAC+RAxiQgYsJdAjw5DN2gILzEEZgVcKYuMJiEAOwAAAAAAAAAAAA==" style="display: none" id="loading">
	<div id="result"></div>

	</body>
	</html>