如何在 AngularJS 中处理 XML 服务？答案

【问题标题】：How to handle XML services in AngularJS?如何在 AngularJS 中处理 XML 服务？
【发布时间】：2013-03-19 02:45:44
【问题描述】：

我的公司拥有数千个现有的 xml Web 服务，并开始在新项目中采用 AngularJs。

http://angularjs.org/ 上的教程专门使用 json 服务。看起来他们在控制器中进行服务调用，解析生成的 JSON，并将生成的对象直接传递给视图。

我可以用 XML 做什么？我看到四个选项：

解析它并将 DOM 对象直接传递给 UI（视图）。
在服务器端围绕我的 XML 服务放置一个 JSON 包装器。
在客户端使用一些库将 DOM 对象转换为 JSON，并在我发出 post/put 请求时将其转换回来。
在客户端手动将 DOM 对象转换为 JavaScript 对象。

什么是正确的方法，为什么？

【问题讨论】：

标签： xml service angularjs backend

【解决方案1】：

如果选项 2 对您来说相对容易（例如，在后端控制器中添加单行 JSON 转换），那么这可能是一项不错的投资，因为 JSON 更精简，工作量要少得多客户端，通常是 RESTful API 消费者的首选（如果有其他消费者）。

最近完成了此类工作，我想说下一个最佳路径（如果选项 2 很困难）是使用响应和请求 transformers 在您的 XML 和 JavaScript 对象之间执行转换，这是一种变体介于您的选项 3 和 4 之间。DOMParser 对象是本机代码，因此它解析 XML 的速度非常快。将 XML DOM 转换为 JavaScript 对象和从 JavaScript 对象生成 XML 都是相当简单的递归算法。这种方法将您的所有其余客户端代码与后端表示分离，如果您选择选项 1，则不会出现这种情况。这种分离将允许您直接使用基于 JSON 的 RESTful 接口，如果有这样的机会。

选择任何涉及 JSON/JavaScript 对象的选项通常会涉及处理阻抗不匹配问题，例如 XML 属性、XML 集合与 JS 数组和 XML 混合内容表示。如果您的数据模型足够简单，或者您不介意使用 XML 和 JSON 之间的开箱即用转换器提供的解决方案（例如，冗余对象包含、编号文本属性以表示与元素混合的不相交文本），那么这对您来说可能不是问题。否则，有机会在请求的任一端强制自定义转换行为（但遗憾的是，据我所知，这不是声明式的）。

【讨论】：

感谢您的详细回复。我很确定我们的后端内置了 xml-json 和 json-xml 转换，所以我将首先尝试这些并看看它们的工作情况！
很高兴为您提供帮助，@Nick Vikeras。祝你好运！

【解决方案2】：

我建议您使用 xml 到 json 转换器。这是一个。

https://code.google.com/p/jquery-xml2json-plugin/

转换后，你就有了一个普通的 JS 对象，你可以在其中使用普通的 angular 指令来解析它们并根据需要使用它们。

【讨论】：

我对这种方法有疑问。假设我有一个 xml 文档作为字符串。如果我解析它并获得一个 DOM 对象，然后将该 DOM 对象转换为 json，那么对 js 对象所做的更改是否也反映在 DOM 中？那么我可以将 DOM 转换回字符串以回发到我的服务吗？
众所周知，Angular 有 2 路数据绑定。我假设您所指的 JS 对象附加到 $scope。如果是这样，您对 JS 对象所做的任何更改也会自动更改您的 DOM。这样你的 DOM 也会被操纵。因此，您可以使用该 DOM 来做您以后打算做的事情。

【解决方案3】：

我遇到了同样的问题。最后制作了一个小模块，将我所有的 XML 响应转换为 ng.element 对象。

https://github.com/johngeorgewright/angular-xml

【讨论】：

【解决方案4】：

我发现 x2js 运行良好：https://code.google.com/p/x2js/

客户端接收 XML，无需处理 Angular 服务。一个简单的快速转换，瞧，你有一个模仿 XML 文档的 JSON API。似乎照顾我遇到的所有用例。

【讨论】：

【解决方案5】：

我创建了一个名为HttpService 的服务，它有一个名为getRequestedContent 的函数，我在其中使用角度http 调用我的服务“http://localhost:8080/showserverstartupinfo”，它返回一个xml，如下所示：

<SERVERSTARTUPINFO>
<SERVERNAME>########</SERVERNAME>
<SERVERSTARTUPTIME>##########</SERVERSTARTUPTIME>
</SERVERSTARTUPINFO>

...我解析上面的 xml 并用 xml 元素的内容填充我的 div。

HttpService.getRequestedContent('/showserverstartupinfo').then(
  function(content) {
    //successCallback
    var xml = content.data;
    document.getElementById('serverName').innerHTML = 
          xml.getElementsByTagName("SERVERNAME")[0].childNodes[0].nodeValue;
  }, function(data) {
    //errorCallback
});

HttpService(Angularjs)中的getRequestedContent函数如下：

getRequestedContent : function(request) {
  var url = this.getRootContextPath() + request;
  return $http({
    method : 'GET',
    url : url,
    transformResponse : function(data) {
      return $.parseXML(data);
    }
  });
}

【讨论】：