JSで相互変換XMLとJSONを実現する方法

7857 ワード

开発の中で时にはXMLとJSONが互いに転换することに出会って、JSの中で使うことを要求して、ネット上で多く探して、意外にもすべて使いやすくて、腕が欠けて足が少なくて、あるいは言叶が意に达しないで、あまりにも天理がなくて、思い切って自分で1つを実现します.
JSONとXMLの違い比較
1.定義の説明
(1).XML定義
拡張タグ言語(Extensible Markup Language,XML)は、電子ファイルを構造的にタグ付けするタグ言語であり、データをタグ付けしたり、データ型を定義したりすることができ、ユーザーが自分のタグ言語を定義できるソース言語である.XMLはDTD(document type definition)ドキュメントタイプ定義を使用してデータを整理する.フォーマットが統一され、プラットフォームと言語にまたがり、すでに業界公認の基準となっている.XMLは標準的な汎用タグ言語(SGML)のサブセットであり,Web伝送に非常に適している.XMLは、アプリケーションまたはベンダーとは独立した構造化データを記述および交換するための統一的な方法を提供する.
(2).JSON定義
JSON(JavaScript Object Notation)は軽量レベルのデータ交換フォーマットで、読みやすく、書きやすい特性を備えています.異なるプラットフォーム間でデータ交換が可能です.JSONは互換性が高く、言語テキスト形式から完全に独立しているとともに、C言語のような習慣(C,C++,C#,Java,JavaScript,Perl,Pythonなどを含む)システムの動作も備えている.これらの特性はJSONを理想的なデータ交換言語にした.JSONは、JavaScript Programming Language、Standard ECMA-2623 rd Edition-December 1999のサブセットに基づいている.
2.XMLとJSONのメリットとデメリット
(1).XMLの長所と短所
<1>.XMLの利点A.フォーマットが統一され、基準に合致する.B.他のシステムとのリモートインタラクションが容易で、データ共有が便利である.
<2>.XMLの欠点A.XMLファイルは膨大で、ファイルフォーマットは複雑で、伝送は帯域幅を占めている.B.サーバ側とクライアント側はXMLを解析するために大量のコードを必要とし、サーバ側とクライアントコードが異常に複雑になり、メンテナンスしにくくなる.C.クライアントの異なるブラウザ間でXMLを解析する方法が一致せず、多くのコードを繰り返し書く必要がある.D.サーバ側とクライアントがXMLを解析するのに多くのリソースと時間がかかります.
(2).JSONのメリットとデメリット
<1>.JSONの利点:A.データフォーマットは比較的に簡単で、読み書きしやすくて、フォーマットはすべて圧縮して、占有帯域幅は小さいです;
B.解析が容易で、クライアントJavaScriptは簡単にeval()を通じてJSONデータの読み取りを行うことができる.
C.ActionScript、C、C#、ColdFusion、Java、JavaScript、Perl、PHP、Python、Rubyなどのサーバー側言語を含む多種の言語をサポートし、サーバー側の解析に便利である.
D.PHPの世界では、すでにPHP-JSONとJSON-POPが現れており、PHPシーケンス化されたプログラムに偏って直接呼び出し、PHPサーバー側のオブジェクト、配列などは直接JSONフォーマットを生成することができ、クライアントのアクセス抽出を容易にする.
E.JSONフォーマットは直接サーバー側コードに使用できるため、サーバー側とクライアントのコード開発量を大幅に簡素化し、任務を遂行しても変わらず、メンテナンスが容易である.
<2>.JSONの欠点
A.XMLフォーマットがこんなに普及していないのは人の心に深く入り込んでいて、喜用が広くて、XMLほど汎用性がありません.
B.JSONフォーマットは現在、Webサービスで普及しているのはまだ初級段階である.
JavascriptでのXMLとJSONの相互変換
呼び出し例を見てみましょう.
 
  

   
       
           
               
                   
                   

                   
                   

                   
                   

               

           

           
               
                   
                   

                   
                   

                   
                       
                       

                   

                   
                   

               

           

       

   


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("div");
        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|
)/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         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(" };
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    this.convert(items[i]);
  }
 }
 this.appendFlagEnd(nodeName);
};

以上、JavascriptでXMLとJSONの相互変換を実現するために整理しましたが、javascriptの学習に役立つことを願っています.
XMLとJSONの相互変換に興味のある方は、オンラインツールも参考にしてください.
オンラインXML/JSON相互変換ツール
オンラインXMLフォーマット/圧縮ツール