«

Ajax로 데이터를 템플릿 형태로 받아오기

서론

Ajax를 지난번에 제이쿼리로 json형태로 받아오는 것만 했었는데 오늘은 자바스크립트로 방법으로 받아오는 방법과 html파일로 받아오는 방법도 해보겠습니다.

설명

- index.html
- load.html
- ajax.js
- data.json

파일구조는 위처럼 해주세요 그럼 파일로 불러오는 방법부터 해보겠습니다.

index.html

<input type="button" id="btn" value="click">
<div id="ajaxValue"></div>
<script src="ajax.js"></script>

ajax.js

const ajax = (url, callback) => {
    const xhr = new XMLHttpRequest();

    xhr.onreadystatechange = () => {
        if(xhr.readyState === 4 && xhr.status === 200){
            callback(xhr.responseText);
        }
    };
    xhr.open('get', url, true);
    xhr.send();
};
const btn = document.getElementById('btn');
btn.addEventListener('click', ()=> {
    ajax('./load.html', data=> {
        const ajaxValue = document.getElementById('ajaxValue');
        ajaxValue.innerHTML = '';
        ajaxValue.innerHTML = data;
    });
});

load.html

<div class="entry">
    <h3 class="term">BACCHUS. 바쿠스</h3>
    <div class="part">명사.</div>
    <div class="definition">고대인들이 술에 취할 명분으로 편의상 만들어낸 신.
</div>
</div>,
<div class="entry">
    <h3 class="term">BACKBITE. 험담하다</h3>
    <div class="part">동사.</div>
    <div class="definition">상대방에게 들킬 염려가 없을 때, 그에 관해 본 그대로를 입에담다.</div>
</div>,
<div class="entry">
    <h3 class="term">BANG. 빵! 가지런한 앞머리2</h3>
    <div class="part">명사.</div>
    <div class="definition">총 쏘는 소리. 앞머리를 잘라 내린 여성의 머리모양.</div>
</div>

이제 index.html을 실행해서 버튼을 클릭하시면 load.html이 화면에 출력된걸 확인하실 수 있습니다. 출력이 됐다면 load.html을 수정후 새로고침을 하지말고 버튼을 클릭해보세요 수정된채로 출력이 되는걸 확인하실 수 있습니다. ajax를 이용하면 비동기로 통신이 이루어지기 때문에 새로고침을 하지않아도 적용이 됩니다. 이번엔 json을 이용해서 불러오는 걸 해보겠습니다. 조금전에 작성했던 파일을 수정하겠습니다.

ajax.js

const ajax = (url, callback) => {
    const xhr = new XMLHttpRequest();

    xhr.onreadystatechange = () => {
        if(xhr.readyState === 4 && xhr.status === 200){
            callback(JSON.parse(xhr.responseText));
        }
    };
    xhr.open('get', url, true);
    xhr.send();
};

let AjaxData = {
    entryHtml:{}
};

const btn = document.getElementById('btn');
const ajaxValue = document.getElementById('ajaxValue');
btn.addEventListener('click', ()=> {
    ajax('./data.json', data=> {
        ajaxValue.innerHTML = '';
        AjaxData.entryHtml = data.map(v=> {
            let html ='<div class="entry">';
            html +='<h3 class="term">'+v.term +'</h3>';
            html +='<div class="part">'+v.part +'</div>';
            html +='<div class="definition">'+ v.definition+'</div>';
            html +='</div>';
            return html;
        });
        ajaxValue.innerHTML = AjaxData.entryHtml;
    });
});

data.json

[
  {
  "term": "BACCHUS. 바쿠스",
  "part": "명사.",
  "definition": "고대인들이 술에 취할 명분으로 편의상 만들어낸 신."
  },
  {
    "term": "BACKBITE. 험담하다",
    "part": "동사.",
    "definition": "상대방에게 들킬 염려가 없을 때, 그에 관해 본 그대로를 입에담다."
  },
  {
    "term": "BANG. 빵! 가지런한 앞머리2",
    "part": "명사.",
    "definition": "총 쏘는 소리. 앞머리를 잘라 내린 여성의 머리모양."
  }
]

아까 했던것 처럼 버튼을 클릭후 json파일을 수정한 후 다시 클릭해보세요. 이번에도 잘 바뀌는 걸 보실 수 있습니다. 데이터를 수정,삭제,보내기를 할때는 post를 사용하면 됩니다. 그럼 그 데이터를 백엔드 개발자가 받아서 가공한 데이터를 뿌려주면 프론트엔드 개발자가 ajax로 받아서 작업을 합니다.