JavaScript JSON
JavaScript JSON
サーバーに Ajax リクエストを行う場合、2 つの異なる方法でサーバーの応答からデータを取得できます。1 つは XMLHttpRequest オブジェクトの responseXML 屬性を使用して XML 形式のデータにアクセスする方法です。 responseText プロパティは文字列形式のデータにアクセスします?，F(xiàn)在、XML はデータ転送の標(biāo)準(zhǔn)言語ですが、XML を使用するデメリットの 1 つは、XML を解析してページに追加するデータを抽出することが難しいことです。
JSON (JavaScript Object Notation) は、JavaScript Object Notation と呼ばれる軽量のデータ交換形式です。データ転送に JSON を使用する利點の 1 つは、JSON が実際には JavaScript であることです。これは、ECMAScript バージョン 3 の JavaScript オブジェクト リテラル構(gòu)文サブセットに基づくテキスト形式です。これは、responseText を使用してサーバーから JSON データを取得し、JavaScript の eval() メソッドを使用して JSON 文字列を JavaScript オブジェクトに変換できることを意味します。その後、追加の JavaScript を使用すると、処理せずにオブジェクトからデータを簡単に抽出できます。 .ドム。
さらに、ほとんどのプログラミング言語 (C++、C#、ColdFusion、Java、Perl、PHP、Python を含む) 用の JSON ライブラリがあり、これらのライブラリは上記の言語でフォーマットされたデータを JSON フォーマットに変換できます。
XML にクロスプラットフォームおよびクロス言語の利點があることはよく知られていますが、Web サービスに適用されない限り、通常の Web アプリケーションでは、XML が生成されたかどうかに関係なく、開発者が XML 解析の頭脳を発揮することがよくあります。サーバー側(cè)で XML を処理するか、クライアントが JavaScript を使用して XML を解析すると、多くの場合、コードが複雑になり、開発効率が非常に低くなります。実際、ほとんどの Web アプリケーションでは、データを送信するために複雑な XML を必要としません。XML の拡張性によって、多くの Ajax アプリケーションが動的 Web ページを構(gòu)築するために直接 HTML フラグメントを返すことさえあります。 XML を返して解析する場合と比較して、HTML フラグメントを返すとシステムの複雑さは大幅に軽減されますが、ある程度の柔軟性にも欠けます。 XML では、要素、屬性、エンティティ、およびその他の構(gòu)造が使用されます。 JSON はドキュメント形式ではないため、これらの追加の構(gòu)造は必要ありません。 JSON データには名前と値のペア (オブジェクト) または値 (配列) のみが含まれるため、JSON データは同等の XML データよりも占有するスペースが少なく、高速に実行されます。
(1) JSON 構(gòu)文
JSON は 2 つの構(gòu)造で構(gòu)成されます。 。さまざまな言語では、オブジェクト、レコード、構(gòu)造、辭書、ハッシュ テーブル、キー付きリスト、または連想配列として理解されます。オブジェクトは「{」（左括?。─鞘激蓼辍竲」（右括弧）で終わります。各「名前」の後には「:」 (コロン) が続き、「名前と値」のペアは「,」 (カンマ) で區(qū)切られます。
配列 - 値の順序付きリスト。ほとんどの言語では、これは配列として理解されます。配列は「[」 (左括弧) で始まり、「]」 (右括弧) で終わります。値は「,」（カンマ）で區(qū)切ります。
JSON には変數(shù)やその他の制御構(gòu)造がありません。 JSON はデータ転送のみに使用されます。
JSON 構(gòu)文は、顔リテラルと配列リテラルの JavaScript 構(gòu)文に基づいています。リテラルを使用する場合、データ自體は含まれますが、データを生成した式は含まれません。
1. データ型
JSON データ構(gòu)造には、文字、數(shù)値、ブール値 (true/false)、null、オブジェクト、配列のデータ型が含まれます。
JSON 文字列は二重引用符で囲む必要があります。標(biāo)準(zhǔn)の JavaScript エスケープ シーケンスを使用します。したがって、次の文字の前にバックスラッシュを追加します。
JSON の形式は次のとおりです: "(引用符)、b (スペース)、n (改行)、f (フォーム フィード)、r (キャリッジ リターン)、t (水平方向の配置)、u (Unicode 文字に 4 桁を追加)、(バックスラッシュ記號)、/ (スラッシュ記號)
2. オブジェクト リテラル
。JSON ではリテラルを使用してオブジェクトを表現(xiàn)します。複數(shù)のメンバー オブジェクトがある場合は、2 つのオブジェクトの配列を含むオブジェクトとして JSON で表現(xiàn)できます。次のコードは、メンバー オブジェクトを 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 つの関數(shù)を提供します。
toJSONString() メソッドが JavaScript オブジェクトおよび配列定義に追加されました。このメソッドは JavaScript オブジェクトまたは配列を JSON テキストに変換できます。このメソッドを使用するためにオブジェクトまたは配列をリテラルに変換する必要はありません。
parseJSON() メソッドは、JSON テキストからオブジェクトまたは配列を作成できます。
＃
respone.open(“GET”,”classes.txt”,true);
この場合、classes.txt は JSON データ ファイルの名前で、request は XMLHttpRequest オブジェクトを格納するために作成された変數(shù)です。
2. 応答を解析する
サーバーから JSON データを受け入れると、2 つの異なる方法で応答を解析できます。 JavaScript の組み込み関數(shù) 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 テキストに対してのみ機(jī)能し、他の JavaScript は実行しません。この場合、responseText を使用できますが、parseJSON() メソッドを使用して JSON テキスト文字列を JavaScript オブジェクトに変換します。 parseJOSN 関數(shù)にアクセスするには、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 標(biāo)準(zhǔn)の一部です。現(xiàn)在、主流のブラウザは JSON を完全にサポートしています。JSON を使用することで、Ajax を使用する Web2.0 Web サイトにとって、JSON は現(xiàn)時點で最も柔軟で軽量なソリューションです。
JavaScript オブジェクトとしてフォーマットされた JSON
JSON フォーマットは、JavaScript オブジェクトを作成するコードと構(gòu)文的に同じです。
これらは似ているため、JavaScript プログラムは JSON データを JavaScript オブジェクトに簡単に変換できます。
JSON 構(gòu)文ルール
データはキーと値のペアです。
カンマで區(qū)切られたデータ。
中かっこはオブジェクトを保存します
角かっこは配列を保存します
JSONデータ - 1つの名前が1つの値に対応します
JSONデータ形式は、JavaScriptオブジェクトのプロパティと同様に、キーと値のペアです。
キーと値のペアは、フィールド名 (二重引用符で囲まれた)、コロン、その後の値で構(gòu)成されます:
"firstName":"John"
JSON オブジェクト
JSON オブジェクトは中括弧內(nèi)に保存されます。
JavaScript と同様に、オブジェクトは複數(shù)のキーと値のペアを保持できます:
{"firstName":"John", "lastName":"Doe"}
JSON 配列
JSON 配列は角括弧內(nèi)に格納されます。
JavaScript と同様に、配列にはオブジェクトを含めることができます:
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", " lastName ":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
上記の例では、オブジェクト "employees" は配列です。 3 つのオブジェクトが含まれます。
各オブジェクトは従業(yè)員 (姓と名) の記録です。
JSON文字列をJavaScriptオブジェクトに変換します
通常、サーバーからJSONデータを読み込み、Webページにデータを表示します。
簡単にするために、Web ページに JSON 文字列を直接設(shè)定します (JSON チュートリアルを読むこともできます):
まず、文字列は JSON 形式のデータです:
var text = '{ "従業(yè)員" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" } ,' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
次に、JavaScript 組み込み関數(shù) JSON.parse() を使用して文字列を JavaScript オブジェクトに変換します。 :
var obj = JSON .parse(text);
