fetch 함수로 html 문서 로드하기

fetch 함수로 html 문서 로드하기

 

fetch 함수는

1. XMLHttpRequest 객체와 마찬가지로 HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API 다.
2. XMLHttpRequest 객체보다 사용법이 간단하고 프로미스를 지원하기 때문에 비동기 처리를 위한 콜백 패턴의 단점에서 자유롭다.
3. 비교적 최근에 추가된 Web API로서 인터넷 익스플로러를 제외한 대부분의 모던 브라우저에서 제공한다.
4. fetch 함수에는 HTTP 요청을 전송할 URL과 HTTP 요청 메서드, HTTP 요청 헤더, 페이로드 등을 설정한 객체를 전달한다.

Fetch API : https://developer.mozilla.org/ko/docs/Web/API/Fetch_API

Fetch API - Web API | MDN

Using Fetch : https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

Using Fetch - Web API | MDN

 

html 문서 로드

fetch 함수로 html 문서를 로드할 때 주의할 점은,

로드된 html 내용이 문자열로 되어 있기 때문에 html 소스 코드로 변환시켜야 한다.

DOMParser 인터페이스는 DOM document 문서에 맞는 XML 및 HTML 소스코드를 해석할 수 있는 기반을 제공한다.

btn.addEventListener('click',function(){        
    fetch('template.html')
    .then(function(response){
      response.text().then(function(html){
        var html_dom = new DOMParser().parseFromString(html,'text/html');
        html_dom = html_dom.body.firstChild;
        var body = document.querySelector('body');
        body.insertAdjacentElement('beforeend',html_dom);                                
      })
    });
});