53

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

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

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

  1. 解析它并将 DOM 对象直接传递给 UI（视图）。

  2. 在服务器端围绕我的 XML 服务放置一个 JSON 包装器。

  3. 在客户端使用一些库将 DOM 对象转换为 JSON，并在我发出 post/put 请求时将其转换回来。

  4. 在客户端手动将 DOM 对象转换为 JavaScript 对象。

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

4

5 回答 5

34

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

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

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

于 2013-03-19T05:39:58.783 回答
16

我建议你有一个xml 到 json转换器。这是一个。

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

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

于 2013-03-19T10:15:49.833 回答
16

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

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

于 2013-05-03T22:52:43.587 回答
11

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

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

于 2014-03-03T20:07:10.433 回答
0

我创建了一个名为的服务，该服务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);
    }
  });
}
于 2016-08-03T05:25:41.340 回答