如何在AngularJS中处理XML服务?
我的公司有成千上万个现有的XML Web服务,并开始为新项目采用AngularJs。
http://angularjs.org/上的教程仅使用json服务。 看起来他们在控制器中进行服务调用,parsing生成的JSON,并将生成的对象直接传递给视图。
我该如何处理XML? 我看到四个选项:
-
parsing它并直接将DOM对象传递给UI(视图)。
-
把我的XML服务在服务器端的JSON包装。
-
将DOM对象转换为JSON,并在客户端使用某个库,并在发出post / put请求时将其转换回来。
-
在客户端手动将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对象。
我发现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); } }); }