[JavaScript] 비동기화 통신, AJAX

🌝. 동기 방식
: 하나의 처리가 끝나는 시간과 다음 처리가 시작하는 시간이 같도록 처리하는 방식을 말한다. ex. HTTP...

🌚. 비동기 방식
: 여러 개의 처리가 함께 실행되는 방식으로,
동기 방식에 비해 단위시간 당 많은 작업을 처리할 수 있다.

AJAX
(asynchronous javascript and xml)

---

🌚 비동기화통신
응답을 기다리지 않는다, 딴거하고 있다가 응답 이벤트를 받으면 일부부만 갱신
❗ 사용자의 액션에 따라 화면에 새로고침 없이, 화면의 일부분을 갱신하는 것

(1)XMLHttpRequest생성 -> (2)open -> (3)send -> (4)response -> (5)갱신

🌚 한정적 렌더링 => 부드러운 화면전환 효과

  $(function() {
      $("#send").click(function() {
          // 비통기화통신: XMLHttpRequest생성 -> open -> send -> response -> 갱신
          $.ajax({
              url: "[서버주소]", // 요청주소
              type: "post", // 요청방식(get, post, put, delete)
              dataType: "json", // 서버가 응답할때 전달하는 데이터 타입(text, html, xml, json), default: text
              data: [parameter정보],
              success: function(data, status) { // 응답성공시 함수
                  // 응답결과를 받아 화면에 갱신
                  let str = "";
                  $.each(data, function(index, item) {
                      // alert(index + ": " + item + ", " + item.name);
                      str += "<tr>";
                      str += `<td>${item.name}</td>`;
                      str += `<td>${item.age}</td>`;
                      str += `<td>${item.addr}</td>`;
                      str += "</tr>";
                  });
                  // 추가전에 제거
                  $("#table tr:gt(0)").remove(); // 엘리먼트 자체를 제거

                  // table에 추가
                  $("#table tr:eq(0)").after(str); // 형제노드로 추가
              },
              error: function(err, status) { // 응답실패시 함수
                  // 에러발생
                  alert(err + "이(가) 발생했습니다: " + status);
              }
          });
      });
  });

📕 모든 언어들이 이해할 수 있는 데이터 타입 📕

- text
- html
- xml
- json {key: value, key: value, ...}