これからはjQueryだろーって雰囲気なのでjQuery+楽天ウェブサービスを練習してみます。
これまでjQueryのライブラリは使ったことはあっても自分でスクリプトを組んだことがないのでここらで練習しておきます。今回の目標&やりたいことはこれ！
- 楽天商品検索APIを使用（version:2009-02-03）
- jQueryでAjax
- JSONP
- 検索機能はなし
- 用意するファイル・・・index.htmlとjQuery.js
最初なのでシンプルなサンプルからいきます！。これをベースに機能を追加していく感じで・・・。まずはjQueryの本体をダウンロードしてindex.htmlに読み込みます。
公式サイトからダウンロード：jQuery
<script type="text/javascript" src="jquery.js"></script>
ページの読込み時に実行するjQueryお決まりの書式。
$(document).ready( function () {～処理はここ～});
$(function) {}でもいけるみたい。ajax通信をするので「.ajax()」を使います。
ajax()関数のマニュアル： Ajax/jQuery.ajax – jQuery JavaScript Library
$.ajax({
～ここにオプション～
});
定義したオプションパラメータは次の通り。
- type
GETかPOSTかを指定。今回はGETです。デフォルトがGETなので書かなくてもOK。 - url
リクエスト先のベースとなるURL。 - data
上のurlで指定したURLの後ろにつけるクエリ。オブジェクト形式で指定します。キーワードに日本語を指定しても内部で変換してくれるのでそのまま日本語OKです。 - dataType
"xml"とか"json"とか、送信するデータの形式。今回は"jsonp"。 - jsonp
コールバック関数のためのパラメータが「callback」以外のときにここで名前を指定できます。 - success
通信が成功したときに実行される関数を指定します。
これ以外にもたくさんのパラメータがあるので詳しくはドキュメントを見てください。
パラメータ詳細
type: "GET",
通信タイプは"GET"でいきます。なくてもOKですが、練習なので書きます。
url: "http://api.rakuten.co.jp/rws/1.13/json?",
APIバージョンによって変わってくる値です。これは2009-02-03の場合です。
data: {
"developerId": "ここにデベロッパーID",
"affiliateId": "ここにアフィリエイトID",
"operation": "ItemSearch",
"keyword": "電卓",
"hits": "5",
"version" : "2009-02-03",
},
送信するクエリです。"keyword"は最近欲しい「電卓」で。ここは「"（ダブルクウォート）」や「,（コンマ）」を忘れがちなので注意ですね。
dataType: "jsonp",
送信するデータ形式はjsonp。
jsonp: "callBack",
楽天APIではコールバック関数を指定するパラメータが「callBack」（Bが大文字）となっているのでここで指定しておきます。実際のクエリは「&callBack=（jQueryによって勝手につけられる名前）」になります。
success: function(data) {
$("<ul/>").appendTo("div#result");
$.each(data.Body.ItemSearch.Items.Item, function(i, item) {
var content = item.itemName;
$("<li/>").append(content).appendTo("#result > ul");
});
}
はじめの関数の引数にはJSONデータがはいっています。取得したデータにアクセスするには$.each()関数を使います。「jQueryではじめるAjax：第2回 jQueryによるAjax実装｜gihyo.jp … 技術評論社」によると第1引数には繰り返す対象のオブジェクト、第2引数には繰り返す処理を定義した関数を指定します。
この関数にも2つの引数があって、1番目は何番目の要素かを示すインデックス、2番目は要素の値が入るということですが、ふたつめはちょっとわかりません。ただ、each()の第1引数に指定したものと同じオブジェクトが入るようです。なのでここのように「item」とすると商品名の「itemName」にアクセスするときは「item.itemName」となります。これでできたのでとりあえずこのままいきます。
説明しなかったそのほかのコードはjQueryの関数をつかって商品名をリスト形式に整形するためのものです。結果はdiv#result内にulリストをつくって出力します。
出来上がったサンプルコードを置いておきます。
関連する投稿
-
jQueryを利用したAjaxサンプル：JSON形式のデータを受け取る。
jQueryを利用したAjaxサンプル：JSON形式のデータを受け取る。
名前：paon
1 comment