今回は、XML と JSON を JS で変換する方法をお届けします。XML と JSON を JS で変換する際の 注意事項 は何ですか?
開発中に XML と JSON が相互に変換されることがあり、それらを JS で使用する必要があるため、インターネットでたくさん検索しましたが、便利なものはどれも手足が欠けているか、言葉で何を表現していないかのどちらかでした。つまり、それは非常に不合理であり、非常に決断力のあるものなので、自分で実装してください。
JSON と XML の違いの比較
1. 定義の概要
(1).XML 定義
電子ドキュメントに構造 A を与えるために使用される拡張マークアップ言語 (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 の利点と欠点
<1>。
<2> XML の欠点
A. XML ファイルは巨大で、ファイル形式が複雑で、送信に帯域幅が消費されます
B. サーバーとクライアントの両方が XML を解析するために大量のコードを消費する必要があります。サーバーとクライアントのコードを変更する必要があるため、非常に複雑で保守が困難です。
C. クライアント側の異なるブラウザ間で XML を解析する方法に一貫性がなく、多くのコードを繰り返し記述する必要があります。サーバー側とクライアント側で XML を解析するには、より多くのリソースと時間がかかります。
(2). JSON の利点と欠点
<1>。JSON の利点: A. データ形式は比較的シンプルで、圧縮されており、帯域幅をほとんど消費しません。 ;
B. 簡単な解析、クライアント側 JavaScript は eval() を通じて JSON データを簡単に読み取ることができます
C. ActionScript、C、C#、ColdFusion、Java、JavaScript、Perl、PHP、Python、Ruby を含む複数の言語をサポートします。および他のサーバー サーバー側の解析を容易にするための言語を終了します。
D. PHP の世界では、PHP のサーバー側オブジェクトの後に、PHP-JSON と JSON-PHP を直接呼び出すことが望ましいです。配列などは、クライアントのアクセスと抽出に便利な JSON 形式を直接生成できます。 E. JSON 形式はサーバー側のコードで直接使用できるため、サーバー側とクライアントでのコード開発の量が大幅に簡素化されます。タスクは変更されず、保守が簡単です。
<2>. JSON の欠点
A. XML 形式ほど普及も広くも使用されておらず、XML ほど汎用性も高くありません
B. Web サービスにおける JSON 形式の推進は次のとおりです。まだ初期段階にあります。
XML と JSON を Javascript に、または Javascript から変換します
まず呼び出し例を見てみましょう:
<viewport id="menuPane" layout="border">
<panel region="center" border="0" layout="border">
<tbar>
<toolbar text="XXXX">
<menu>
<text text="11">
</text>
<text text="22">
</text>
<text text="33">
</text>
</menu>
</toolbar>
<toolbar text="XXXX">
<menu>
<text text="44">
</text>
<text text="55">
</text>
<menu>
<text text="6 6">
</text>
</menu>
<text text="77">
</text>
</menu>
</toolbar>
</tbar>
</panel>
</viewport>
var xmlParser = new XmlToJson();
var json = xmlParser.parse(xml);
console.log( JSON.stringify(json) );
var jsonParser = new JsonToXml();
var xml = jsonParser.parse(json);
console.log( xml );ログイン後にコピー
XML から JSON への変換:
function XmlToJson() {
}
XmlToJson.prototype.setXml = function(xml) {
if(xml && typeof xml == "string") {
this.xml = document.createElement("p");
this.xml.innerHTML = xml;
this.xml = this.xml.
getElementsByTagName
("*")[0];
}
else if(typeof xml == "object"){
this.xml = xml;
}
};
XmlToJson.prototype.getXml = function() {
return this.xml;
};
XmlToJson.prototype.parse = function(xml) {
this.setXml(xml);
return this.convert(this.xml);
};
XmlToJson.prototype.convert = function(xml) {
if (xml.nodeType != 1) {
return null;
}
var obj = {};
obj.xtype = xml.nodeName.toLowerCase();
var nodeValue = (xml.textContent || "").replace(/(\r|\n)/g, "").replace(/^\s+|\s+$/g, "");
if(nodeValue && xml.childNodes.length == 1) {
obj.text = nodeValue;
}
if (xml.attributes.length > 0) {
for (var j = 0; j < xml.attributes.length; j++) {
var attribute = xml.attributes.item(j);
obj[attribute.nodeName] = attribute.nodeValue;
}
}
if (xml.childNodes.length > 0) {
var items = [];
for(var i = 0; i < xml.childNodes.length; i++) {
var node = xml.childNodes.item(i);
var item = this.convert(node);
if(item) {
items.push(item);
}
}
if(items.length > 0) {
obj.items = items;
}
}
return obj;
};ログイン後にコピー
JSON から XML への変換:
function JsonToXml() {
this.result = [];
}
JsonToXml.prototype.spacialChars = ["&","<",">","\"","'"];
JsonToXml.prototype.validChars = ["&","<",">",""","'"];
JsonToXml.prototype.toString = function(){
return this.result.join("");
};
JsonToXml.prototype.replaceSpecialChar = function(s){
for(var i=0;i<this.spacialChars.length;i++){
s=s.replace(new RegExp(this.spacialChars[i],"g"),this.validChars[i]);
}
return s;
};
JsonToXml.prototype.appendText = function(s){
s = this.replaceSpecialChar(s);
this.result.push(s);
};
JsonToXml.prototype.appendAttr = function(key, value){
this.result.push(" "+ key +"=\""+ value +"\"");
};
JsonToXml.prototype.appendFlagBeginS = function(s){
this.result.push("<"+s);
};
JsonToXml.prototype.appendFlagBeginE = function(){
this.result.push(">");
};
JsonToXml.prototype.appendFlagEnd = function(s){
this.result.push("</"+s+">");
};
JsonToXml.prototype.parse = function(json){
this.convert(json);
return this.toString();
};
JsonToXml.prototype.convert = function(obj) {
var nodeName = obj.xtype || "item";
this.appendFlagBeginS(nodeName);
var arrayMap = {};
for(var key in obj) {
var item = obj[key];
if(key == "xtype") {
continue;
}
if(item.constructor == String) {
this.appendAttr(key, item);
}
if(item.constructor == Array) {
arrayMap[key] = item;
}
}
this.appendFlagBeginE();
for(var key in arrayMap) {
var items = arrayMap[key];
for(var i=0;i<items.length;i++) {
this.convert(items[i]);
}
}
this.appendFlagEnd(nodeName);
};ログイン後にコピー
推奨読書:
Json を解析する方法とは何ですか
JS が json を判断する方法とは何ですか
JSONP の原則とケース分析の詳細な説明
以上がXMLとJSONをJS間で変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
