[JavaScript] 비동기 통신 : AJAX

#  비동기식 통신 방식을 사용하지 않을 경우

  - 웹 페이지에서 사용자 입력을 받고, 서버로 데이터를 전송하여 새로운 페이지를 받아옴

      → 화면이 깜빡이는 등의 불편한 경험을 제공하며, 데이터량이 많아지면 더욱 느려짐

      → 개선 : AJAX

 

AJAX 통신 (Asynchronous JavaScript and XML)

  - 자바스크립트를 사용하여 비동기적으로 서버와 데이터를 주고받는 기술

  - 웹 페이지에서 동적으로 데이터를 가져오거나, 업데이트하는 기술

  - 서버와 비동기적으로 데이터를 주고받음

      → 필요한 부분만 화면을 갱신함

      → 화면 전환이 발생하지 않음 (화면이 깜빡이지 않음)

 

  - 자바스크립트를 사용해서 서버에 요청을 보내고, 이에 대한 응답을 처리함

      · XMLHttpRequest 객체를 사용하여 서버와 통신함

      · 최근에는 fetch API를 사용하는 방법이 많이 사용됨

 

  - 예시 코드 : https://young0105.tistory.com/253

 

#  장점

  - 사용자 경험이 개선됨

  - 서버의 부하가 감소함 → 웹 애플리케이션의 성능 개선

#  단점

  - 초기 로딩 시간이 긺

  - SEO(Search Engine Optimization)에도 취약함