sample001 で使ったプログラムは Ajax初心者入門講座 を先に学習していれば、ほとんど説明なしでもわかると思います。
Ajaxプログラムの詳細については、説明が重複するので Ajax初心者入門講座 をご覧ください。今回は、重要な部分だけに絞って説明します。
■index.html側
(1)JavaScript や CSS を外部ファイルとして読み込んでいる部分です。
<script type="text/javascript" src="../lib/prototype.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="item.js"></script>
<link href="index.css" rel="stylesheet" type="text/css">
＊libフォルダにあるファイルは相対パスで指定しています。
＊他は同一フォルダ内なので、ファイル名だけでかまいません。
(2)商品データやメッセージを表示する場所に id 名を付けている部分です。
<div id="state"></div>
<div id="result"></div>
■index.js側
(1)ページが読込まれた時に呼び出す関数を指定している部分です。
onload = init;
＊関数名の後ろに()カッコは付けません。
(2)ページが読込まれた時には、関数 init() が実行されます。この関数の中でさらに itemDisp() という関数を呼び出しています。
function init() {
省略
itemDisp();
}
＊関数内から関数を呼び出す場合は、関数名の後ろに()カッコを付けます。
■item.js側
(1)中継プログラムを指定している部分です。
var url = "../lib/ItemSearch.php";
＊libフォルダにあるファイルは相対パスで指定しています。
(2)中継プログラムに送るパラメーターを組み立てている部分です。
var paramList = "keyword=" + encodeURIComponent("カニ");
paramList += "&hits=10";
paramList += "&page=1";
paramList += "&sort=" + encodeURIComponent("+itemPrice");
paramList += "&imageFlag=1";
＊検索キーワードとソートはエンコードしています。
(3)受信した XML 全体を、変数で参照できるようにしている部分です。
var response = data.responseXML.getElementsByTagName('Response');
(4)楽天ウェブサービスは、リクエストが成功すると、レスポンスの XML 内の Status タグに「Success」と表示されます。
その Status タグの文字列を取得している部分です。
var status = response[0].getElementsByTagName('Status')[0].firstChild.nodeValue;
↑これは2行に分けて書くこともできますが、こういう書き方もできます。
(5)if文で、もし成功していない場合は、メッセージを表示して、処理を終了します。
if(!(status == "Success")){
state.innerHTML = "データが見つかりませんでした。";
return;
}
＊ return で処理を終了すると、関数を呼び出した場所に戻ります。
(6)XML中に複数ある Item タグを変数に代入している部分です。itemは配列になります。
var item = response[0].getElementsByTagName('Item');
(7)HTMLを組み立てるための変数を初期化している部分です。
var tmpHtml = "";
(8)for文で item の要素数分だけ処理を繰り返します。
for(i = 0; i < item.length; i++){
省略
}
(9)フィールドごとに値を取り出している部分です。
var itemName = item[i].getElementsByTagName('itemName');
var itemNameValue = itemName[0].firstChild.nodeValue;
var itemPrice = item[i].getElementsByTagName('itemPrice');
var itemPriceValue = itemPrice[0].firstChild.nodeValue;
var affiliateUrl = item[i].getElementsByTagName('affiliateUrl');
var affiliateUrlValue = affiliateUrl[0].firstChild.nodeValue;
var mediumImageUrl = item[i].getElementsByTagName('mediumImageUrl');
var mediumImageUrlValue = mediumImageUrl[0].firstChild.nodeValue;
var itemCaption = item[i].getElementsByTagName('itemCaption');
var itemCaptionValue = itemCaption[0].firstChild.nodeValue;
＊長くなりますが (4) のように1行で書くこともできます。
＊もっと必要なフィールドがある場合は、この部分を増やせばよいだけです。
(10)取り出した値を使って、HTMLを組み立てている部分です。
tmpHtml += "<p>";
tmpHtml += itemNameValue + "<br />";
tmpHtml += itemPriceValue + "<br />";
tmpHtml += affiliateUrlValue + "<br />";
tmpHtml += mediumImageUrlValue + "<br />";
tmpHtml += itemCaptionValue + "<br />";
tmpHtml += "</p>";
tmpHtml += "<hr />";
(11)組み立てた HTML を実際に画面に表示して、メッセージを表示している部分です。
result.innerHTML = tmpHtml;
state.innerHTML = "データを取得しました。<br />\n";
■index.css側
(1)商品データを表示する result の横幅を指定している部分です。
width:800px;
【ワンポイント】
どんなフィールドが取り出せるかは、楽天ウェブサービスのオンラインドキュメントに詳しく書かれています。出力パラメーターのフィールド名を参考にしてください。
http://webservice.rakuten.co.jp/api/itemsearch/
