Generieren Sie XML-Dokumente im Speicher mit JavaScript

Arbeite ich an einer Web-Anwendung, die senden muss, um XML zu einem server-backend. Ich möchte zu bauen, die ein XML-Dokument im Speicher auf der client-Seite, sondern über XML-manipulation Routinen, anstelle von Anhängen unzählige Saiten zusammen. Ich hoffe, dass jQuery mir helfen können.

Sagen wir mal ich brauche zu generieren, diese (toy) XML-Dokument mit JavaScript:

<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>

Starten, muss ich eine Art von XML-Dokument-Objekt mit dem "report" - Stamm. Ich nehme an, einer von diesen sollte in der Nähe sein, aber keiner von Ihnen arbeiten ganz rechts, und/oder ich kann nicht ganz herausfinden, wie, um das Objekt richtig:

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;
}

Möchte ich nun erstellen und anfügen von Elementen. Wie mache ich das? Ich vorstellen, es ist so etwas wie dieses:

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;
}

Irgendwelche Ideen?

InformationsquelleAutor der Frage Shaggy Frog | 2010-07-07

Ohne Berücksichtigung, ob Sie sollte Verwendung der jQuery-erstellen von XML -, sind hier einige Ideen auf wie Sie könnte es tun:

//Simple helper function creates a new element from a name, so you don't have to add the brackets etc.
$.createElement = function(name)
{
    return $('<'+name+' />');
};

//JQ plugin appends a new element created from 'name' to each matched element.
$.fn.appendNewElement = function(name)
{
    this.each(function(i)
    {
        $(this).append('<'+name+' />');
    });
    return this;
}

/* xml root element - because html() does not include the root element and we want to 
 * include <report /> in the output. There may be a better way to do this.
 */
var $root = $('<XMLDocument />');

$root.append
(
    //one method of adding a basic structure
    $('<report />').append
    (
        $('<submitter />').append
        (
            $('<name />').text('John Doe')
        )
    )
    //example of our plugin
    .appendNewElement('students')
);

//get a reference to report
var $report = $root.find('report');

//get a reference to students
var $students = $report.find('students');
//or find students from the $root like this: $root.find('report>students');

//create 'Alice'
var $newStudent = $.createElement('student');
//add 'name' element using standard jQuery
$newStudent.append($('<name />').text('Alice'));
//add 'grade' element using our helper
$newStudent.append($.createElement('grade').text('80'));

//add 'Alice' to <students />
$students.append($newStudent);

//create 'Bob'
$newStudent = $.createElement('student');
$newStudent.append($('<name />').text('Bob'));
$newStudent.append($.createElement('grade').text('90'));

//add 'Bob' to <students />
$students.append($newStudent);

//display the markup as text
alert($root.html());

Ausgabe:

<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>

InformationsquelleAutor der Antwort rath

Der zweite Ansatz scheint ein guter Weg zu gehen. Es wurde entwickelt, um die Arbeit mit XML-Dokumenten.
Sobald Sie das Dokument-Objekt erstellt wurde, verwenden Sie die standard-XML-DOM-manipulation-Methoden zu konstruieren, die das gesamte Dokument.

//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);

Mag dies ein wenig ausführlich aber ist der richtige Weg zum erstellen des XML-Dokuments. jQuery eigentlich nicht zu konstruieren, die jedem XML-Dokument, sondern nur stützt sich auf die innerHTML Eigenschaft zu analysieren und rekonstruieren den DOM gegeben, ein HTML-string. Das problem bei diesem Ansatz ist, dass, wenn die tag-Namen in XML kollidieren mit tag-Namen in HTML wie <table> oder <option>dann sind die Ergebnisse unvorhersehbar sein kann.
(EDIT: seit 1.5 gibt es jQuery.parseXML() die hat eigentlich erstellen eines XML-Dokuments und vermeidet so diese Probleme — für die Analyse nur.)

Zur Senkung der verboseness schreiben Sie eine kleine helper-Bibliothek, oder vielleicht auch ein jQuery-plugin zu bauen das Dokument.

Hier ist eine quick-and-dirty-Lösung zum erstellen eines XML-Dokuments mit einem rekursiven Ansatz.

//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')
        )
    )
);

Gibt:

<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>

Siehe Beispiel

InformationsquelleAutor der Antwort Anurag

4

Hinweis:
```
$.createElement = function(name)
{
  return $('<'+name+' />');
};
```
jquery erstellt Elemente im unteren Fall $("<topMenu />") und $("<topmenu />") schafft gleiche Elemente <topmenu />

InformationsquelleAutor der Antwort Matveev Dmitriy
2

Habe ich gefunden Ariel Flesler die XMLWriter-Konstruktor-Funktion, um einen guten start für das erstellen von XML von Grund auf neu (im Speicher), nehmen Sie einen Blick auf diese

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

Beispiel
```
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() );
}
```
Ergebnis
```
<?xml version="1.0" encoding="ISO-8859-1" standalone="true" ?>
<test foo="bar">Hello World</test>
```
Ein paar Vorsichtsmaßnahmen, es nicht die escape-strings und kann die syntax bekommen coyote++ hässlich.

InformationsquelleAutor der Antwort Alex Nolasco
1

Haben Sie als JSON? Speichern Sie die Daten mithilfe von Objekten. Dann könnten Sie JSON.stringify(obj); an und sendet an den server.

einem einfachen Beispiel
```
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
}
```
InformationsquelleAutor der Antwort qw3n

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.