source

AngularJS에서 XML 서비스를 처리하는 방법

nicesource 2023. 3. 5. 09:54
반응형

AngularJS에서 XML 서비스를 처리하는 방법

우리 회사는 수천 개의 기존 xml 웹 서비스를 보유하고 있으며, 새로운 프로젝트에 AngularJs를 채택하기 시작했습니다.

http://angularjs.org/의 튜토리얼에서는 json 서비스만을 사용하고 있습니다.컨트롤러에서 서비스 콜을 발신하여 결과 JSON을 해석하고 결과 객체를 뷰에 직접 전달하는 것처럼 보입니다.

XML에서는 어떻게 해야 합니까?다음 4가지 옵션이 표시됩니다.

  1. 해석하여 DOM 개체를 UI(보기)에 직접 전달합니다.

  2. 서버측의 XML 서비스에 JSON 래퍼를 붙입니다.

  3. 클라이언트 측에 있는 라이브러리를 사용하여 DOM 개체를 JSON으로 변환하고 Post/Put 요청을 할 때 다시 변환합니다.

  4. 클라이언트 측에서 수동으로 DOM 개체를 JavaScript 개체로 변환합니다.

올바른 접근법과 그 이유는 무엇입니까?

옵션 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 사이에서 즉시 사용할 수 있는 변압기가 제공하는 솔루션(예: 중복 객체 격납, 요소와 혼합된 분리된 텍스트를 나타내는 번호부 텍스트 속성)을 사용해도 문제가 되지 않을 수 있습니다.그렇지 않으면 요청의 어느 한쪽 끝에서나 변환 동작을 커스터마이즈할 수 있는 기회가 있습니다(단, 제가 지금까지 본 바로는 단언은 아니지만).

xml-json 변환기를 사용하는 것을 추천합니다.여기 있습니다.

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

변환 후에는 일반 JS 객체를 사용하여 일반 각도 지시어를 구문 분석하고 원하는 대로 사용할 수 있습니다.

저도 같은 문제가 있었어요.모든 XML 응답을 ng.element 객체로 변환하는 작은 모듈을 만들었습니다.

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

x2dll은 정상적으로 동작하고 있습니다.https://code.google.com/p/x2js/

클라이언트는 XML을 받아들이기 때문에 각도 서비스를 조작할 필요가 없습니다.간단한 빠른 변환과 XML 문서를 모방하는 JSON API가 있습니다.내가 마주친 모든 사용 사례를 처리하는 것 같아.

가 만든 는 다음음음 i i i i i i i i i i i i i i i 。HttpService라는 기능을 가진 것getRequestedContent이 경우 서비스 "http://localhost:8080/showserverstartupinfo"에 대한 각도http 콜을 사용하여 다음과 같이 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);
    }
  });
}

언급URL : https://stackoverflow.com/questions/15490658/how-to-handle-xml-services-in-angularjs

반응형