JavaScript JSON
サーバーに Ajax リクエストを行う場合、2 つの異なる方法でサーバーの応答からデータを取得できます。1 つは XMLHttpRequest オブジェクトの responseXML 属性を使用して XML 形式のデータにアクセスする方法です。 responseText プロパティは文字列形式のデータにアクセスします。現在、XML はデータ転送の標準言語ですが、XML を使用するデメリットの 1 つは、XML を解析してページに追加するデータを抽出することが難しいことです。
JSON (JavaScript Object Notation) は、JavaScript Object Notation と呼ばれる軽量のデータ交換形式です。データ転送に JSON を使用する利点の 1 つは、JSON が実際には JavaScript であることです。これは、ECMAScript バージョン 3 の JavaScript オブジェクト リテラル構文サブセットに基づくテキスト形式です。これは、responseText を使用してサーバーから JSON データを取得し、JavaScript の eval() メソッドを使用して JSON 文字列を JavaScript オブジェクトに変換できることを意味します。その後、追加の JavaScript を使用すると、処理せずにオブジェクトからデータを簡単に抽出できます。 .ドム。
さらに、ほとんどのプログラミング言語 (C++、C#、ColdFusion、Java、Perl、PHP、Python を含む) 用の JSON ライブラリがあり、これらのライブラリは上記の言語でフォーマットされたデータを JSON フォーマットに変換できます。
XML にクロスプラットフォームおよびクロス言語の利点があることはよく知られていますが、Web サービスに適用されない限り、通常の Web アプリケーションでは、XML が生成されたかどうかに関係なく、開発者が XML 解析の頭脳を発揮することがよくあります。サーバー側で XML を処理するか、クライアントが JavaScript を使用して XML を解析すると、多くの場合、コードが複雑になり、開発効率が非常に低くなります。実際、ほとんどの Web アプリケーションでは、データを送信するために複雑な XML を必要としません。XML の拡張性によって、多くの Ajax アプリケーションが動的 Web ページを構築するために直接 HTML フラグメントを返すことさえあります。 XML を返して解析する場合と比較して、HTML フラグメントを返すとシステムの複雑さは大幅に軽減されますが、ある程度の柔軟性にも欠けます。 XML では、要素、属性、エンティティ、およびその他の構造が使用されます。 JSON はドキュメント形式ではないため、これらの追加の構造は必要ありません。 JSON データには名前と値のペア (オブジェクト) または値 (配列) のみが含まれるため、JSON データは同等の XML データよりも占有するスペースが少なく、高速に実行されます。
(1) JSON 構文
JSON は 2 つの構造で構成されます。 。さまざまな言語では、オブジェクト、レコード、構造、辞書、ハッシュ テーブル、キー付きリスト、または連想配列として理解されます。オブジェクトは「{」（左括弧）で始まり「}」（右括弧）で終わります。各「名前」の後には「:」 (コロン) が続き、「名前と値」のペアは「,」 (カンマ) で区切られます。
配列 - 値の順序付きリスト。ほとんどの言語では、これは配列として理解されます。配列は「[」 (左括弧) で始まり、「]」 (右括弧) で終わります。値は「,」（カンマ）で区切ります。
JSON には変数やその他の制御構造がありません。 JSON はデータ転送のみに使用されます。
JSON 構文は、顔リテラルと配列リテラルの JavaScript 構文に基づいています。リテラルを使用する場合、データ自体は含まれますが、データを生成した式は含まれません。
1. データ型
JSON データ構造には、文字、数値、ブール値 (true/false)、null、オブジェクト、配列のデータ型が含まれます。
JSON 文字列は二重引用符で囲む必要があります。標準の JavaScript エスケープ シーケンスを使用します。したがって、次の文字の前にバックスラッシュを追加します。
JSON の形式は次のとおりです: "(引用符)、b (スペース)、n (改行)、f (フォーム フィード)、r (キャリッジ リターン)、t (水平方向の配置)、u (Unicode 文字に 4 桁を追加)、(バックスラッシュ記号)、/ (スラッシュ記号)
2. オブジェクト リテラル
。JSON ではリテラルを使用してオブジェクトを表現します。複数のメンバー オブジェクトがある場合は、2 つのオブジェクトの配列を含むオブジェクトとして JSON で表現できます。次のコードは、メンバー オブジェクトを JOSN テキスト形式で表示します。
{“memeber”:[
{
“name”:”Tom”,
“age”:22,
“country”:”USA”
},
{
“name”:”WangMing”,
“age”:25,
“country”:”China”
}
]
} 3. JSON パーサーを使用する
JSON パーサーを使用して、オブジェクトと配列から JSON テキストを作成したり、JSON テキストからオブジェクトと配列を作成したりできます。 JSON Web サイト www.json.rog/json.js は JSON パーサーを提供しており、次のコードをページの先頭に追加することで使用できます。 JSON パーサーは、toJSONString() と parseJSON() という 2 つの関数を提供します。
toJSONString() メソッドが JavaScript オブジェクトおよび配列定義に追加されました。このメソッドは JavaScript オブジェクトまたは配列を JSON テキストに変換できます。このメソッドを使用するためにオブジェクトまたは配列をリテラルに変換する必要はありません。
parseJSON() メソッドは、JSON テキストからオブジェクトまたは配列を作成できます。
＃
respone.open(“GET”,”classes.txt”,true);
この場合、classes.txt は JSON データ ファイルの名前で、request は XMLHttpRequest オブジェクトを格納するために作成された変数です。
2. 応答を解析する
サーバーから JSON データを受け入れると、2 つの異なる方法で応答を解析できます。 JavaScript の組み込み関数 eval() を使用することも、より安全性を高めるために、代わりに JSON パーサーを使用することもできます。
eval() メソッドは、JavaScript 文字列をパラメータとして受け取ることができ、文字列をオブジェクトまたはコマンド アクションとして変換することもできます。 XMLHttpRequest オブジェクトの responseText プロパティを使用して JSON データをリクエストする場合は、eval() を使用して JSON テキスト文字列を JavaScript オブジェクトに変換します。 JSON 文字列には中括弧が含まれることが多いため、JSON 文字列を括弧で囲み、実行するコマンドではなく評価された式であることを示します。
var jsonResp=request.responseText;
jsonResp=eval(“(”+jsonResp+”)”);
Web サーバーが JSON データとリクエスト ページの両方を提供する場合は、eval() メソッドが適しています。セキュリティが関係する場合は、JSON パーサーが適切です。 JSON パーサーは JSON テキストに対してのみ機能し、他の JavaScript は実行しません。この場合、responseText を使用できますが、parseJSON() メソッドを使用して JSON テキスト文字列を JavaScript オブジェクトに変換します。 parseJOSN 関数にアクセスするには、json.js ファイルへの参照をページに追加する必要があります。
var jsonResp=request.responseText;
jsonResp=jsonResp.parseJSON();
以下は、JavaScript での JSON の簡単な使用法を示す例です。
<script type="text/javascript">
var user =[
{
"name":”shenmiweiyi”,
"QQ":306451129,
"email":”shenmiweiyi@163.com”
"address":
[
{"City":"ZhengZhou","ZipCode":"450000"},
{"City":"BeiJing","ZipCode":"100000"}
]
},
{
"name":”kehao”,
"QQ":254892313,
"email":”kehao@163.com”
"address":
[
{"City":"ShangHai","ZipCode":"200000"},
{"City":"GuangZhou","ZipCode":"510000"}
]
}
]
alert(user[0].name+”的Email是：”user[0].email); //outputs shenmiweiyi的Email是：shenmiweiyi@163.com
alert(user[1].name+”住在：”user[1].address[0].city) //outputs kehao住在：ShangHai
</script> JSON はすでに JavaScript 標準の一部です。現在、主流のブラウザは JSON を完全にサポートしています。JSON を使用することで、Ajax を使用する Web2.0 Web サイトにとって、JSON は現時点で最も柔軟で軽量なソリューションです。
JavaScript オブジェクトとしてフォーマットされた JSON
JSON フォーマットは、JavaScript オブジェクトを作成するコードと構文的に同じです。
これらは似ているため、JavaScript プログラムは JSON データを JavaScript オブジェクトに簡単に変換できます。
JSON 構文ルール
データはキーと値のペアです。
カンマで区切られたデータ。
中かっこはオブジェクトを保存します
角かっこは配列を保存します
JSONデータ - 1つの名前が1つの値に対応します
JSONデータ形式は、JavaScriptオブジェクトのプロパティと同様に、キーと値のペアです。
キーと値のペアは、フィールド名 (二重引用符で囲まれた)、コロン、その後の値で構成されます:
"firstName":"John"
JSON オブジェクト
JSON オブジェクトは中括弧内に保存されます。
JavaScript と同様に、オブジェクトは複数のキーと値のペアを保持できます:
{"firstName":"John", "lastName":"Doe"}
JSON 配列
JSON 配列は角括弧内に格納されます。
JavaScript と同様に、配列にはオブジェクトを含めることができます:
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", " lastName ":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
上記の例では、オブジェクト "employees" は配列です。 3 つのオブジェクトが含まれます。
各オブジェクトは従業員 (姓と名) の記録です。
JSON文字列をJavaScriptオブジェクトに変換します
通常、サーバーからJSONデータを読み込み、Webページにデータを表示します。
簡単にするために、Web ページに JSON 文字列を直接設定します (JSON チュートリアルを読むこともできます):
まず、文字列は JSON 形式のデータです:
var text = '{ "従業員" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" } ,' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
次に、JavaScript 組み込み関数 JSON.parse() を使用して文字列を JavaScript オブジェクトに変換します。 :
var obj = JSON .parse(text);
次のセクション