原因が分かれば、あとはプログラムを修正するだけです。値が空の場合を想定したプログラムに改良してみましょう。
ネットショップで商品名や商品価格が空のことは無いと思いますが、念のため全ての項目をチェックすることにします。
また値を取り出す処理が重複しているので、関数としてまとめることにしました。ついでにHTML作成部分を見やすくします。
今回の改良点をまとめると、以下のようになります。
・XMLの値が空の場合に対応する
・値を取得する部分を関数にする
・HTMLタグ作成部分を短く区切る
【1】sample002 をコピーして、 sample003 フォルダを作成します。
＊「\」はWindowsでは円記号のことです。
保存先 C:\phpdev\www\rakuten
【2】「index.js」と「item.js」を一部変更します。
＊ファイルは UTF-8 形式で保存してください。
＊index.html、index.css は変更無し。
保存先 C:\phpdev\www\rakuten\sample003
ファイル名 index.js
onload = init;
var state;
var result;
function init() {
state = $('state');
result = $('result');
itemDisp();
}
function getValue(xmlData, tagName) {
var tmp = xmlData.getElementsByTagName(tagName);
var tmpValue;
//子要素を取得
var cn = tmp[0].childNodes;
//値がある場合は取得
if(cn.length >= 1) {
tmpValue = tmp[0].firstChild.nodeValue;
}else{
tmpValue = "";
}
return tmpValue;
}
保存先 C:\phpdev\www\rakuten\sample003
ファイル名 item.js
function itemDisp() {
state.innerHTML = "処理中です・・・<br />\n";
var url = "../lib/ItemSearch.php";
var paramList = "keyword=" + encodeURIComponent("ヨーグルト");
paramList += "&hits=10";
paramList += "&page=1";
paramList += "&sort=" + encodeURIComponent("+itemPrice");
paramList += "&imageFlag=1";
new Ajax.Request(url,
{
method: 'get',
onSuccess: getData,
onFailure: showErrMsg,
parameters: paramList
});
function getData(data){
var response = data.responseXML.getElementsByTagName('Response');
var status = getValue(response[0], 'Status');
if(!(status == "Success")){
state.innerHTML = "データが見つかりませんでした。";
return;
}
var item = response[0].getElementsByTagName('Item');
var tmpHtml = "";
for(i = 0; i < item.length; i++){
//値を取得
var itemNameValue = getValue(item[i], 'itemName');
var itemPriceValue = getValue(item[i], 'itemPrice');
var affiliateUrlValue = getValue(item[i], 'affiliateUrl');
var mediumImageUrlValue = getValue(item[i], 'mediumImageUrl');
var itemCaptionValue = getValue(item[i], 'itemCaption');
//HTML作成
tmpHtml += "<p>";
tmpHtml += "<a href='" + affiliateUrlValue + "'>";
tmpHtml += itemNameValue + "</a>";
tmpHtml += "<br />";
tmpHtml += "<b>" + itemPriceValue + "円</b>";
tmpHtml += "<br />";
tmpHtml += "<a href='" + affiliateUrlValue + "'>";
tmpHtml += "<img src='"+ mediumImageUrlValue + "'>";
tmpHtml += "</a>";
tmpHtml += "<br />";
if(itemCaptionValue.length >= 200){
tmpHtml += itemCaptionValue.substring(0, 200);
tmpHtml += "<br />";
}else{
tmpHtml += itemCaptionValue;
tmpHtml += "<br />";
}
tmpHtml += "</p>";
tmpHtml += "<hr />";
}
//結果を表示
result.innerHTML = tmpHtml;
state.innerHTML = "データを取得しました。<br />\n";
}
function showErrMsg(){
clearDisp();
state.innerHTML = "データを取得できませんでした。<br />\n";
}
}
プログラムの準備ができたら実行してみましょう。
【3】C:\phpdev フォルダ内にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。
【4】Webブラウザを起動して、 sample003 の動作を確認します。
http://localhost/rakuten/sample003/
・Internet Explorer の場合
【5】問題点だった商品も表示できました。
検索キーワードが「ヨーグルト」で、1ページ目の4番目のデータは、商品説明文が無いのですが、きちんと動作していることがわかります。
【6】Firefox でも動作確認してください。
