집 > 기사 > 웹 프론트엔드 > JS 간에 XML과 JSON을 변환하는 방법

JS 간에 XML과 JSON을 변환하는 방법

php中世界最好的语言원래의: 2018-04-25 09:40:112665검색

이번에는 JS로 XML과 JSON을 변환하는 방법을 알려드리겠습니다. JS로 XML과 JSON을 변환할 때 주의사항은 무엇인가요?

개발 중에 가끔 XML과 JSON이 서로 변환되어 JS에서 사용해야 합니다. 인터넷에서 많이 검색했지만 유용한 것은 모두 팔이나 다리가 없거나 단어가 무엇인지 표현하지 못했습니다. 너무 불합리하고 결정적이어서 직접 구현해 보세요.

JSON과 XML의 차이점 비교

1. 정의 소개

(1).XML 정의

XML(Extensible Markup Language)은 전자 문서에 구조 A를 제공하는 데 사용됩니다. 데이터를 표시하고 데이터 유형을 정의하는 데 사용할 수 있는 고유한 마크업 언어입니다. 사용자가 자신의 마크업 언어를 정의할 수 있는 소스 언어입니다. XML은 DTD(문서 유형 정의) 문서 유형 정의를 사용하여 데이터를 구성합니다. 형식은 크로스 플랫폼 및 언어로 통합되어 있으며 오랫동안 업계에서 인정받는 표준이 되었습니다.
XML은 SGML(Standard Generalized Markup Language)의 하위 집합이며 웹 전송에 매우 적합합니다. 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을 구문 분석하는 방식이 일관성이 없으며 많은 코드를 반복적으로 작성해야 합니다. 서버 측과 클라이언트 측에서 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-PHP가 등장했으며, PHP 서버측 객체를 직접 호출하는 것이 바람직합니다. 배열 등은 JSON 형식을 직접 생성할 수 있어 클라이언트 액세스 및 추출에 편리합니다.

E. JSON 형식은 서버 측 코드에서 직접 사용할 수 있으므로 서버 측 및 클라이언트의 코드 개발 양이 크게 단순화됩니다. 측면에 있으며 작업은 변경되지 않고 유지 관리가 쉽습니다.

2cc198a1d5eb0d3eb508d858c9f5cbdb. JSON의 단점

A. XML 형식만큼 널리 사용되지도 않고 널리 사용되지도 않습니다.

B. JSON 형식은 현재 홍보 초기 단계입니다. 웹 서비스에서.

XML 및 JSON을 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 = ["&","<",">","\"","&#39;"];
JsonToXml.prototype.validChars = ["&","<",">",""","&#39;"];
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);
};

이 글을 읽으셨을 것 같습니다. 사례 방법을 익힌 후에는 PHP 중국어 웹사이트의 다른 관련 기사를 주목하여 더 흥미로운 내용을 확인하세요!