Ajax
IT 위키
Asynchronous JavaScript and XML
웹 페이지 전체를 새로 불러오지 않고, 필요한 데이터만 서버와 비동기로 주고받아 화면 일부를 갱신하는 기술
- 특정 라이브러리가 아니라 여러 기술을 조합한 방식의 이름이다.
- 2005년 제시 제임스 개럿이 이 이름을 붙였다.
- 이름에 XML 이 들어 있지만, 실제로는 JSON 을 쓰는 경우가 훨씬 많다.
- XMLHttpRequest 또는 fetch API — 서버와의 비동기 통신을 담당하는 핵심
- 자바스크립트 — 통신 제어와 화면 조작
- DOM — 응답받은 데이터로 화면을 바꾸는 대상
- JSON 또는 XML — 데이터 교환 형식
- HTML, CSS — 화면 구성과 표현
- 사용자가 어떤 동작을 한다.
- 자바스크립트가 서버에 비동기 요청을 보낸다.
- 요청을 보낸 뒤에도 사용자는 페이지를 계속 쓸 수 있다. 화면이 멈추지 않는 것이 핵심이다.
- 서버가 데이터만 응답한다.
- 자바스크립트가 DOM 을 고쳐 화면 일부만 갱신한다.
| 장점 | 단점 |
|---|---|
| 페이지 전체를 다시 그리지 않아 빠르다 | 브라우저 뒤로 가기 버튼이 의도대로 동작하지 않을 수 있다 |
| 전송량이 줄어 서버 부하가 적다 | 검색 엔진이 내용을 수집하기 어렵다 |
| 화면이 끊기지 않아 사용성이 좋다 | 자바스크립트가 꺼져 있으면 동작하지 않는다 |
| 동일 출처 정책 때문에 다른 도메인 호출에 CORS 설정이 필요하다 |
자동 완성 검색어, 무한 스크롤, 아이디 중복 확인이 전형적인 활용 예다.
