비동기(Asynchronous) 처리 방식

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

동기 비동기 비교

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

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

  <div class="wrap1">
    <input type="button" value="XML요청1" id="btn_xml_request1">
    <div id="xml_response1"></div>
  </div>
  <script>
    
    document.getElementById('btn_xml_request1').addEventListener('click', function(){

      // 1. XMLHttpRequest 객체 생성 (비동기 통신을 수행하는 객체)
      var xhr = new XMLHttpRequest();

      // 2. 요청 정보 생성
      //   1) 형식 : xhr.open(RequestMethod, URL, Sync/Async);
      //     (1) RequestMethod : get 또는 post
      //     (2) URL : 요청 URL (서버 경로 작성)
      //     (3) Sync(동기) : false,  Async(비동기) : true
      xhr.open('get', 'book1.xml', true);

      // 3. 요청
      xhr.send();

      // 4. 응답
      //   1) xhr 객체의 readystatechange 이벤트 : 응답되었는지 확인하는 이벤트
      //   2) xhr.readyState : 통신상태 (0: OPENED, 1: UNSEND, 2: HEADER_RECEIVE, 3: LOADING, 4: DONE)
      //   3) xhr.status     : 응답코드 (200: 성공, 4XX: 클라이언트 측 오류, 5XX: 서버 측 오류)
      //   4) 응답 데이터 형식에 따른 속성(property)
      //     (1) XML  : responseXML
      //     (2) 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;
          }
        }
      })

    })

  </script>

대충 흐름만 이해하고 강사님이 문법 자체는 안중요하다니까 걍 넘어가...
ajax 하다보면 바뀐대. 얘가 다 아우른다고 하는데