[JavaScript] 비동기통신(XML / JSON)

Gabriela·2023년 9월 4일

JavaScript js

WEB Front-end

목록 보기

12/16

비동기 통신

비동기(Asynchronous) 처리 방식

통신(송신/수신, 요청/응답)을 할 때 사용하는 방식이다.
요청과 응답이 순서대로 진행되는 "동기(Synchronous)" 통신 방식이 있고,
요청과 응답이 순서없이 진행되는 "비동기(Asyschronous)" 통신 방식이 있다.
비동기 통신 방식은 요청에 대한 응답이 없어도 계속 요청할 수 있다.
비동기 통신 방식은 응답을 기다리는 시간이 없기 때문에 동기 통신에 비해서 빠르다.
순서대로 처리해야 하는 서비스의 경우 문제가 발생할 수 있다.

동기 통신

요청 결과(응답)를 받을 때까지 새로운 요청을 하지 않는 통신 방식

      client                         server
        A ---------------------------→ A
        ACK ←------------------------- (A 성공)
        B ---------------------------→ B
        ACK ←------------------------- (B 성공)
        C ---------------------------→ C
        NAK ←------------------------- (C 실패)
        C ---------------------------→ C
        ACK ←------------------------- (C 성공)
        D ---------------------------→ D
        ...

비동기 통신

요청 결과(응답)를 기다리지 않고 새로운 요청을 하는 통신 방식

      client                         server
        A ---------------------------→ A
        B ---------------------------→ B
        ACK ←------------------------- (A 성공) - readystatechange 이벤트 (응답이 왔는지 체크해주는 이벤트를 통해서 동작하는 방식)
        C ---------------------------→ C
        D ---------------------------→ D
        ACK ←------------------------- (B 성공)
        NAK ←------------------------- (C 실패)
        C ---------------------------→ C
        ACK ←------------------------- (C 성공)
        ...

XML

httpRequest
- ajax : 페이지 변화 없이 일부만 바뀌는 것

<?xml verison="1.0" encoding="UTF-8"?>
- xml 기본 태그
- 태그 이름이 정해진게 없어서 사용자 마음대로 태그를 만들 수 있다.

‣ XML 활용 예제

1. XMLHttpRequest 객체 생성 (비동기 통신을 수행하는 객체)

var xhr = new XMLHttpRequest();
URL 요청 주소로부터 전체페이지를 가져오지 않고 일부(해당데이터)만 가져와서 처리하는 방식

2. 요청 정보 생성

형식 : xhr.open(RequestMethod, URL, Sync/Async);

RequestMethod : get 또는 post

URL : 요청 URL (서버 경로 작성)

Sync(동기) : false

Async(비동기) : ture
xhr.open('get', 'book1.xml', true);  
// book1.xml으로 서버 주소 대체해서 가정

3. 요청

xhr.send();  
// 이대로 보내라는 의미(요청정보를 만들어서 보낸다.)

4. 응답

xhr객체의 readystatechange 이벤트 : 응답되었는지 확인하는 이벤트

xhr.readyState : 통신상태 (0: OPENED, 1: UNSEND, 2: HEADER_RECEIVE, 3: LOADING, 4: DONE)

xhr.status : 응답코드 (200: 성공, 4XX: 클라이언트 측 오류, 5XX: 서버 측 오류)

응답 데이터의 형식에 따른 속성(property)

XML : responseXML

JSON : responseText

      xhr.addEventListener('readystatechange', function(){
        if(xhr.readyState === 4){        // 통신상태 확인
          if(xhr.status === 200){        // 응답상태 확인
            var data = xhr.responseXML;  // 받아올 데이터
            var str = '';
            var title = data.getElementsByTagName('title');
            var author = data.getElementsByTagName('author');
            for(let i = 0; i < title.length; i++){  
              str += '<ul>';
              str += '<li>' + title[i].textContent + '</li>';
              str += '<li>' + author[i].textContent + '</li>';
              str += '</ul>';
            }
            document.getElementById('xml_response1').innerHTML = str;
          }
        }
      })
    })

‣ JSON 활용 예제

json 데이터는 프로퍼티를 큰따옴표("")로 묶어서 표기하는게 표준

1. JSON 활용 예제

  <div class="wrap3">
    <input type="button" value="JSON요청1" id="btn_json_request1">
    <div id="json_response1"></div>
  </div>
  <script>
   document.getElementById('btn_json_request1').addEventListener('click', function(){
      var xhr = new XMLHttpRequest();
      xhr.open('get', 'book1.json', true);
      xhr.send();
      xhr.addEventListener('readystatechange', function(){
        if(xhr.readyState === 4){
          if(xhr.status === 200){
            var data = JSON.parse(xhr.responseText);  // 문자열인 JSON데이터를 객체변환하여 배열 형식으로 받아오기
            var str = '';
            for(let i = 0; i < data.length; i++){
              str += '<ul>';
              str += '<li>' + data[i].title + '</li>'; // data[i].title === data[i]['title']
              str += '<li>' + data[i].author + '</li>';
              str += '</ul>';
            }
           document.getElementById('json_response1').innerHTML = str;
          }
        }
      });
    });

2. JSON 활용 예제

      var xhr = new XMLHttpRequest();
      xhr.open('get', 'book2.json', true);
      xhr.send();
      xhr.addEventListener('readystatechange', function(){
        if(xhr.readyState === 4){
          if(xhr.status === 200){
            var data = JSON.parse(xhr.responseText);  // 객체변환 후 books프로퍼티값을 꺼내옴
            str = '';
            for(let i = 0; i < data.books.length; i++){
              str += '<ul>';
              str += '<li>' + data.books[i].title + '</li>';
              str += '<li>' + data.books[i].author + '</li>';
              str += '</ul>';
            }
            document.getElementById('json_response2').innerHTML = str;
          }
        }
      });
    });