JavaScript の json_json 解析に関する詳細なコード-jsチュートリアル-php.cn

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

簡単な例:

js コード

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

 
function showJSON() { 
var user = 
{ 
"ユーザー名":"アンディ ", 
"年齢":20, 
"情報": { "電話番号": "123456", "携帯電話": "98765"}, 
"住所": 
[ 
 {"都市":"北京","郵便番号":"222333"}, 
{"都市":"ニューヨーク","郵便番号":"555666"} 
] 
 

alert(user.username); 
alert(user.info.cellphone); 
alert(user.address[0].city) ; 
alert (user.address[0].postcode); 
} 

 

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

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

js コード

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

function showJSON() { 
var user = 
{ 
"username":"andy", 
"年齢": 20, 
"情報": { "電話": "123456", "携帯電話": "98765"}, 
"住所": 
[ 
{"都市":" beijing", "postcode":"222333"}, 
{"city":"newyork","postcode":"555666"} 
] 
} 

alert(user.ユーザー名); 
アラート(ユーザー.情報.携帯電話); 
アラート(ユーザー.アドレス[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.year = 年 
this.color = 色; ; 
} 

 
eval を使用して JSON 文字をオブジェクトに変換できます 

js コード 

コードをコピー

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

function myEval() { var str = '{ "name": "Violet", "occupation": "character " }'; var obj = eval('(' str ')'); alert(obj.toJSONString()); }

 
または parseJSON( ) メソッド 

js コード

コードをコピー

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

function myEval() { var str = '{ "名前": "バイオレット", "職業": "キャラクター" }'; var obj = str.parseJSON(); .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(); 
alert(myobj.name); 🎜>Prototype-1.5.1.js は JSON メソッド String.evalJSON() を提供します。json.js は使用できません。上記のメソッドを変更してください 

js コード

コードをコピーします

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

function jsonResponse(originalRequest) {
alert(originalRequest.responseText); var myobj = originalRequest.responseText.evalJSON(true);
alert(myobj.name)

;
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 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")); 🎜>e.printStackTrace(); 
} 
response.getWriter().print("{ "名前": "バイオレット", "職業": "キャラクター" }"); >
 
 も使用できます 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(); append("名前", "バイオレット") 
.append( "職業", "開発者") 
.append("年齢", new Integer(22)); 
System.out.println( resultJSON.toString()); 
} catch (JSONException e) { 
e.printStackTrace(); 
response.getWriter().print(resultJSON.toString()); >} 

js コード
 
コードをコピー

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

関数 jsonResponse(originalRequest) {
alert(originalRequest.responseText) ;
var myobj =originalRequest.responseText.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 サービスを提供できます。

コードをコピー

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

 
<フルネーム>ショーン・ケリー 
SKコンサルティング 
 
kelly@seankelly.biz 
kelly@seankelly.tv 
 
 1 214 555 1212 
 1 214 555 1213 
 1 214 555 1214 
 
1234 Main St 
Springfield, TX 78080-1216 
5678 Main St 
Springfield, TX 78080-1316 
 
http://seankelly.biz/ 
http://seankelly.tv/

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

复制代代码如下:

 
{ 
"fullname": "Sean Kelly", 
"org": "SK Consulting", 
"emailaddrs": [ 
{"type": "work", "value ": "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"} 
], 
"アドレス": [ 
{"タイプ": "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 も同様です。主に、JSON の方がより簡潔で、冗長性がより少なくなります。 JSON ウェブサイトポイントでは、JSON プロトコルが厳密に説明されており、現在はそのようになっています。各 JSON 文には、このようなオブジェクトが記述されており、そのオブジェクトには、次のものが含まれます。

、JSON バージョンはより高いレベルであり、682 バイトのスペースしか使用しませんが、XML バージョンは 744 バイトのスペースを必要とします。 >XML 対比 JSON: ローカル送信
XMLHttpRequest オブジェクトを使用すると、AJAX ベースのアプリケーションから XML および JSON ファイルを取得できます。 🎜>复制代

代码如下:

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')[0];

var firstAddr = addrsElem.getElementsByTagName('address')[0];
var addrText = firstAddr.firstChild;
var addrValue = addrText.nodeValue;
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 ファイルは常に単一の名前付きプロパティを持つオブジェクトになります。、このプロパティはオブジェクトのタイプを識別します。

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 を適用する喜びを体験していただければ幸いです。