さじろーどっとねっと
<最新Ajax>

XMLHttpRequestを使わないAjaxをご存知ですか?Ajaxという語源からはちょっと違った形のAjaxをご紹介します。
Ajaxを実現する別の方法
XMLHttpRequestを使ったAjaxでは、ドメインを超えてデータを読み込めないため、完全に別の方法を考える必要があります。

それは、scriptタグを使った外部読み出しです。

scriptタグを通常使う場合は、ページのヘッダ部に >script type=xxxxx src=xxxxx< という表記をしますが、Ajaxとして使用する場合は、それを動的に行います。

手順としては、
1.スクリプトエレメントを作成する
2.アトリビュートを設定する
3.ソースを設定する
4.エレメントを追加する

となります。

ソースコードはこうなります。
var scriptTag = document.createElement('script');
scriptTag.type = 'text/javascript';
scriptTag.src = 呼び出すファイル名;
document.body.appendChild(scriptTag);

たった4行のスクリプトですが、呼び出すファイルにJSONPを指定するだけで、Ajaxが使えるようになるのです。

JSONPとは?
JSONPの前に、JSONを説明します。

JSONとは、JavaScript Object Notation の略で、JavaScriptで使いやすいデータ形式のことです。一般的にXMLよりも軽量で、JavaScriptから使いやすいデータ形式です。

簡単な例はこいうったデータ形式です。
{
"name":"ダイエット商品",
"discription":"10日で10キロやせる脅威のダイエット",
"price":980
}

直接JavaScriptのデータ構造体に入れることができるので、処理が簡単になります。

これを拡張したのがJSONPとなります。

JSONPは、このJSONにプロシジャーコールを追加したものです。

データ形式はこうなります。
hogehoge ({
"name":"ダイエット商品",
"discription":"10日で10キロやせる脅威のダイエット",
"price":980
});

この形式に見覚えがありませんか?

appendChildとJSONPを使ったAjax
先ほどのJSONPは、そのまま関数の呼び出しとして使えます。

つまり、JSONPで作成された関数呼び出しのスクリプトをappendChildによって動的にロードすることによって、Ajaxを実現するのです。

手順をまとめるとこういうことになります。
1.Ajaxの起動アクションが発生
2.スクリプトエレメントを作成
3.エレメントのsrcにJSONPのファイルを指定
4.エレメントを追加(appendChild)
5.追加されたエレメントが実行される
6.エレメント内のJSONPが関数を呼び出す
7.呼び出された関数にJSONデータが引き渡される
8.呼び出された関数でデータを処理(表示)する
9.ページの情報が更新される

このような仕組みになります。

簡易スクリプトではこうなります。

function Ajax_start(){
var scriptTag = document.createElement('script');
scriptTag.type = 'text/javascript';
scriptTag.src = ファイル名;
document.body.appendChild(scriptTag);};
}

function ajax_callback( obj ){
document.write('name:'+ table->{'name'});
document.write('discription:'+ table->{'discription'});
}

JSONPのファイル
ajax_callback({ "name":"test_name", "discription":"test_discriptio" });

流れはこんな感じになります。

コールバック関数とJSONP
appendChildとJSONPを使ったAjaxのポイントは、コールバック関数を使用して、取得したデータをコールバック関数に呼び戻すことにあります。

そのため、JSONPの作成方法をいろいろ変えるだけで、関数を呼び出すだけでなく、その他の処理を読み込んだスクリプトエレメントに足すこともできます。

例えば、JSONPのファイル中にこんなことを書いてみましょう
================================================================
ajax_callback({ "name":"test_name", "discription":"test_discription" });
document.write("callback Success");
================================================================

scriptタグで呼び込まれたJSONPはブラウザから見るとJavaScriptのコードでしかありませんので、その中にJavaScriptのプログラムを書くこともできます。

JSONPの規格からは外れる使い方ですが・・・


JSONPを提供しているサービスは多数あります。例えば、楽天WEBサービスです。こちらでは、rest、json、SOAP形式での情報取得が可能です。

restとは、XMLでデータを取得し、jsonはJSONP、SOAPはより拡張的な情報のやり取りができる手法です。

Yahoo!デベロッパーネットワークでは、XML形式のみ、Googleでも基本的には、XML形式が主流のようです。

なぜXMLなのかと考えると、JavaScriptはどんなサーバーでも使用できますが、XML形式であるとperlやPHPのようなサーバーアプリケーションが必要になります。

ある程度知識のある人を対象とするには、JSONPを公開せず、XMLだけでよいのかも知れません。



ブックマークに追加する