JavaScript の読み取りと書き込み json example_javascript スキル

JSON (JavaScript Object Notation) は、xml よりも軽量なシンプルなデータ形式です。 JSON はネイティブ JavaScript 形式です。つまり、JavaScript での JSON データの処理には特別な API やツールキットは必要ありません。

JSON のルールは単純です。オブジェクトは、「名前/値」ペアの順序付けされていないコレクションです。オブジェクトは「{」（左括弧）で始まり「}」（右括弧）で終わります。各「名前」の後には「:」 (コロン) が続き、「名前と値」のペアは「,」 (カンマ) で区切られます。具体的な詳細については、http://www.json.org/json-zh.html を参照してください。

簡単な例:

js コード

コードをコピーします コードは次のとおりです:

function showJSON() {

var user =

{

"ユーザー名":"アンディ",

"年齢":20,

"情報": { "電話": "123456", "携帯電話" : "98765"} ,

"住所":

[

{"都市":"北京","郵便番号":"222333"},

{" city":"newyork","postcode":"555666"}

]

}

alert(user.username)
;
alert(user.age);

alert(user.info.cellphone);

alert(user.address[0].city); (user.address[ 0].postcode);

}


これは、ユーザー名、年齢、情報、住所などの属性を持つユーザー オブジェクトを表します。

JSON を使用してデータを単純に変更することもできます。上記の例を変更します

js コード

コードをコピー コードは次のとおりです:

function showJSON() {

var user =

{

"username" :"アンディ ",

"年齢":20,

"情報": { "電話": "123456", "携帯電話": "98765"},

"住所 ":

[

{"都市":"北京","郵便番号":"222333"},

{"都市":"ニューヨーク" ,"郵便番号 ":"555666"}

]

}

alert(user.username);

alert(user.age); 🎜>
alert(user.info.cellphone);

alert(user.address[0].city);

alert(user.address[0].postcode);

user.username = "Tom";

alert(user.username)

}


JSON は json.js パッケージを提供します。ダウンロード http://www.json.org/json.js インポート後は、object.toJSONString() を使用して JSON データに変換するだけです。

js コード

コードをコピー コードは次のとおりです: 関数showCar() {

var carr = new Car("Dodge", "Coronet R/T", 1968, " yellow");

alert(carr.toJSONString()); 🎜>
}

関数 Car(メーカー、モデル、年式、色) {

this.make = make

this.model = モデル; >
this.year = year;

this.color = color

}


eval を使用して JSON 文字をオブジェクトに変換できます。 >
js コード

コードをコピー

コードは次のとおりです。 function myEval( ) { var str = '{ "名前": "バイオレット", "職業": "キャラクター" }'

var obj = eval('(' str ')') ;

alert(obj.toJSONString());


または parseJSON() メソッド

js コード

コードをコピーします


コードは次のとおりです:

function myEval() { var str = '{ "名前": "バイオレット" , "職業": "キャラクター" }'; var obj = str.parseJSON();

alert(obj.toJSONString()) ;

}


以下では、プロトタイプを使用して JSON ajax の例を記述します。

最初にサーブレット (私のサーブレットは servlet.ajax.JSONTest1.java) を書き、文を書きます

Java コード

コードをコピー


コードは次のとおりです。

response.getWriter().print("{ /"name/": /"Violet/", /"occupation/ ": /"character/" }"); ページに ajax リクエストを書き込みますjs コード

コードをコピーします


コードは次のとおりです:

function sendRequest() {

var url = "/MyWebApp/JSONTest1";

var mailAjax = new Ajax.Request(

url,

{

メソッド: 'get',

onComplete: jsonResponse

}

); 🎜>
関数 jsonResponse(originalRequest) {

alert(originalRequest.responseText);

var myobj =originalRequest.responseText.parseJSON(); .name);

}


prototype-1.5.1.js には JSON メソッド String.evalJSON() が用意されており、json.js Method
js コード

コードをコピー

コードは次のとおりです。 function jsonResponse (originalRequest) { alert(originalRequest.responseText);

var myobj =originalRequest.responseText.evalJSON(true); >

}


JSON は Java jar パッケージも提供します http://www.json.org/java/index.html API も非常に単純です。ここに例を示します

JavaScript にリクエスト パラメータを追加します

js コード

コードをコピーします


コードは次のとおりです:

function sendRequest() { var carr = new Car("Dodge", "Coronet R/T", 1968, " yellow"); var pars = "car = carr.toJSONString(); var url = "/MyWebApp/JSONTest1";

var mailAjax = new Ajax.Request(

url,
{

メソッド: 'get'、

パラメータ: pars、

onComplete: jsonResponse

}

) ;

}


JSON リクエスト文字列を使用すると、単純に JSONObject を生成して解析し、サーブレットを変更して JSON 処理を追加できます (json.jar を使用する必要があります)

java コード




コードをコピー

コードは次のとおりです:


private void doService (HttpServletRequest リクエスト、HttpServletResponse レスポンス) throws IOException {

String s3 = request.getParameter("car"); try { JSONObject jsonObj = new JSONObject(s3) ;

システム .out.println(jsonObj.getString("モデル"));

System.out.println(jsonObj.getInt("年")); >} catch (JSONException e) {

e.printStackTrace();

}

response.getWriter().print("{ /"name/": / "Violet/", /"occupation /": /"character/" }");

}


JSONObject を使用して JSON 文字列を生成し、サーブレットを変更することもできます

java コード




コードをコピー


コードは次のとおりです:

private void doService(HttpServletRequest request, HttpServletResponse response) throws IOException {

String s3 = request.getParameter("car");

try { JSONObject jsonObj = new JSONObject( s3); System.out.println (jsonObj.getString("model"));

System.out.println(jsonObj.getInt("year"));

} catch (JSONException e) {

e.printStackTrace();

JSONObject resultJSON = new JSONObject(); {

resultJSON.append("名前" , "バイオレット")

.append("職業", "開発者")

.append("年齢", new Integer(22));

System.out.println(resultJSON.toString());

} catch (JSONException e) {

e.printStackTrace();

}

応答 .getWriter().print(resultJSON.toString());

}


js コード




コードをコピーします


コードは次のとおりです:


function jsonResponse(originalRequest) {

alert (originalRequest.responseText);

var myobj = originalRequest.evalJSON(true);

alert(myobj.age);

}
参考

http://www.json.org/js.html

http://www.blogjava.net/Jkallen/archive/2006/03/28/37905 .html

http://www.json.org/

http://www.prototypejs.org/learn/json

http://www.json .org/java/index.html

http://www.ibm.com/developerworks/cn/web/wa-ajaxintro10/index.html

JSON を使用する
JSON も使用するこれは JavaScript オブジェクト表記法であり、データを記述するための軽量の構文です。 JSON は JavaScript 言語のサブセットであるため、エレガントです。次に、これがなぜそれほど重要なのかを見ていきます。まず、JSON と XML の構文を比較してみましょう。

JSON と XML は両方とも、構造化メソッドを使用してデータを記述します。たとえば、アドレス帳アプリケーションは、XML 形式でアドレス カードを生成するための Web サービスを提供できます。

コードをコピー コードは次のとおりです。フォロー：

＆lt;？xmlバージョン= '1.0' encoding = 'utf-8'？＆lt; card＆gt;
SK コンサルティング

kelly@seankelly.biz

'home' pref='1'>kelly@seankelly.tv

1 214 555 1212
1 214 555 1213

address type='work' format='us'>1234 Main St
Springfield, TX 78080-1216

5678 Main St
テキサス州スプリングフィールド 78080-1316

;/アドレス>
http://seankelly.tv/

カード>

JSON を使用します。形式は次のとおりです:




コードをコピーします


コードは次のとおりです:

{

"fullname": "Sean Kelly", "org": "SK Consulting", "emailaddrs": [ {"type": "work", "値": "kelly@seankelly.biz"}, {"type": "home", "pref": 1, "value": "kelly @seankelly.tv"} ], "電話": [

{"タイプ": "職場", "pref": 1, "値": " 1 214 555 1212"},

{"タイプ": "FAX", "値": " 1 214 555 1213"},
{"タイプ": "モバイル", "値": " 1 214 555 1214"}
] ,
"アドレス": [
{ "type": "work", "format": "us",
"value": "1234 Main StnSpringfield, TX 78080-1216"},
{"type": "home", "format" : "us",
"value": "5678 Main StnSpringfield, TX 78080-1316"}
],
"urls": [
{"type": "work", "value ": "http://seankelly.biz/"},
{"type": "home", "value": "http://seankelly.tv/"}
]
}


ご覧のとおり、JSON には XML と同様に、構造化されたネストされたデータ要素があります。 JSON も XML と同様にテキストベースです。どちらも Unicode を使用します。 JSON と XML はどちらも読みやすいです。主観的には、JSON の方がクリーンで冗長性が低くなります。 JSON WEB サイトでは JSON 構文を厳密に説明しており、それが現状です。それは本当に単純な小さな言語です! XML は確かにドキュメントのマークアップに適していますが、JSON はデータ対話には理想的な形式です。各 JSON ドキュメントは、ネストされたオブジェクト、配列、文​​字列、数値、ブール値、または null 値を含むオブジェクトを記述します。

これらのアドレス カードのサンプル コードでは、JSON バージョンはより軽量であり、必要なスペースは 682 バイトのみですが、XML バージョンは 744 バイトのスペースを必要とします。これは実質的な節約ではありませんが。実際の利点は解析プロセスから得られます。

XML と JSON: ステータスの喪失
XML ファイルと JSON ファイルは、XMLHttpRequest オブジェクトを使用して AJAX ベースのアプリケーションから取得できます。通常、インタラクション コードは次のとおりです:

コードをコピー


コードは次のとおりです:


var req = new XMLHttpRequest ();

req.open("GET", "http://localhost/addr?cardID=32", /*async*/true); req.onreadystatechange = myHandler; req.send(/*パラメータなし*/null);
WEB サーバーが応答すると、指定したハンドラー関数 (myHandler 関数) が複数回呼び出され、トランザクションを早期に終了したり、進行状況バーを更新したりする機会が提供されます。通常、これは Web リクエストが完了した後にのみ機能します。その時点で、返されたデータを使用できます。

XML バージョンのアドレス カード データを処理するために、myHandler のコードは次のとおりです。

コードをコピーします コードは次のとおりです:

function myHandler() {
if (req.readyState == 4 /*complete*/) {
// 住所フィールドを更新します最初の住所を含むフォーム内
var addrField = document.getElementById('addr');
var root = req.responseXML
var addrsElem = root.getElementsByTagName('addresses');
var firstAddr = addrsElem.getElementsByTagName(' address')[0];
var addrText = hitAddr.firstChild;
addrField.value = addrValue; XML ドキュメントを解析する必要がないことに注意してください。XMLHttpRequest オブジェクトは自動的に解析され、responseXML で DOM ツリーが利用可能になります。 responseXML 属性を使用すると、getElementsByTagName メソッドを呼び出してドキュメントのアドレス部分を見つけることができます。最初のメソッドを使用してアドレス部分を見つけることもできます。次に、getElementsByTagName を再度呼び出して、住所部分の最初の住所要素を見つけることができます。これにより、ドキュメントの最初の DOM 子ノード (テキスト ノード) が取得され、そのノードの値 (必要な住所) が取得されます。最後に、結果をフォーム フィールドに表示できます。

これは確かに簡単な作業ではありません。ここで、JSON を使用してもう一度試してください:

コードをコピーします

コード function myHandler() { if (req.readyState == 4 /*complete*/) { var addrField = document.getElementById('addr') ; var Card = eval('(' req.responseText ')');

addrField.value =card.addresses[0].value;

}

最初に行うことは、JSON 応答を解析することです。ただし、JSON は JavaScript のサブセットであるため、eval 関数を呼び出すことで、JavaScript 独自のコンパイラを使用して解析できます。 JSON の解析には 1 行しかかかりません。さらに、JSON 内のオブジェクトの操作は、他の JavaScript オブジェクトの操作と同様です。これは、DOM ツリーを介して操作するよりも明らかに簡単です。たとえば、
card.addresses[0].value は最初の番地、「1234 Main Stb &」
card.addresses[0].type はaddress Type、「work」
card.addresses[1] は自宅の住所オブジェクトです
card.fullname はカードの名前、「Sean Kelly」
さらに詳しく見ると、次のことがわかります。 XML 形式のドキュメントには少なくともカードというフォロワー要素があります。これは JSON には存在しません。なぜですか? おそらく、Web サービスにアクセスするための JavaScript を開発している場合は、何が必要かをすでに知っているでしょう。ただし、これを JSON で使用できます。
{"card": {"fullname": ...}}

この手法を使用すると、JSON ファイルは常に 1 つの名前で始まります。 オブジェクトは始まります。オブジェクトの種類を識別するプロパティを使用します。

JSON は高速で信頼性がありますか?

JSON は軽量で小さなドキュメントを提供し、JSON は JavaScript での使用が容易です。 XMLHttpRequest は XML ドキュメントを自動的に解析しますが、JSON ファイルは手動で解析する必要があります。しかし、JSON の解析は XML の解析より遅いのでしょうか?著者は、XMLHttpRequest を使用して XML を解析し、何千回もテストを繰り返して JSON を解析しました。その結果、JSON の解析は XML よりも 10 倍高速になりました。速度が最も重要な要素であるデスクトップ アプリケーションとして AJAX を見ると、JSON が優れていることは明らかです。

もちろん、AJAX プログラムのデータを生成するためにサーバー側を常に制御できるわけではありません。サーバーの代わりにサードパーティのサーバーを使用して、XML 形式の出力を提供することもできます。また、サーバーが JSON を提供する場合、実際にそれを使用してもよろしいですか?

コード内で注目に値するのは、応答テキストを eval に直接渡していることです。サーバーを制御している場合は、これを行うことができます。そうでない場合、悪意のあるサーバーによってブラウザが危険な動作を実行する可能性があります。このような場合は、JavaScript で記述されたコードを使用して JSON を解析することをお勧めします。幸いなことに、これはすでに存在します。

解析と言えば、Python 愛好家なら、JSON が JavaScript のサブセットであるだけでなく、Python のサブセットでもあることに気づくかもしれません。 Python で JSON を直接実行することも、代わりに安全な JSON 解析を使用することもできます。 JSON.org Web サイトには、一般的に使用される多くの JSON パーサーがリストされています。

サーバーサイド JSON

ここまでは、クライアント ブラウザーで実行される AJAX ベースの Web アプリケーションでの JSON の使用に焦点を当ててきたかもしれません。当然ですが、まずサーバー側でJSON形式のデータを生成する必要があります。幸いなことに、JSON の作成や他の既存データの JSON への変換は非常に簡単です。 TurboGears などの一部の WEB アプリケーション フレームワークには、JSON 出力のサポートが自動的に含まれます。

さらに、商用 WEB サービス プロバイダーも JSON に注目しています。 Yahoo は最近、多くの JSON ベースの Web サービスを作成しました。 Yahoo のさまざまな検索サービス、フルフィルメント プラン、del.icio.us、高速道路交通サービスも JSON 出力をサポートしています。他の主要な Web サービス プロバイダーも JSON のサポートを追加することは間違いありません。

概要

JSON の賢い点は、JSON が JavaScript と Python のサブセットであるため、使いやすくなり、AJAX に効率的なデータ対話が提供されることです。 XML よりも解析が速く、使いやすいです。 JSON は現在、「Web 2.0」の最も強力な代弁者になりつつあります。標準のデスクトップ アプリケーションであろうと Web アプリケーションであろうと、すべての開発者はそのシンプルさと利便性にますます注目しています。バズワード準拠、Web 2.0 ベース、AJAX 対応のアジャイル開発に JSON を適用する喜びを体験していただければ幸いです。