JSON形式データ取得テスト

MyFc2Blogファイルサーバーに送信済みのテキストファイル（callback関数の引数としてJSON形式データを格納）から、データを取得してみる

ここをクリックしてみてください。

すると、この下の行の文字列がサーバーから送られてくる文字列に入れ替わります。

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

一体何をしたのか？

Fc2ブログのデータファイルサーバーに様々なデータを置いておいて、その中から随時データを呼び出してみたいのです。それが可能となれば、各エントリイの参照元一覧を随時更新していくコードを書くことが出来るのではないか、と推測しているためです。

そこでこのエントリイでは、初めて作成してみたJSON形式のデータをファイルサーバに置いて、そこからデータを取り出す実験を行ってみました。

ここでの実験は、IE7、FireFox2及びOpera9で作動を確認しましたが、Sleipnir2で閲覧する場合には、「ActiveXのダウンロードを許可」をOnにしたり、キャッシュや履歴を削除しないとうまく作動しないようです。自動的に当該エントリイのキャッシュを削除するコードを組みたいのですが、その方法が分かりませんので手の打ちようがありません。

▲ToTop

動的にファイルサーバーから取得するJSONデータの形式

取得する形式は或る目的をもって
　　"a":{"a-1":"何やらかんやら"},・・・,"b":{"b-n":"hogehoge"}
としました。

aはMyFc2ブログのエントリイナンバーを、a-1等は参照元エントリイの重複数を、"何やらかんやら"は参照元URIを想定して、こうしたJSON構造にしてみました。

この形式のJSONデータを取得できない限り、当該ブログへの参照元一覧を作ることは出来ないので、こうした構造のJSONデータの取得を試してみたのです。

Javascriptコードについてはこのエントリイの末尾に記しておいて、後ですぐ見られるようにしたいと思います。

ここでの作業の性格

Ajaxなコードを利用した訳ではなく、単にスクリプトタグを動的に挿入しただけです。JavaScriptの外部ファイル読込みを利用してクロスドメインプログラミングを可能にする方法の１つを試してみたかったのです。

ここでは、一方で、動的にインクルードする外部スクリプト内で関数の実行を定義し、他方、呼び出し元HTML内に記述したコード（最終的にこのコードを利用する時には、headタグ内でインクルードするjsファイルの中に書くことになりますが、実験なので当該documentタグ内にスクリプトを記述）内で呼び出す関数を定義し解読させる、という逆転した方法を───この方法はコールバック関数においてはよく使われるようですが、良くは分かっていません。───初めて使ってみました。

JSONP（JavaScript Object Notation with Padding）なるものに一歩でも近づくことが出来るように、学習に方向性を持たせたつもりです。

JSONPなるもの

これについては、様々なサイトを閲覧させていただき、その一端を知ったつもりです。

───JSONP関連サイト───

1. throw Life - 超シンプルなJSONP入門
2. JSON | mg.to
3. snippets from shinichitomita’s journal - ブラウザからJSONで呼び出せるサービス一覧

そもそもJSON形式のデータを提供しているサイトから、データを取得するためのコードはWebサイト上に沢山見つかるのですが、Fc2ブログ内の自分のファイルサーバー（ドメインは異なる）からデータを取得することを試みたいので、JSON形式データを提供するサーバーからのデータ取得は、当面関心外のことであって、JSONに言及した多くのサイトは直接そのままでは参考にならないのでした。

上記関連サイトリスト３を見て、沢山のJSONデータ提供サイトがあることを初めて知った程、これまでJSONとは無縁な世界でコードを書いていましたから、無理もないことなのですが、Ajaxの登場以来、否活用以来、Javascriptの世界は急速に拡大進展していることを改めて知らされました。

▲ToTop

JSONデータを取得するJavascriptコード

上記の1にリストアップしたサイトを大いに参考にさせていただき、また jQuery のextend()メソッドを参考にしてコードを作りました。

JSONデータファイル（ファイル名：jsonTest.js）

callback({
  "1":{
    "text1-1" : "これはサーバーから取得した文字列です。" ,
    "text1-2" : "これもサーバーから取得した文字列です。" ,
    "text1-3" : "更にこれもサーバーから取得した文字列です。" ,
    "text1-4" : "更に更にこれもサーバーから取得した文字列です。"
  },
  "2":{
    "text2-1" : "まだパイプの煙" ,
    "text2-2" : "まだまだパイプの煙" ,
    "text2-3" : "まだまだまだパイプの煙" ,
    "text2-4" : "まだまだまだまだパイプの煙"
  }
});

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

このエントリイ内で記述したJavascriptコード

  //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>";
    }
  }
  document.getElementById("result").innerHTML = txt;
    //上の行でHTML内にcallback()関数の実行結果を挿入した直後に、
    //動的に挿入したscriptタグを削除する。
  var removeElem = document.getElementById("appendedScript");
  if (removeElem) document.body.removeChild(removeElem);
}

  //scriptタグを挿入する
function insertTest(url){
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = url;
  s.id = "appendedScript";
  document.body.appendChild(s);
}

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