[JavaScript] AJAX

Taemin Jang·2023년 2월 22일
0

Javascript

목록 보기
2/14
post-thumbnail

AJAX(Asychronous Javascript And XML)는 JS를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하면 XML로 데이터 포맷된 데이터를 받아와 동기적으로 DOM을 조작 및 갱신하는 웹 개발 기법입니다.

동작 과정

AJAX가 적용된 UI와 사용자가 상호작용하면, 서버로 HTTP 요청을 보내게 됩니다. 서버는 요청받은 데이터를 XML로 데이터 포맷하여 전달합니다. 그렇게 전달 받은 데이터를 페이지를 전환하지 않고 필요 부분만 업데이트할 수 있습니다.

AJAX는 브라우저에서 제공하는 XMLHttpRequest 객체를 기반으로 동작합니다.

XMLHttpRequest에는 open(), send() 메소드를 이용합니다.

장점

  1. 변경할 부분을 갱신할 때 필요없는 부분은 렌더링하지 않아서 빠르게 업데이트 할 수 있습니다.
  2. 또한 불필요한 데이터 통신이 발생하지 않고, 순간적으로 깜박이는 현상도 발생하지 않습니다.
  3. 서버와 통신이 비동기 방식으로 동작하기 때문에 서버에게 요청을 보낸 후 블로킹이 발생하지 않습니다.

단점

  1. 지원하지 않는 브라우저가 있습니다.
  2. 무분별하게 사용하면 역으로 서버에서 부하가 발생할 수 있습니다.

참고

Must-Know-About-Frontend/ajax.md at main · baeharam/Must-Know-About-Frontend

prepare_frontend_interview/js.md at main · junh0328/prepare_frontend_interview

profile
하루하루 공부한 내용 기록하기

0개의 댓글

관련 채용 정보