1월 26일(1)

SJY0000·2022년 1월 27일

JSP, SERVLET and DB연동

목록 보기

18/24

오늘 배운 것

JSON, AJAX

JSON

단순히 데이터를 표시하는 표현방법
Web에서 data를 전송할 때 일반적으로 사용함
용량이 작고 이해하기 쉬움
중괄호{}로 시작과 끝을 나타냄
"이름" : 값 으로 표현
데이터간 쉼표(,)로 구분
네트워크를 통해 데이터를 주고 받는데 자주 사용되는 경량의 데이터 형식

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JSON Web에서 사용</title>
    <link rel="shortcut icon" href="#" />
  </head>
  <body>
    <h1>JSON Web에서 사용</h1>
    <div id="output"></div>
    <script>
      // https://randomuser.me/api/ 이 곳에서 JSON 데이터를 받아옴
      const data =
        '{"results":[{"gender":"male","name":{"title":"Mr","first":"Konsta","last":"Paavola"},"location":{"street":{"number":5000,"name":"Itsenäisyydenkatu"},"city":"Pudasjärvi","state":"Satakunta","country":"Finland","postcode":61280,"coordinates":{"latitude":"-8.8931","longitude":"-144.1913"},"timezone":{"offset":"+4:30","description":"Kabul"}},"email":"konsta.paavola@example.com","login":{"uuid":"7aa74aa9-bdb8-4f9f-9e06-58e91fd0e8ce","username":"angrygoose411","password":"trapper","salt":"R1SF8M0M","md5":"8dd03ed533bebd4b4d6b92f47aefdb0d","sha1":"2b0d18f900b727a06bb4dc96dc2553f1a4f8b61b","sha256":"b0c99838885dd9f9b5c3a5c83b0b04e339b4ce21836bce3cce109a685c37433d"},"dob":{"date":"1973-11-14T04:57:35.690Z","age":49},"registered":{"date":"2018-03-29T11:40:43.778Z","age":4},"phone":"02-980-857","cell":"049-433-13-08","id":{"name":"HETU","value":"NaNNA781undefined"},"picture":{"large":"https://randomuser.me/api/portraits/men/57.jpg","medium":"https://randomuser.me/api/portraits/med/men/57.jpg","thumbnail":"https://randomuser.me/api/portraits/thumb/men/57.jpg"},"nat":"FI"}],"info":{"seed":"1992f936271497f0","results":1,"page":1,"version":"1.3"}}';
      // JSON 데이터를 변환
      const dataJSON = JSON.parse(data);
      const person = dataJSON.results[0];
      const output = document.getElementById('output');

      let html = person.name.first + ' ' + person.name.last;
      html += '<img src="' + person.picture.thumbnail + '">';
      output.innerHTML = html;

      // 가공한 데이터를 다시 전달 할 때 => JSON으로 변환
      const strJSON = JSON.stringify(dataJSON);
      console.log(strJSON);
    </script>
  </body>
</html>

AJAX

Asynchronous JavaScript and XML의 약자
웹페이지 전체를 다시 로딩하지 않고 일부분만 갱신함
Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있음
서버와 다양한 형태의 데이터를 주고 받을 수 있음(JSON, XML, HTML 등)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AJAX 사용</title>
    <link rel="shortcut icon" href="#" />
  </head>
  <body>
    <h1>AJAX 사용</h1>
    <div id="output"></div>
    <button id="loadNew">불러오기</button>
    <script>
      const output = document.getElementById('output');
      const button = document.getElementById('loadNew');

      button.addEventListener('click', () => {
        loadAjax(); // ajax를 실행하는 함수
      });

      function loadAjax() {
        const ajax = new XMLHttpRequest(); // 1단계 : HTTPREQUEST객체를 생성
        ajax.onreadystatechange = function () {
          // console.log('stage 변화', ajax.readyState, ajax.status);
          if (ajax.readyState == 4 && ajax.status == 200) {
            // console.log(ajax.responseText);
            const dataJSON = JSON.parse(ajax.responseText);
            const data = dataJSON.results[0];
            const html = '<h2>' + data.name.first + ' ' + data.name.last + '</h2>' + '<img src="' + data.picture.large + '">';

            output.innerHTML = html;
          }
        };
        // 2단계 : 주소 설정
        ajax.open('GET', 'https://randomuser.me/api/', true);
        // 3단계 : 실제 요청보냄
        ajax.send();
      }
    </script>
  </body>
</html>

불러오기 버튼 클릭 할 때 마다 JSON데이터를 새로 받아 안의 사진과 이름데이터를 출력

SJY0000

이전 포스트

1월 25일

다음 포스트

1월 26일(1)

JSP, SERVLET and DB연동

오늘 배운 것

JSON

AJAX

불러오기 버튼 클릭 할 때 마다 JSON데이터를 새로 받아 안의 사진과 이름데이터를 출력

1월 25일

1월 26일(2)

0개의 댓글