Ajax初心者入門講座 と 楽天ウェブサービス初心者入門講座 に関する質問
【質問】
Ajax初心者入門講座の「Step13・非同期通信」と、楽天ウェブサービス初心者入門講座の「Step9・楽天から商品データを取得する」のいずれも非同期通信を使って、データを取得してみましたがうまくいきません。
Ajaxのほうは、Step13でpref.htmlはきちんと表示されますが、「データ取得」ボタンをクリックしても何も変化がおこりません。
これはファイル名pref.jsに問題があるのでしょうか？
楽天ウェブサービス初心者入門講座の方は、index.html、index.js、item.js、index.css、をきちんと決められたファイル先に保存しているのに、何も表示されません。
http://localhost/ はきちんと動くので、Webサーバーに問題はないと思います。ファイルの保存形式も UTF-8でしています。
何が原因なのでしょうか？お手数ですがよろしくお願いします。
【回答】
非同期通信ができないとのことなので、多分原因は同じです。
まず「Ajax初心者入門講座」のほうから解決しましょう。「楽天ウェブサービス初心者入門講座」は、同じ手順で解決できると思います。
少し長くなりますが、原因が特定できれば、すべて行なう必要はありません。
(1)Webブラウザ側の設定を確認します。
Webブラウザで以下のURLを開き、動作を試してください。
http://ws.bzen.net/pgtop/sample003/pref.html
上記のプログラムは sample003 をレンタルサーバーにアップロードしただけです。もしこのURLで動くなら、ブラウザ側の設定の問題ではありません。
＊動かないなら、ブラウザかセキュリティソフト側で、JavaScriptがブロックされている可能性があります。
(2)次は「prototype.js」の配置場所が正しいか、もう一度確認してください。
C:\phpdev\www\ajax\lib フォルダの中に配置します。
＊「\」はWindowsでは円記号のことです。
つまり以下のようなパスになります。
C:\phpdev\www\ajax\lib\prototype.js
「Step12・localhostのファイルを表示」で、
---引用---
これまでCドライブの直下にあった ajaxフォルダ を、「C:\phpdev\www」にフォルダごと移動します。
------
という操作を行なっていれば、prototype.jsが正しく配置されていると思います。
(3)「phpdev」でローカルのWebサーバーを起動し、「pref.xml」が正しく表示されるか確認してください。
http://localhost/ajax/sample003/pref.xml
XMLデータが表示されないと、もちろんプログラムで取得できません。
(4)それでも動かない場合は、どこでプログラムが動かなくなるか特定します。
プログラムに以下の1文を加えます。
alert("OK");
例
var response = data.responseXML.getElementsByTagName('Response');
alert("OK"); ←こんな使い方
var item = response[0].getElementsByTagName('Item');
アラートを書く場所を少しずつ変えます。アラートが表示されなくなった直前のプログラムに問題がある可能性が高いです。
キャッシュを表示しないためには、"OK2"のようにアラートで表示する文字列を毎回変えたほうが確実です。
ここで動かないのは、プログラムの入力ミスなどによるものです。問題箇所を特定できれば、修正するだけです。
(5)あとは文字コードですが、これは UTF-8 にしているとのことなので大丈夫だと思います。
とりあえず以上のことを、順番に試してみてください。一番可能性が高いのは、「prototype.js」の配置場所です。
関連する記事もご覧ください。
・Ajax非同期通信のサンプルで、IEだと正常に動作しないことについて。
