[JavaScript] 자바스크립트에서 fetch()로 XML 데이터 읽어오기

228_자바스크립트에서 fetch()로 XML 데이터 읽어오기

[적용]

• XML 형식의 텍스트 파일을 가져오고 싶을 때

---

[내용]

XML은 데이터를 표현하는 마크업 언어의 하나로, 주로 서버 간의 데이터 통신에 사용되며,알기 쉬운 표기 형식이 특징이다.HTML과 같이 시작 태그와 종료 태그로 값을 정의하고 속성값으로 추가 정보를 부여한다.복잡한 정보를 표현할 수 있으므로 다양한 목적으로 사용된다.

 

XML은 데이터를 가져오고 참조하는 것이 약간 복잡한 반면,JSON은 데이터를 가져오는 시점에서 자바스크립트 데이터 타입으로 변환되므로 필요한 코드의 양이 적다는 장점이 있다.

 

XML                          

<data version="1">
  <orange>1</orange>
  <apple>2</apple>
</data>

 

Promise를 사용하는 방법

JavaScript                                                                                                                                              

fetch('sample.xml')
  .then((response) => response.text())
  .then((str) => new DOMParser().parseFromString(str, 'application/xml'))
  .then((xml) => {
    console.log(xml);
    console.log(xml.querySelector('orange').innerHTML);
  });

 

await와 async를 사용하는 방법

JavaScript                                                                                                                                              

 

anync function load() {
  // 파일 가져오기
  const response = await fetch('sample.xml');
  // 텍스트 형식으로 해석
  const text = await response.text();
  // XML 형식으로 해석
  const xml = new DOMParser().parseFromString(text, 'application/xml');
  
  console.log(xml);  // 결과: #document
  // 텍스트 출력
  document.querySelector('#log').textContent = text;
}

load();

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김