jquery 파싱 - JavaScript를 사용하여 메모리 내 XML 문서 생성




string how (5)

XML을 서버 백엔드로 보내야하는 웹 응용 프로그램을 만들고 있습니다. 클라이언트 측에서 메모리 내 XML 문서를 작성하고 싶지만 XML 처리 루틴을 사용하여 셀 수없이 많은 문자열을 함께 추가하고 싶습니다. jQuery가 나를 도울 수 있기를 바랍니다.

자바 스크립트로이 (장난감) XML 문서를 생성해야한다고 가정 해 보겠습니다.

<report>
    <submitter>
        <name>John Doe</name>
    </submitter>
    <students>
        <student>
            <name>Alice</name>
            <grade>80</grade>
        </student>
        <student>
            <name>Bob</name>
            <grade>90</grade>
        </student>
    </students>
</report>

시작하려면 "보고서"루트를 사용하여 XML 문서 개체를 만들어야합니다. 나는 이것들 중 하나가 가까워 야한다고 가정하고 있지만 그 중 어느 것도 제대로 작동하지 않는다. 그리고 / 또는 객체를 올바르게 사용하는 방법을 알 수 없다.

function generateDocument1()
{
    var report = $('<report></report>');
    return report;
}

function generateDocument2()
{
    var report = document.implementation.createDocument(null, "report", null);

    return new XMLSerializer().serializeToString(report);   
}

function createXmlDocument(string)
{
    var doc;
    if (window.DOMParser)
    {
        parser = new DOMParser();
        doc = parser.parseFromString(string, "application/xml");
    }
    else // Internet Explorer
    {
        doc = new ActiveXObject("Microsoft.XMLDOM");
        doc.async = "false";
        doc.loadXML(string); 
    }
    return doc;
}

function generateDocument3()
{
    var report = createXmlDocument('<report></report>');

    return report;
}

이제 요소를 만들고 추가하려고합니다. 어떻게해야합니까? 나는 그것이 다음과 같이 상상한다.

function generateReportXml()
{
    // Somehow generate the XML document object with root
    var report = /*???*/;

    // Somehow create the XML nodes
    var submitter = /*???*/;
    var name = /*???*/;

    // Somehow append name to submitter, and submitter to report
    submitter.append(name); /*???*/
    report.append(submitter); /*???*/

    // ... append the rest of the XML

    return report;
}

어떤 아이디어?


Answers

노트 :

$.createElement = function(name)
{
  return $('<'+name+' />');
};

jquery는 소문자로 요소를 생성합니다. $("<topMenu />")$("<topmenu />") 동일한 요소를 만듭니다. <topmenu />


나는 Ariel Flesler의 XMLWriter 생성자 함수를 처음부터 XML을 생성하기위한 좋은 시작이라고 생각했다.

http://flesler.blogspot.com/2008/03/xmlwriter-for-javascript.html

function test(){    
   // XMLWriter will use DOMParser or Microsoft.XMLDOM
   var v = new  XMLWriter();
   v.writeStartDocument(true);
   v.writeElementString('test','Hello World');
   v.writeAttributeString('foo','bar');
   v.writeEndDocument();
   console.log( v.flush() );
}

결과

<?xml version="1.0" encoding="ISO-8859-1" standalone="true" ?>
<test foo="bar">Hello World</test>

몇 가지주의 사항은 문자열을 이스케이프 처리하지 않고 구문이 코요테 ++를 못 생길 수 있습니다.


JSON을 고려해 보셨습니까? 개체를 사용하여 데이터를 저장할 수 있습니다. 그런 다음 JSON.stringify(obj); 사용할 수 있습니다 JSON.stringify(obj); 서버로 보냅니다.

간단한 예

var obj = new student('Alice',80);

function student(a,b){
  this.name=a;
  this.grade=b;
}

function sendToServer(){
  var dataString = JSON.stringify(obj);
  //the HTTP request
}

두 번째 방법은 좋은 방법입니다. 그것은 XML 문서로 작업하도록 설계되었습니다. 일단 문서 객체가 생성되면, 표준 XML DOM 조작 메소드를 사용하여 전체 문서를 생성하십시오.

// creates a Document object with root "<report>"
var doc = document.implementation.createDocument(null, "report", null);

// create the <submitter>, <name>, and text node
var submitterElement = doc.createElement("submitter");
var nameElement = doc.createElement("name");
var name = doc.createTextNode("John Doe");

// append nodes to parents
nameElement.appendChild(name);
submitterElement.appendChild(nameElement);

// append to document
doc.documentElement.appendChild(submitterElement);

이것은 약간 장황 해 보이지만 XML 문서를 작성하는 올바른 방법입니다. jQuery는 실제로 XML 문서를 구성하지 않지만 innerHTML 속성을 사용하여 HTML 문자열이 주어진 경우 DOM을 구문 분석하고 재구성합니다. 이러한 접근 방식의 문제점은 XML의 태그 이름이 <table> 또는 <option> 과 같은 HTML의 태그 이름과 충돌 할 때 결과를 예측할 수 없다는 것입니다. (편집 : 1.5 이후 jQuery.parseXML() 실제로 XML 문서를 구성하므로 이러한 문제는 피할 수 있습니다.

verboseness를 줄이려면 작은 도우미 라이브러리를 작성하거나 jQuery 플러그인을 작성하여 문서를 작성하십시오.

재귀 적 접근법을 사용하여 XML 문서를 만드는 빠르고 쉬운 해결책이 있습니다.

// use this document for creating XML
var doc = document.implementation.createDocument(null, null, null);

// function that creates the XML structure
function Σ() {
    var node = doc.createElement(arguments[0]), text, child;

    for(var i = 1; i < arguments.length; i++) {
        child = arguments[i];
        if(typeof child == 'string') {
            child = doc.createTextNode(child);
        }
        node.appendChild(child);
    }

    return node;
};

// create the XML structure recursively
Σ('report',
    Σ('submitter',
        Σ('name', 'John Doe')
    ),
    Σ('students',
        Σ('student',
            Σ('name', 'Alice'),
            Σ('grade', '80')
        ),
        Σ('student',
            Σ('name', 'Bob'),
            Σ('grade', '90')
        )
    )
);

보고:

<report>​
    <submitter>​
        <name>​John Doe​</name>​
    </submitter>​
    <students>​
        <student>​
            <name>​Alice​</name>​
            <grade>​80​</grade>​
        </student>​
        <student>​
            <name>​Bob​</name>​
            <grade>​90​</grade>​
        </student>​
    </students>​
</report>​

예제보기


방금이 JavaScript 코드를 작성했습니다 ( DOM 조작을 위해 Prototype 사용).

var require = (function() {
    var _required = {};
    return (function(url, callback) {
        if (typeof url == 'object') {
            // We've (hopefully) got an array: time to chain!
            if (url.length > 1) {
                // Load the nth file as soon as everything up to the
                // n-1th one is done.
                require(url.slice(0, url.length - 1), function() {
                    require(url[url.length - 1], callback);
                });
            } else if (url.length == 1) {
                require(url[0], callback);
            }
            return;
        }
        if (typeof _required[url] == 'undefined') {
            // Haven't loaded this URL yet; gogogo!
            _required[url] = [];

            var script = new Element('script', {
                src: url,
                type: 'text/javascript'
            });
            script.observe('load', function() {
                console.log("script " + url + " loaded.");
                _required[url].each(function(cb) {
                    cb.call(); // TODO: does this execute in the right context?
                });
                _required[url] = true;
            });

            $$('head')[0].insert(script);
        } else if (typeof _required[url] == 'boolean') {
            // We already loaded the thing, so go ahead.
            if (callback) {
                callback.call();
            }
            return;
        }

        if (callback) {
            _required[url].push(callback);
        }
    });
})();

용법:

<script src="prototype.js"></script>
<script src="require.js"></script>
<script>
    require(['foo.js','bar.js'], function () {
        /* Use foo.js and bar.js here */
    });
</script>

요지 : http://gist.github.com/284442 .





javascript jquery xml