[ Javascript ] JSON과 AJAX

JSON과 AJAX

JSON ( Java Script Object Notation )

• JavaScript Object Notation이라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 Data교환 형식
• Javascript에서 객체를 만들 때 사용되는 표현식을 의미
• JSON표현식은 사람과 기계가 모두 이해하기 쉬우면서 용량이 작기때문에, 데이터 전송 등에 많이 사용된다.
• 데이터를 표시하기 위한 단순한 표현 방법

 

AJAX ( Asynchronous Javascript And XML )

• Javascript를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
• 브라우저가 가지고 있는 XMLHttpRequest객체를 이용해서 전체 페이지를 새로 고치지 않고 페이지의 일부만을 로드하는 기법

 

JSON파일과 AJAX를 이용한 간단한 통신

HTML

<div class="json_test_wrap">
    <div class="title">JSON and AJAX</div>

    <button id="btn">Click</button>

    <div id="info"></div>
</div>

<script src="../js/main.js"></script>

 

JS

// 카운트
var count = 0;
// 클릭버튼
var btn = document.getElementById("btn");
// 버튼을 클릭했을 때 내용이 나타날 부분
var animal = document.getElementById("info");

btn.addEventListener("click", function() {
    var ourRequest = new XMLHttpRequest();

    ourRequest.open('GET', '../json/jsonData.json');
    
    ourRequest.onload = function() {
        if(ourRequest.status >= 200 && ourRequest.status < 400) {
            var ourData = JSON.parse(ourRequest.responseText);
            renderHTML(ourData);
        } else {
            console.log('err');
        }
    };
    ourRequest.send();
    ++count;
    // 내용 나오면 버튼 삭제
    if(count === 1) {
        btn.remove();
    }
});

function renderHTML(data) {
    var stringHTML = "";

    for(var i = 0; i < data.length; i++) {
        stringHTML += "<p> 이름은 " + data[i].name + ' 종류는 ' + data[i].species + ".</p>";
    }

    animal.insertAdjacentHTML('beforeend', stringHTML);
}

 

JSON

[
  {
      "name": "다롱이",
      "species": "고양이",
      "favFood": "통조림"
  },
  {
      "name": "메론",
      "species": "당나귀",
      "favFood": "당근"
  },
  {
      "name": "민트",
      "species": "강아지",
      "favFood": "사료"
  }
]

 

버튼을 클릭하면 JSON내용을 불러오고 버튼이 삭제