ＪＳＯＮ形式データ取得テスト (2)──jQuery1.2を使ってJSONデータをクロスドメイン取得

関連エントリイリスト in this Blog

• JSON 関連エントリイ一覧 in this Blog

クロスドメイン対応となったjQuery1.2にて、Fc2ブログデータサーバーからJSONデータを取得した

jQuery1.1.xはクロスドメイン対応となっていなかったので、ブログと異なるドメインにあるJSONデータはマイブログからjQueryを使っては取得出来ませんでした。しかし1.2になってクロスドメイン対応となったので、既に書いたコード(JSON形式データ取得テスト)をより簡単にすることが出来ます。

そこで早速それを試してみました。以下の文章は「JSON形式データ取得テスト」で使用したものと全く同様のもので、ここでFc2ブログのマイファイルサーバーからJSON形式データを取得します。

ここをクリックすると下の文字が変わります。

ここがサーバーからの文字列に入れ替わります。

スクリプト

jQuery1.2適用により、一層簡単になったコードは以下の通りです。ここに打ち消し線部分は、クロスドメイン非対応のjQueryを使わずに、以前に独自に書いたコード部分を示します。jQueryを使うことによってコードはかなり短くなりました。

  //JSONデータを取り出すcallback関数定義
function callback(){
  var x =0, txt ="", obj, obj2;
    //jQueryのObject取得方法を参考に上記のJSON形式の
    //オブジェクトからプロパティを取得した。
  while ( (obj=arguments[x++]) !=null ) {
    for (var key in obj){
      for (var key2 in obj[key])
      txt +="<div>"+key+" : "+key2+" = "+obj[key][key2] + "</div>";
    }
  }
  //以上は全く変わらないが、以下は不要となる。
  $("#result").html(txt);  //折角なのでこの部分もjQueryを利用した
  document.getElementById("result").innerHTML = txt;
  var removeElem = document.getElementById("appendedScript");
  if (removeElem) document.body.removeChild(removeElem);
}

  //jQuery1.2利用
function insertTest(){
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = url;
  s.id = "appendedScript";
  document.body.appendChild(s);
   //↓がクロスドメイン対応jQuery1.2を利用した箇所
   //２番目の引数である関数は特に必要としないのでnull値とした
  $.getScript(fileServerURL,null); 
}

赤いボックスをドラグ＆ドロップするとリサイズ出来ます。

続きを読む

jQueryはどのようにしてクロスドメイン対応を行っているのか？

それを知るには $.getScript() の挙動を知らなければなりません。

そこでFirebugを利用して挙動を追跡し、流れを理解しました。それはおよそ次のようになっていました。全てはjQuery独特のextend関数によって様々な関数が利用されていました。

1. $.getScript()を実行すると、直ぐにget()関数が呼び出される。
2. get()実行の結果、$.ajax()がたった1つの引数を伴って返される。
3. ajax()関数によってどのようなリクエストが行われたのかチェックする。
4. 対象URIが異なるドメインで、かつ目的がスクリプト取得だった場合、ヘッダーにスクリプトタグが追加され、それを使用後には削除する。

以上のように結局の所スクリプトタグをHTMLヘッダー部に挿入し、使用した後にそれを削除している訳で、こうした挙動は以前作成したコード（JSON形式データ取得テスト）におけるクロスドメイン対応方法と全く変わりません。

Sleipnirではajaxを使って取得したデータをうまく挿入出来ない

理由が全く分からないのですが、Sleipnir2ではクリックしてもファイルダーバーからのJSONデータを所定の場所に挿入することが出来ません。一方、Firefox、Opera、IE7では問題なくファイルサーバーからのJSONデータが所定の場所に挿入されます。

Sleipnir2でJSONデータをどうしてうまく読み込めないのか全く原因が分からないので困惑しています。