58청춘 2023. 9. 11. 18:31
728x90

AJAX란?

Asunchronous Javascript And XML 의 약자로,

비동기적으로 JS를 사용해 데이터를 받아와 동적으로 DOM을 갱신 및 조작하는 웹 개발 기법이다.

 

동작 과정

사용자가 AJAX가 적용된 UI와 상호작용하면, 서버에 AJAX 요청을 보낸다.

서버는 DB에서 데이터를 가져와서 JS 파일에 정의되어 있는 대로

HTML/CSS와 데이터를 합쳐 만든 DOM 객체를 UI에 업데이트 시킨다.

비동기로 이루어지며, 기존의 페이지 전부 로딩하는 방식이 아닌 일부만 업데이트하는 방식이다.

즉, AJAX를 이용하면 백그라운드 영역에서 서버와 통신한 결과를 일부분에만 표시할 수 있다.

 

장점

  • 페이지 전환 없이 빠르게 화면 일부분을 업데이트 가능
  • 수신 데이터 양을 줄이고 클라이언트에게 처리를 맡길 수 있다.
  • 서버 처리를 기다리지 않고 비동기 요청 가능

단점

  • 지원하지 않는 브라우저 있음(대표적으로 IE)
  • 페이지 전환없이 서버와 통신을 하며 이로인해 보안상 문제가 발생할 수 있다.
  • 무분별한 사용은 서버에 부하를 늘림
  • SOP(동일 출처 정책) 문제가 발생할 수 있다.

한계

  • AJAX는 클라이언트가 서버에 데이터 요청하는 방식이므로,
    서버 푸시 방식의 실시간 서비스는 만들수 없다.
  • 바이너리 데이터를 보내거나 받을 수 없다.
  • AJAX 스크립트가 포함된 서버가 아닌 다른 서버로 요청을 보낼수 없다.
  • 클라이언트의 PC로 AJAX 요청을 보낼 수 없다.

 

출처)

https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/javascript/ajax.md

http://www.tcpschool.com/ajax/ajax_intro_basic

728x90