1. AJAX
ㅇ 기존의 HTML 관련 기술과는 달리,
- 사용자 클릭 후 페이지 전체를 새로 고치지 않고,
- 필요한 부분만 바로 고치는 형태로, (동적으로 부분 갱신하는 형태)
- 빠른 응답을 제공하는 기술을 지칭하는 용어
ㅇ 용어 출현
- Adaptive Path의 제시 제임스 가렛(Jesse James Garrett)이 2005년2월 이 명칭을
언급하게 되면서 널리 퍼진 용어
2. 특징
ㅇ AJAX는 한 가지 기술을 의미하는 것은 아님
- 자바 스크립트, XML, DOM, CSS 등 다양한 기술이 결합되어 있는 기술
. AJAX의 대표적인 예로는 2005년도에 나타난 구글 맵(Google Map)이 있음
ㅇ 서버 측과 웹브라우저 간의 데이터 교환/처리가 비동기적임
- 사용자 이벤트 요청에 따라,
. 전체 웹 페이지를 다운로드하지 않고,
. 필요한 부분 만 백그라운드 상태에서 처리됨
- 즉, 비동기적으로 통신함으로써,
. 인터페이스 갱신, 입력 확인 등 간단한 작업은, 자바스크립트를 통해, 클라이언트에서 처리
. 서버와의 데이터 송수신은, HTTP를 통해, 백그라운드에서 처리
. 결국, 클라이언트측은 다른 작업을 계속 할 수 있음
ㅇ 서버 측 데이터 제공
- XML, HTML, JSON 등 텍스트 파일 포멧으로 제공됨
. (현재 XML은 잘 사용 안하고, JSON을 많이 씀)
ㅇ HTTP 전송을 기본으로 함
3. HTTP 전송을 기반으로 하는 요청 응답
ㅇ XHR(XMLHttpRequest) 객체를 기반으로 호출 및 응답 처리를 함
- XHR 객체
. 데이터를 원격에서 받아오며, DOM을 조작하며, 그 데이터를 웹페이지 내에 삽입하는 등
. 웹서버와의 비동기 통신을 지원하는, 각종 메소드,프로퍼티들을 제공
- XHR 객체의 생성 방법
. XMLHttpRequest 생성자를 통한 native XHR 객체를 생성하면 됨
.. var xhr = new XMLHttpRequest();
* [참고] ☞ XMLHttpRequest 객체, jQuery Ajax 참조
ㅇ fetch 함수
- [문법] const promise = fetch (url [, options]);