[ JS 스터디 ] JSON / AJAX

 

---

 

[JS 스터디] JSON 의 이해

<이전글>

 

AJAX란?

- 비동기 자바스크립트와 XML(Asynchronous JavaScript And XML)

간단하게 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는것을 말한다.

 

AJAX의 주요 두가지 특징

- 페이지 새로고침 없이 서버에 요청 ( 데이터 이용량은 줄이고, 페이지를 새로고침하는 시간도 줄임 )

- 서버로부터 데이터를 받고 작업을 수행

 

 

jQuery

 

// javascript

   $(document).ready(function(){
      $.ajax({
        url: "file.json",	// 클라이언트가 요청을 보낼 서버의 URL 주소
        dataType: "json",	// 서버에서 보내줄 데이터의 타입
        success: function(data){	// HTTP요청 성공시에 데이터를 불러옴
          console.log("debug=>"+data);
          let tableData = "";
          for( let i in data){
            let cust_no = data[i].cust_no;
            let name = data[i].cust_name;
            let phone = data[i].phone;
            let team = data[i].team;
            let point = data[i].point;
            tableData += '<tr>';
            tableData += '<td>'+cust_no+'</td>';
            tableData += '<td>'+name+'</td>';
            tableData += '<td>'+phone+'</td>';
            tableData += '<td>'+team+'</td>';
            tableData += '<td>'+point+'</td>';
            tableData += '</tr>';
          }
          $("#table").append(tableData);
        }
      })
    })

// html

 <table border="1">
    <thead>
      <th>cust_no</th>
      <th>cust_name</th>
      <th>phone</th>
      <th>team</th>
      <th>point</th>
    </thead>
    <tbody id="table">

    </tbody>
  </table>

// 불러온 json 파일