AJAX
AJAX(Asynchronous JavaScript and XML)는 웹 페이지가 서버와 비동기적으로 데이터를 교환한 뒤 전체 문서를 다시 로딩하지 않고 화면 일부를 갱신하는 개발 기법이다. 이름에는 XML이 포함되지만 실제 응용 프로그램에서는 JSON, HTML 조각과 일반 텍스트 등...
| 분류 | 비동기 웹 개발 기법 |
|---|---|
| 정식 명칭 | Asynchronous JavaScript and XML |
| 관련 기술 | World Wide Web, HTML, CSS, JavaScript |
| 주요 명세 | MDN: Ajax |
AJAX(Asynchronous JavaScript and XML)는 웹 페이지가 서버와 비동기적으로 데이터를 교환한 뒤 전체 문서를 다시 로딩하지 않고 화면 일부를 갱신하는 개발 기법이다. 이름에는 XML이 포함되지만 실제 응용 프로그램에서는 JSON, HTML 조각과 일반 텍스트 등 다양한 형식의 데이터를 사용할 수 있다. 이 방식은 문서 중심 웹 탐색에서 상호작용하는 웹 애플리케이션으로 발전하는 과정에 큰 영향을 주었다.
초기 AJAX 구현에서는 XMLHttpRequest 인터페이스가 많이 사용되었다. 스크립트는 사용자 동작에 따라 백그라운드로 HTTP 요청을 보내고 응답이 도착하면 DOM의 일부를 변경한다. 서버에서 완전한 HTML 페이지를 매번 반환하는 방식에 비해 필요한 데이터만 요청하고 화면의 상태를 유지할 수 있다.
현대 웹에서는 Promise 기반의 Fetch API가 새로운 비동기 네트워크 코드를 작성하는 데 널리 사용된다. fetch()는 응답 스트림 처리, 취소, JSON 파싱 및 다양한 요청 정책과 결합될 수 있으며 AJAX의 목적을 더 현대적인 인터페이스로 구현한다. 응답의 데이터 형식과 오류 검사는 어떤 API를 사용하더라도 별도로 수행해야 한다.
AJAX를 활용하면 자동 완성, 비동기 폼 제출, 검색 제안, 댓글 갱신 및 실시간 대시보드 같은 인터페이스를 만들 수 있다. 여러 요청이 동시에 발생하면 응답 순서가 요청 순서와 달라질 수 있으므로 이전 요청의 취소와 상태 충돌 방지가 필요하다. 로딩 표시와 실패 안내, 네트워크 지연을 표현하는 방식도 중요하다.
비동기 요청은 브라우저의 동일 출처 정책과 CORS, 인증 쿠키 및 CSRF 보안 모델에 영향을 받는다. 서버에서 받은 문자열을 무조건 HTML에 삽입하면 XSS 공격의 원인이 될 수 있어 데이터와 실행 코드를 구별해야 한다. AJAX라는 표현은 현대 웹에서 이전보다 덜 쓰이지만 비동기 통신과 부분 갱신이라는 기능은 여전히 널리 사용된다.[1]