$.ajaxでYahooショッピング商品検索APIを利用したプログラムを作成

jQueryの$.ajaxを使いYahooショッピング商品検索をする単純なプログラムを作成しました。

Yahooショッピング商品検索APIのメモ

Webサービス：Yahooショッピング商品検索API
データ形式：XML、JSONP等
使用時の注記：クレジット表示必要
利用時の登録：必要

下のコードをそのまま貼り付けると一応動きますが、アプリケーションIDの入力は必要です。機能としては、キーワードを入力して検索すると20商品の名前と画像が表示されます。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function() {
	$('#button').on('click', function(e) {
		e.preventDefault();
		$.ajax({
			url:'http://shopping.yahooapis.jp/ShoppingWebService/V1/json/itemSearch',
			dataType: 'jsonp',
			async: 'true',
			data: {
				appid: 'アプリケーションID',
				query: $('#goods').val()
			}
		})
		.done(function(data) {
			var goods = data.ResultSet[0];

			for(var i = 0; i < 20; i++) {
				var img_goods = $('<img>').attr('src', goods.Result[i].Image.Small);
				$('#content').append('<p>' + goods.Result[i].Name).append(img_goods);
			}
		})
		.fail(function(data) {
			alert('error');
		});
	});
});
</script>
<title>Yahooショッピング商品検索</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Yahooショッピング 商品検索</h1>
<form>
<input type="text" id="goods" value="" />
<input type="button" id="button" value="送信" />
</form>
<div id="content"></div>
</body>
</html>

爆速JSONPを使うともっと簡単に作れると思います。