ホームページ >ウェブフロントエンド >jsチュートリアル >JSONとXMLの違いと応用例
1. 定義の紹介
(1).XML 定義
Extensible Markup Language (XML) は、データをマークしてデータ型を定義するために使用されるマークアップ言語です。ユーザーが独自のマークアップ言語を定義できるソース言語。 XML は、DTD (ドキュメント タイプ定義) ドキュメント タイプ定義を使用してデータを整理します。この形式は、プラットフォームおよび言語に依存せずに統一されており、長い間業界で標準として認識されてきました。
XML は標準一般化マークアップ言語 (SGML) のサブセットであり、Web 送信に非常に適しています。 XML は、アプリケーションやベンダーに依存せずに構造化データを記述および交換するための統一された方法を提供します。
(2).JSON の定義
JSON (JavaScript Object Notation) は、可読性が高く、素早く記述しやすい軽量のデータ交換形式です。異なるプラットフォーム間でのデータ交換が可能です。 JSON は、互換性が高く完全に言語に依存しないテキスト形式を採用しており、C 言語の習慣 (C、C++、C#、Java、JavaScript、Perl、Python などを含む) と同様のシステム動作も備えています。これらの特性により、JSON は理想的なデータ交換言語になります。
JSON は、標準 ECMA-262 第 3 版 - 1999 年 12 月のサブセットである JavaScript プログラミング言語に基づいています。
2. XML と JSON の利点と欠点
(1)。XML の利点と欠点
f35d6e602fd7d0f0edfa6f7d103c1b57。
2cc198a1d5eb0d3eb508d858c9f5cbdb XML の欠点
A. XML ファイルは巨大で、ファイル形式が複雑で、送信に帯域幅が消費されます
B. サーバーとクライアントの両方で大量のコードを消費する必要があります。 XML を解析するため、サーバー側で結果が発生し、クライアント コードが非常に複雑になり、保守が困難になります。
C. クライアント上の異なるブラウザ間で XML を解析する方法に一貫性がなく、多くのコードを繰り返し記述する必要があります。
D. サーバーとクライアントのリソースと時間で XML を解析すると、より多くのコストがかかります。
(2). JSON の利点と欠点
B. 簡単な解析、クライアント側 JavaScript は eval() を通じて JSON データを読み取ることができます。 C. ActionScript、C、C#、ColdFusion、Java、JavaScript、Perl、PHP、Python、Ruby、 etc. サーバーサイド言語はサーバーサイドの解析を容易にする;
D. PHP の世界では、PHP-JSON と JSON-PHP がすでに登場しています。PHP シリアル化後のプログラムは、PHP サーバーサイドで直接呼び出されることが望ましいです。オブジェクト、配列などを直接呼び出すことができます。Generate JSON format を使用すると、クライアントのアクセスと抽出が容易になります
E. JSON 形式はサーバー側のコードで直接使用できるため、サーバーでのコード開発の量が大幅に簡素化されます。側とクライアント側のタスクは変更されず、保守が簡単です。
2cc198a1d5eb0d3eb508d858c9f5cbdb. JSON の欠点
A. XML 形式ほど普及も広くも使用されておらず、XML ほど汎用性も高くありません
B. JSON 形式は現在もまだ有効です。 Web サービス段階に昇進したときの幼少期。
JSON と XML のデータの可読性は基本的に同じです。一方で、JSON と XML の可読性はほぼ同じであり、もう一方では、標準化されたタグ形式の方が可読性が高くなります。
(2)。
XML はもともと非常にスケーラブルであり、JSON にも確かにそれがあります。XML で拡張できて JSON で拡張できないものは何もありません。
(3)。コーディングの難しさ。
XML には Dom4j、JDom などの豊富なエンコード ツールがあり、JSON にも json.org が提供するツールがあります。ただし、ヘルプがなくても、JSON エンコードは明らかに XML よりも簡単に記述できます。 XML はそれほど簡単ではありません。
(4)。解読の難易度。
XML の解析では子ノードと親ノードを考慮する必要があるため、めまいがしますが、JSON の解析の難易度はほぼ 0 です。この時点では、XML が失うものは何もありません。
(5)。 XML は業界で広く使用されていますが、JSON はまだ始まったばかりですが、Ajax の特定の分野では、今後の発展は XML が JSON に取って代わられるはずです。それまでに、Ajax は Ajaj (非同期 Javascript および JSON) になるはずです。 (6)。
JSON と XML にも豊富な解析メソッドがあります。
(7)。
XMLと比較して、JSONはデータサイズが小さく、通信速度が速いです。
(8)。
JSON と JavaScript 間の対話はより便利で、解析と処理が容易になり、より優れたデータ対話が可能になります。
(9)。
JSON は XML よりもデータの記述が少ないです。
(10)。
JSON は XML よりもはるかに高速です。
4. XML と JSON データ形式の比較
(1). 軽量と重量について
軽量と重量は相対的な用語なので、XML の重量は JSON と比較してどの程度であるかが解析に反映されます。現在、DOM と SAX の 2 つの解析方法を使用して設計されています。
.DOM
DOM はデータ交換形式 XML を DOM オブジェクトとして扱い、XML ファイル全体をメモリに読み込む必要があります。この点では JSON と XML の原則は同じですが、XML では親ノードと子ノードを考慮する必要があります。この点に関して、JSON は 2 つの構造で構築されているため、はるかに簡単です: キー/値、キーと値のペアのコレクション;
2cc198a1d5eb0d3eb508d858c9f5cbdb.SAX。
SAX は全体を読み取る必要はありません。解析されたコンテンツは、ドキュメントを入力することで処理できます。これは段階的な解析方法です。プログラムはいつでも解析を終了することができます。このように、大きな文書を少しずつ段階的に表示できるため、SAX は大規模な解析に適しています。現在、これは JSON では不可能です。
JSON と XML の軽量/重量の違いは次のとおりです。
JSON は全体的な解析ソリューションのみを提供し、このメソッドはより少ないデータを解析する場合にのみ良好な結果を達成できます。
XML は段階的な解析スキームを提供します。大規模データ用で、大量のデータの処理に非常に適しています。
(2). データ形式のエンコードと解析の難しさについて
エンコードに関して。
XML と JSON には独自のエンコード ツールがありますが、JSON のエンコードは XML よりも簡単です。ツールを使用しなくても JSON コードを作成できますが、XML と同じように適切なコードを作成するのは少し困難です。 , JSON もテキストベースであり、すべて Unicode エンコーディングを使用しており、データ交換形式の XML と同じくらい読みやすいです。
主観的には、JSON はより明確で冗長性が低くなります。 JSON Web サイトでは、JSON 構文の簡潔ではあるが厳密な説明が提供されています。一般に、XML はドキュメントのマーク付けに適しており、JSON はデータ交換処理に適しています。
分析の観点から。
通常の Web アプリケーションの分野では、サーバー側で XML を生成または処理する場合でも、JavaScript を使用してクライアント側で XML を解析する場合でも、開発者は XML の解析に苦労することが多く、コードが複雑になり、開発効率が非常に低下することがよくあります。 。実際、ほとんどの Web アプリケーションでは、データを送信するために複雑な XML をまったく必要としません。XML が主張するスケーラビリティは、多くの Ajax アプリケーションが動的 Web ページを構築するために直接 HTML フラグメントを返すことさえありません。 XML を返して解析する場合と比較して、HTML フラグメントを返すとシステムの複雑さは大幅に軽減されますが、ある程度の柔軟性にも欠けます。データ交換形式 JSON は、XML や HTML フラグメントよりも優れたシンプルさと柔軟性を提供します。 Web サービス アプリケーションでは、少なくとも現時点では、XML は依然として揺るぎない地位を占めています。
<?xml version="1.0" encoding="utf-8" ?> <country> <name>中国</name> <province> <name>黑龙江</name> <citys> <city>哈尔滨</city> <city>大庆</city> </citys> </province> <province> <name>广东</name> <citys> <city>广州</city> <city>深圳</city> <city>珠海</city> </citys> </province> <province> <name>台湾</name> <citys> <city>台北</city> <city>高雄</city> </citys> </province> <province> <name>新疆</name> <citys> <city>乌鲁木齐</city> </citys> </province> </country>。次のように JSON を使用して中国の一部の省と都市のデータを表します。
var country = { name: "中国", provinces: [ { name: "黑龙江", citys: { city: ["哈尔滨", "大庆"]} }, { name: "广东", citys: { city: ["广州", "深圳", "珠海"]} }, { name: "台湾", citys: { city: ["台北", "高雄"]} }, { name: "新疆", citys: { city: ["乌鲁木齐"]} } ] }エンコーディングの可読性 XML に関して言えば、明らかに利点があります。結局のところ、人間の言語はそのような記述構造に近いのです。 JSON はデータ ブロックに近いため、読むのがさらにわかりにくくなります。ただし、私たちにとって読みにくい言語は機械の読み取りに適しているため、値「黒龍江省」は JSON インデックス country.provinces[0].name を通じて読み取ることができます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/封装Ajax.js" type="text/javascript" charset="utf-8"></script> </head> <body> <select name="provence" id="provence" onchange="chooseP(this.value)"> <option>湖北省</option> </select> <select name="city" id="city" onchange="chooseC(this.value)"> <option>武汉市</option> </select> <select name="area" id="area"> <option>江城区</option> </select> </body> <script> objAJAX.getAjax("get", "xml/Provinces.xml", "", callBackOk, callBackFail, ""); function callBackOk(data) { var provences = data.getElementsByTagName("Province"); /*<Province ID="1" ProvinceName="北京市">北京市</Province> */ for(var i = 0; i < provences.length; i++) { var Potion = document.createElement("option"); //<option><option/> Potion.value = provences[i].getAttribute("ID"); //把id传给value Potion.innerHTML = provences[i].innerHTML; document.getElementById("provence").appendChild(Potion); } } function callBackFail() { alert("服务器出错啦") } //市级联动 function chooseP(id) { objAJAX.getAjax("get", "xml/Cities.xml", "", callBackOkP, callBackFailP, ""); function callBackOkP(data) { document.getElementById("city").innerHTML = ""; //alert( typeof data) var citys = data.getElementsByTagName("City"); //alert(citys.length) /*<City ID="1" CityName="北京市" PID="1" ZipCode="100000">北京市</City>*/ for(var i = 0; i < citys.length; i++){ var Coption = document.createElement("option"); //<option><option/> Coption.value = citys[i].getAttribute("ID"); var PID = citys[i].getAttribute("PID"); if(id == PID) { Coption.innerHTML = citys[i].innerHTML; var dd=Coption.value; document.getElementById("city").appendChild(Coption); } } alert(Cvalue); chooseC(Cvalue); } function callBackFailP() { alert("服务器出错啦") } } //县级联动 function chooseC(id) { objAJAX.getAjax("get", "xml/Districts.xml", "", callBackOkP, callBackFailP, ""); function callBackOkP(data) { document.getElementById("area").innerHTML = ""; //alert( typeof data) var districts = data.getElementsByTagName("District"); //alert(citys.length) /* <District ID="1" DistrictName="东城区" CID="1">东城区</District>*/ for(var i = 0; i < districts.length; i++) { var Xoption = document.createElement("option"); //<option><option/> Xoption.value = districts[i].getAttribute("ID"); var CID = districts[i].getAttribute("CID"); if(id == CID) { Xoption.innerHTML = districts[i].innerHTML; document.getElementById("area").appendChild(Xoption); } } } function callBackFailP() { alert("服务器出错啦") } } </script> </html>