HTTPサーバーとWeb開発

102. JSONとは？

JSON(JavaScript Object Notation)とは、JavaScriptの派生したサブセットであり、
言語というよりも、データ交換を行なうためのデータ記述形式のことである。
下記のようにJSONのデータ形式は、非常に軽量でシンプルかつ理解しやすい
データフォーマットである。 

 { 
   "SHNAME" : "Ｃカセット編集ビデオ" , 
   "SHTANK" : "85,000",
   "SHSCOD" : "0002" , 
 }

記述方法は、 "名前" : "値" といった形式で記述され、カンマ ( , )でデータを区切る。
これだけでは、単なるJSONのデータを定義したに過ぎないので何の役にも立たない。
まずJSONとは、データ交換を行なうためのデータ形式であると理解して下さい。
それでは、実際にどのようにしてJSONが使用されるか簡単なサンプルで説明しよう。

■ JSON サンプル使用例

【 実行サンンプル：SAMPLE_JSON.HTM 】

実行サンンプル：SAMPLE_JSON.HTM

  1. 入力フォーム：商品コードに「NV-CF1」と入力します。
  2. 入力フォームからフォーカスを外します。
  3. 商品コードに対応した内容が商品名、単価、品種コード に表示されます。
【 SAMPLE_JSON.JSON の内容 】

SAMPLE.JSONは、"名前" : "値" の形式で配列データが定義されており、それに加え
JavaScriptの関数を [ callback関数 ] 呼び出す形式にする必要がある。
ここでは callback という関数を呼び出すように記述する。 

callback({"SHNAME" : "Ｃカセット編集ビデオ", "SHTANK" : "85,000", "SHSCOD" : "0002"});

JSONファイルの記述はこれだけである。

【 SANPMLE_JSON.HTM の内容 】

前述 「101.クロスドメインとは」 で説明したように、 異なるドメインのデータは Ajax(XMLHttpRequest)では
取得できない。
それではどのように異なるドメインのデータを取得するのか？
下記のようにすれば簡単に取得できるのである。

JavaScriptの外部ファイル記述を <script src =〜></script> 指定するように記述すれば、
異なるドメインのJavaScriptファイル(SAMPLE_JSON.JSON)をクロスドメインの制約を受けずに
取得することができる。 

  <html>
  <head>
  <meta http-equiv="Content-Language" content="ja">
  <meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
  <title>JSONサンプル 商品データ取得</title>
  <script language="JavaScript">
    /* JSONファイル取得 */
    function getJsonDta(val){
       :
      var script  = document.createElement("script");
      script.type = "text/javascript";
      script.src  = "SAMPLE_JSON.JSON";
      document.body.appendChild(script);
       :

SAMPLE_JSON.HTMの <script src="〜"></script> タグの srcプロパティー記述で 

<script src="http://(異なるドメイン)/SAMPLE_JSON.JSON"></script>
(異なるドメイン)に別ドメインまたはIPアドレスを指定)

と指定した<script>タグを動的に生成し追加する。
これで実際に追加した時点で、異なるドメインの SAMPLE_JSON.JSON ファイルの取得を行う。 

    /* JSONデータより商品ﾃﾞｰﾀを各表示領域にｾｯﾄする */
    function callback(jData){
       :
      for (key in jData) {
        document.getElementById(key).innerText=jData[key];
      }
       :

JavaScript外部ファイルで読み込まれた SAMPLE_JSON.JSON の callback関数が実行され
データを取得し SAMPLE_JSON.HTM に書き込みを行う。 

       :
        }
      </script>
      <body>
      <h1>JSONサンプル 商品データ取得</h1>
      <hr>
      <p>商品コードを入力し フォーカスが離れた後、商品データの内容が表示されます。
      
      <form name="frmDsphead">
      <p>商品 ｺｰﾄﾞ  
      <input type="text" name=SHCODE id="SHCODE" value=""
         onChange="getJsonDta(this.value);" maxlength="10" size="12" alt="10A">
      <span> 該当ｺｰﾄﾞ ： NV-CF1 </span></p>
      </form>
      
      <table class="MAIN">
        <tr>
          <th width="100">商  品  名</th>
          <td width="200" ><span id="SHNAME">商品名称</span></td>
        </tr>
        <tr>
          <th>単       価</th>
          <td align="right"><span id="SHTANK">単価</span></td>
        </tr>
        <tr>
          <th>品種コード</th>
          <td><span id="SHSCOD">品種コード</span></td>
        </tr>
      </table>
      <hr>
      <input type="button" class="HAND" value="閉じる" onClick="self.close();">
      </body>
      </html>

このように、JSON方式でクロスドメインの制約を受けずにJSONデータを使用して
簡単に異なるドメインのサーバーよりデータを受信することが可能となる。