Ajax 外部のドメイン上にあるファイルを取り込む方法。

Ajax の非同期通信のメリットとして、各種Webサービスで公開されている膨大なデータを取り込んで利用できることがあります。

まずは以下のURLを開いてみてください。ブラウザで XML が開きます。
http://ws.bzen.net/pgtop/pref.xml

・Internet Explorer で表示した場合
ajax-216.gif

・Firefox で表示した場合
ajax-222.gif

この XML はこれまでに使った pref.xml を、サーバー上にアップしただけです。世界中からアクセスすることができます。このような XML や RSS の形で公開されているデータは、他のコンピュータで利用することができます。

今回の XML はシンプルな例ですが、外部のドメイン上にあるこの pref.xml を取り込めるようになると、いろんなWebサービスに応用できます。


【1】sample003 フォルダをコピーして sample004 フォルダを作成します。

ajax-213.gif

コピーしただけなので、この段階では同一ドメイン内の pref.xml を読み込みます。もちろん正常に動作します。


【2】sample004 フォルダを開き、「pref.xml」を削除します。

ajax-214.gif


【3】最終的に今回は以下のようなファイルの構成になります。

ajax-215.gif


【4】次は pref.js の一部を変更します。

ajax-217.gif

pref.xml

http://ws.bzen.net/pgtop/pref.xml

変更はたったこれだけです。では動作を確認してみましょう。


【5】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。

ajax-166.gif


【6】Firefox を起動して、アドレスに以下のように入力し実行します。

http://localhost/ajax/sample004/pref.html

ajax-219.gif


【7】「データ取得」ボタンをクリックします。

ajax-220.gif


【8】しかし処理が進みません。

ajax-221.gif

原因は他のドメインにあるファイルを取得しようとしているからです。localhost から見るとインターネット上のドメインは全て他のドメインとなります。

非同期通信で取得できるのは、プログラムと同一ドメイン内にあるファイルに限られます。他のドメインのファイルを扱うには、『中継プログラム(スクリプト)』を使う必要があります。中継プログラムについては次回に説明します。


【ワンポイント】

Internet Explorer の場合は、他のドメインに接続しようとすると、以下のようなメッセージが表示されるので、「はい」ボタンをクリックします。

ajax-218.gif

Internet Explorer ではデータが表示されますが、これはローカル環境で動作確認しているからです。実際にレンタルサーバーなどにアップすると、表示できなくなります。

やはり中継プログラムが必要なのです。


スポンサード リンク

スポンサード リンク






Ajax初心者入門講座TOPへ