JavaScript实现的XML与JSON互转功能详解

近年来，JSON已经成为了web开发中常用的数据格式，而XML在一些特定领域也有着广泛应用。在web开发中，我们有时需要将XML数据转换为JSON格式，或者将JSON格式转换为XML数据，这就需要用到JavaScript实现的XML和JSON互转功能。

什么是XML

XML是可扩展标记语言（Extensible Markup Language）的简称。它是一种由W3C推荐的标记语言，用于描述数据结构，其本质是一种文本格式。与HTML类似，XML通过标签来描述数据。XML文档中包含的元素结构具有可扩展性，允许用户自定义标签。这使得XML可以在各种系统和平台之间传递和共享数据。

下面是一个简单的XML示例：

<?xml version="1.0" encoding="UTF-8"?>
<book>
  <title>JavaScript: The Good Parts</title>
  <author> Douglas Crockford</author>
  <price>20.00</price>
</book>

什么是JSON

JSON是JavaScript Object Notation的简称，它是一种轻量级的数据交换格式，常用于web开发中传递数据。JSON数据格式以键值对的形式表示，使用大括号{}和方括号[]来表示对象和数组。

下面是一个简单的JSON示例：

{
  "title": "JavaScript: The Good Parts",
  "author": "Douglas Crockford",
  "price": 20.00
}

JavaScript实现XML与JSON互转

JavaScript实现XML和JSON的互转功能，需要使用两个内置对象：XMLHttpRequest和DOMParser。XMLHttpRequest用于处理XML数据，DOMParser可以将XML数据转换为DOM对象。

将XML转换为JSON

将XML转换为JSON，首先需要将XML数据解析为DOM对象，然后通过遍历DOM对象，将其转换为JavaScript对象，最后使用JSON.stringify将JavaScript对象转换为JSON字符串。

以下是将上面XML示例转换为JSON的代码：

let xml = `<?xml version="1.0" encoding="UTF-8"?>
<book>
  <title>JavaScript: The Good Parts</title>
  <author> Douglas Crockford</author>
  <price>20.00</price>
</book>`;

let parser = new DOMParser();
let xmlDoc = parser.parseFromString(xml, "text/xml");

let book = {};
let bookElement = xmlDoc.getElementsByTagName("book")[0];
for (let i = 0; i < bookElement.childNodes.length; i++) {
  let node = bookElement.childNodes[i];
  if (node.nodeType === 1) {
    book[node.nodeName] = node.childNodes[0].nodeValue;
  }
}

let json = JSON.stringify(book);
console.log(json);

输出结果：

{
  "title": "JavaScript: The Good Parts",
  "author": " Douglas Crockford",
  "price": "20.00"
}

将JSON转换为XML

将JSON转换为XML，需要先使用JSON.parse将JSON字符串解析为JavaScript对象，然后通过创建DOM对象，将JavaScript对象转换为DOM对象，最后使用XMLSerializer将DOM对象转换为XML字符串。

以下是将上面JSON示例转换为XML的代码：

let json = `{
  "title": "JavaScript: The Good Parts",
  "author": "Douglas Crockford",
  "price": 20.00
}`;

let book = JSON.parse(json);

let xmlDoc = document.implementation.createDocument(null, "book", null);

let bookElement = xmlDoc.getElementsByTagName("book")[0];

for (let key in book) {
  let element = xmlDoc.createElement(key);
  let text = xmlDoc.createTextNode(book[key]);
  element.appendChild(text);
  bookElement.appendChild(element);
}

let serializer = new XMLSerializer();
let xmlString = serializer.serializeToString(xmlDoc);
console.log(xmlString);

输出结果：

<?xml version="1.0" encoding="utf-8"?>
<book>
  <title>JavaScript: The Good Parts</title>
  <author>Douglas Crockford</author>
  <price>20</price>
</book>

示例说明

下面给出两个示例说明。

示例一

XML数据：

<?xml version="1.0" encoding="UTF-8"?>
<company>
  <employee>
    <name>张三</name>
    <age>24</age>
    <position>工程师</position>
  </employee>
  <employee>
    <name>李四</name>
    <age>30</age>
    <position>经理</position>
  </employee>
</company>

将XML数据转换为JSON：

let xml = `<?xml version="1.0" encoding="UTF-8"?>
<company>
  <employee>
    <name>张三</name>
    <age>24</age>
    <position>工程师</position>
  </employee>
  <employee>
    <name>李四</name>
    <age>30</age>
    <position>经理</position>
  </employee>
</company>`;

let parser = new DOMParser();
let xmlDoc = parser.parseFromString(xml, "text/xml");

let company = {};
let companyElement = xmlDoc.getElementsByTagName("company")[0];
let employees = [];
for (let i = 0; i < companyElement.childNodes.length; i++) {
  let node = companyElement.childNodes[i];
  if (node.nodeType === 1 && node.nodeName === "employee") {
    let employee = {};
    for (let j = 0; j < node.childNodes.length; j++) {
      let childNode = node.childNodes[j];
      if (childNode.nodeType === 1) {
        employee[childNode.nodeName] = childNode.childNodes[0].nodeValue;
      }
    }
    employees.push(employee);
  }
}
company.employees = employees;

let json = JSON.stringify(company);
console.log(json);

输出结果：

{
  "employees": [
    {
      "name": "张三",
      "age": "24",
      "position": "工程师"
    },
    {
      "name": "李四",
      "age": "30",
      "position": "经理"
    }
  ]
}

示例二

JSON数据：

{
  "employees": [
    {
      "name": "张三",
      "age": "24",
      "position": "工程师"
    },
    {
      "name": "李四",
      "age": "30",
      "position": "经理"
    }
  ],
  "companyName": "ABC公司"
}

将JSON数据转换为XML：

let json = `{
  "employees": [
    {
      "name": "张三",
      "age": "24",
      "position": "工程师"
    },
    {
      "name": "李四",
      "age": "30",
      "position": "经理"
    }
  ],
  "companyName": "ABC公司"
}`;

let company = JSON.parse(json);

let xmlDoc = document.implementation.createDocument(null, "company", null);

let companyElement = xmlDoc.getElementsByTagName("company")[0];

let employeesElement = xmlDoc.createElement("employees");

for (let i = 0; i < company.employees.length; i++) {
  let employee = company.employees[i];
  let employeeElement = xmlDoc.createElement("employee");
  let nameElement = xmlDoc.createElement("name");
  let nameText = xmlDoc.createTextNode(employee.name);
  nameElement.appendChild(nameText);
  employeeElement.appendChild(nameElement);

  let ageElement = xmlDoc.createElement("age");
  let ageText = xmlDoc.createTextNode(employee.age);
  ageElement.appendChild(ageText);
  employeeElement.appendChild(ageElement);

  let positionElement = xmlDoc.createElement("position");
  let positionText = xmlDoc.createTextNode(employee.position);
  positionElement.appendChild(positionText);
  employeeElement.appendChild(positionElement);

  employeesElement.appendChild(employeeElement);
}

companyElement.appendChild(employeesElement);

let companyNameElement = xmlDoc.createElement("companyName");
let companyNameText = xmlDoc.createTextNode(company.companyName);
companyNameElement.appendChild(companyNameText);
companyElement.appendChild(companyNameElement);

let serializer = new XMLSerializer();
let xmlString = serializer.serializeToString(xmlDoc);
console.log(xmlString);

输出结果：

<?xml version="1.0" encoding="UTF-8"?>
<company>
  <employees>
    <employee>
      <name>张三</name>
      <age>24</age>
      <position>工程师</position>
    </employee>
    <employee>
      <name>李四</name>
      <age>30</age>
      <position>经理</position>
    </employee>
  </employees>
  <companyName>ABC公司</companyName>
</company>

总结

JavaScript实现XML和JSON的互转功能，可以使用XMLHttpRequest和DOMParser将XML转换为JavaScript对象，然后使用JSON.stringify将JavaScript对象转换为JSON字符串；使用JSON.parse将JSON字符串转换为JavaScript对象，然后创建DOM对象将JavaScript对象转换为DOM对象，最后使用XMLSerializer将DOM对象转换为XML字符串。在实际应用中，根据所需数据的格式，选择XML或JSON进行数据交互。