如何在AngularJS中处理XML服务?

我的公司有成千上万个现有的XML Web服务,并开始为新项目采用AngularJs。

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

我该如何处理XML? 我看到四个选项:

  1. parsing它并直接将DOM对象传递给UI(视图)。

  2. 把我的XML服务在服务器端的JSON包装。

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

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

什么是正确的方法,为什么?

如果选项2对您来说相对容易一些(比如像在后端控制器中添加一行JSON转换),那么这可能是一个很好的投资,因为JSON在线路上更加精简,客户端上的工作更less并且通常由RESTful API消费者(如果还有其他消费者)首选。

最近做了这样的工作,我会说下一个最好的path(如果选项2是困难的)将使用响应和请求转换器来执行您的XML和JavaScript对象之间的转换,这是您的选项之间的变化3和DOMParser对象是本地代码,所以它快速parsingXML。 将XML DOM转换为JavaScript对象并从JavaScript对象生成XML都是非常简单的recursionalgorithm。 这种方法将所有其余的客户端代码从后端表示中分离出来,如果您使用选项1,则不会出现这种情况。这样的分离将允许您直接使用基于JSON的RESTful接口应该有这样的机会出现。

select涉及JSON / JavaScript对象的任何选项通常涉及到处理阻抗不匹配问题,如XML属性,XML集合与JS数组以及XML混合内容表示。 如果您的数据模型足够简单,或者您不介意使用XML和JSON之间的开箱即用变换器提供的解决scheme(例如冗余对象包含,表示与元素混合的不相交文本的编号文本属性) ,那么这对你来说可能不是问题。 否则,就有机会在请求的任一端定制转换行为(虽然可悲地不是声明式的,就我所见)。

我会build议你有一个XML到JSON转换器。 这是一个。

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

转换后,你有一个正常的JS对象,你可以使用正常的angular度指令来解​​析它们,并使用它们。

我有同样的问题。 完成了一个小模块,将我所有的XML响应转换为ng.element对象。

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

我发现x2js工作得很好: https : //code.google.com/p/x2js/

客户端接受XML,不需要混淆angular度服务。 一个简单的快速转换,并且,你有一个JSON API来模仿XML文档。 似乎照顾我遇到的所有用例。

我创build了一个名为HttpService的服务,其中有一个名为getRequestedContent的函数,我在其中使用angular度http调用来访问我的服务“ http:// localhost:8080 / showserverstartupinfo ”,它返回一个xml,如下所示:

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

…和我parsing上面的XML和填充我的div与XML元素的内容。

 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); } }); }