我正在开发一个需要将 XML 发送到服务器后端的 Web 应用程序。我想在客户端的内存中构建一个 XML 文档，但使用 XML 操作例程，而不是将无数字符串附加在一起。我希望 jQuery 可以帮助我。

假设我需要用 JavaScript 生成这个(玩具)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;
}

有什么想法吗？

最佳答案

第二种方法似乎是个不错的选择。它旨在处理 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 中的标签名称与 HTML 中的标签名称(例如 <table>)发生冲突时或 <option> ，那么结果可能是不可预测的。 (编辑:从 1.5 开始就有了 jQuery.parseXML()，它确实实际构建了一个 XML 文档，从而避免了这些问题——仅用于解析。)

为了减少冗长，写一个小的帮助库，或者一个 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>​

See example

关于javascript - 使用 JavaScript 在内存中生成 XML 文档，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3191179/