xml转json的js代码

XML转JSON是开发过程中常见的问题，有时候需要将后端返回的XML数据转换为前端需要的JSON格式。以下是XML转JSON的JS代码的详细攻略：

一、XML转JSON的原理

XML和JSON是两种不同的数据格式，因此需要编写代码将XML转换为JSON格式。XML数据以标签为基础，有嵌套的结构关系，而JSON数据则以键值对为基础，没有嵌套的结构关系。因此，将XML转成JSON需要把XML中的标签转成JSON的键，将标签中的内容转成JSON的值，最后将所有生成的键值对组成JSON对象。

二、XML转JSON的步骤

1.获取XML对象

首先需要通过XMLHttpRequest获取XML对象，例如：

let xhr = new XMLHttpRequest();

xhr.onload = function() {
  if (xhr.status == 200) {
    let xmlData = xhr.responseXML; //获取XML对象
  }
}
xhr.open('GET', 'example.xml', true);
xhr.send();

2.解析XML对象

通过DOM方式或SAX方式解析XML对象来获取标签名称和标签值，例如使用DOM方式解析XML对象：

let xmlData = xhr.responseXML;
let parser = new DOMParser();
let xmlDoc = parser.parseFromString(xmlData, "text/xml");
let rootElement = xmlDoc.documentElement;

在获取了XML对象之后，需要使用DOMParser对象将XML解析为一个文档对象（Document）。

3.转换JSON对象

解析XML对象后，需要将XML转换为JSON对象，这里举一个简单的例子，比如以下XML文件：

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
  <book category="children">
    <title>The Cat in the Hat</title>
    <author>Dr. Seuss</author>
    <year>1957</year>
  </book>
  <book category="web">
    <title>Learning XML</title>
    <author>Erik T. Ray</author>
    <year>2003</year>
  </book>
</bookstore>

使用以下代码可以将其转换为JSON对象：

function xmlToJson(xml) {
  let obj = {};

  if (xml.nodeType == 1) {
    if (xml.attributes.length > 0) {
      obj["@attributes"] = {};
      for (let i = 0; i < xml.attributes.length; i++) {
        let attribute = xml.attributes.item(i);
        obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
      }
    }
  } else if (xml.nodeType == 3) {
    obj = xml.nodeValue.trim();
  }

  if (xml.hasChildNodes()) {
    for (let i = 0; i < xml.childNodes.length; i++) {
      let item = xml.childNodes.item(i);
      let nodeName = item.nodeName;

      if (typeof(obj[nodeName]) == "undefined") {
        obj[nodeName] = xmlToJson(item);
      } else {
        if (typeof(obj[nodeName].push) == "undefined") {
          let old = obj[nodeName];
          obj[nodeName] = [];
          obj[nodeName].push(old);
        }

        obj[nodeName].push(xmlToJson(item));
      }
    }
  }

  return obj;
}

let json = JSON.stringify(xmlToJson(rootElement));

通过递归遍历XML文件中的所有节点，将XML节点转化为JSON格式的数据。

转换后的JSON对象为：

{
  "bookstore": {
    "book": [
      {
        "@attributes": {
          "category": "children"
        },
        "title": "The Cat in the Hat",
        "author": "Dr. Seuss",
        "year": "1957"
      },
      {
        "@attributes": {
          "category": "web"
        },
        "title": "Learning XML",
        "author": "Erik T. Ray",
        "year": "2003"
      }
    ]
  }
}

三、XML转JSON的示例

以下是针对上述的XML文件，使用XML转JSON的JS代码的完整示例：

let xhr = new XMLHttpRequest();

xhr.onload = function() {
  if (xhr.status == 200) {
    let xmlData = xhr.responseXML;
    let parser = new DOMParser();
    let xmlDoc = parser.parseFromString(xmlData, "text/xml");
    let rootElement = xmlDoc.documentElement;

    function xmlToJson(xml) {
      let obj = {};

      if (xml.nodeType == 1) {
        if (xml.attributes.length > 0) {
          obj["@attributes"] = {};
          for (let i = 0; i < xml.attributes.length; i++) {
            let attribute = xml.attributes.item(i);
            obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
          }
        }
      } else if (xml.nodeType == 3) {
        obj = xml.nodeValue.trim();
      }

      if (xml.hasChildNodes()) {
        for (let i = 0; i < xml.childNodes.length; i++) {
          let item = xml.childNodes.item(i);
          let nodeName = item.nodeName;

          if (typeof(obj[nodeName]) == "undefined") {
            obj[nodeName] = xmlToJson(item);
          } else {
            if (typeof(obj[nodeName].push) == "undefined") {
              let old = obj[nodeName];
              obj[nodeName] = [];
              obj[nodeName].push(old);
            }

            obj[nodeName].push(xmlToJson(item));
          }
        }
      }

      return obj;
    }

    let json = JSON.stringify(xmlToJson(rootElement));
    console.log(json);
  }
}
xhr.open('GET', 'example.xml', true);
xhr.send();

执行结果为：

{
  "bookstore": {
    "book": [
      {
        "@attributes": {
          "category": "children"
        },
        "title": "The Cat in the Hat",
        "author": "Dr. Seuss",
        "year": "1957"
      },
      {
        "@attributes": {
          "category": "web"
        },
        "title": "Learning XML",
        "author": "Erik T. Ray",
        "year": "2003"
      }
    ]
  }
}

另外，对于一些常用的前端框架，如Vue.js、React等都有相关的第三方库可以方便地进行XML转JSON的操作，使用时也可以考虑使用这些库来简化开发过程。