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进行数据交互。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现的XML与JSON互转功能详解 - Python技术站
微信扫一扫 
支付宝扫一扫 