Prototype-json-tutorial

プロトタイプとJSONチュートリアル

JSONの概要

JSON（JavaScript Object Notation）は、軽量のデータ交換形式です。

• JSONは人間にとって読み書きが簡単です。
• JSONはマシンにとって簡単に解析および生成できます。
• JSONはJavaScriptプログラミング言語のサブセットに基づいています。
• JSONはWeb上のAPIで特に使用されており、AjaxリクエストのXMLの高速な代替手段です。
• JSONは、完全に言語に依存しないテキスト形式です。

プロトタイプ1.5.1以降のバージョンは、JSONエンコードおよび解析サポートを備えています。

JSONエンコード

プロトタイプは、エンコードのために以下の方法を提供します-

注-少なくともprototype.jsのバージョン1.6がインストールされていることを確認してください。

S.No.	Method & Description
1.	Number.toJSON() 指定された数値のJSON文字列を返します。
2.	String.toJSON() 指定された文字列のJSON文字列を返します。
3.	Array.toJSON() 指定された配列のJSON文字列を返します。
4.	Hash.toJSON() 指定されたハッシュのJSON文字列を返します。
5.	Date.toJSON() 日付をJSON文字列に変換します（JSONで使用されるISO形式に従います）。
6.	Object.toJSON() 指定されたオブジェクトのJSON文字列を返します。

エンコードする必要があるデータのタイプが不明な場合、最善の方法はObject.toJSONを使用することです-

var data = {name: 'Violet', occupation: 'character', age: 25 };
Object.toJSON(data);

これは、次の結果を生成します-

'{"name": "Violet", "occupation": "character", "age": 25}'

さらに、カスタムオブジェクトを使用している場合は、_Object.toJSON_で使用される独自のtoJSONメソッドを設定できます。 たとえば-

var Person = Class.create();
Person.prototype = {
   initialize: function(name, age) {
      this.name = name;
      this.age = age;
   },
   toJSON: function() {
      return ('My name is ' + this.name +
         ' and I am ' + this.age + ' years old.').toJSON();
   }
};
var john = new Person('John', 49);
Object.toJSON(john);

これは、次の結果を生成します-

'"My name is John and I am 49 years old."'

JSONの解析

JavaScriptでは、JSONの解析は通常、JSON文字列のコンテンツを評価することによって行われます。 プロトタイプはこれに対処するためにlink：/prototype/prototype_string_evaljson [String.evalJSON]を導入しています。 たとえば-

var d='{ "name":"Violet","occupation":"character" }'.evalJSON();
d.name;

これは、次の結果を生成します-

"Violet"

AjaxでJSONを使用する

AjaxでJSONを使用するのは非常に簡単です。 トランスポートのresponseTextプロパティでlink：/prototype/prototype_string_evaljson [String.evalJSON]を呼び出すだけです-

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var json = transport.responseText.evalJSON();
   }
});

あなたのデータが信頼できないソースから来た場合、それを必ずサニタイズしてください-

new Ajax.Request('/some_url', {
   method:'get',
   requestHeaders: {Accept: 'application/json'},
   onSuccess: function(transport) {
      var json = transport.responseText.evalJSON(true);
   }
});