AJAX

AJAX가 뭡니까 🤓

AJAX

AJAX는, Asynchronous JavaScript And XML의 약자로써, 자바스크립트를 이용해 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식입니다.

즉, 브라우저가 가지고 있는 XMLHttpRequest 오브젝트를 이용해서 페이지 전체를 렌더링하지 않고 필요한 부분만 부분적으로 업데이트가 가능합니다.

• 데이터 형태는 JSON 혹은 XML을 사용합니다. (오늘날에는 대부분 JSON파일을 사용)

장점

• 페이지 전체를 렌더링하지 않기 때문에 페이지 깜빡거림이 없음. (Improved user experience)
• 서버 트래픽을 감소시키고(필요한 데이터만 요청), 스피드 향상
• 사용자의 대기시간 감소
• Bandwidth usage 감소
• 퍼포먼스 향상

단점

• 디버깅이 어려움
• Search Engines은 AJAX 페이지를 인덱싱 할 수 없음.

예시

• Auto-complete(Google Suggest feature)
• Google map

데이터 전송 방식

• Fetch API: 사용하기 간편
• XMLHttpRequest : 요즘도 많이 쓰고있는 기술이지만 복잡함.(콜백방식)
• jQuery ajax : 복잡하고 가동성이 좋지 않음(체이닝 방식)

XMLHttpRequest API - jQuery ajax - fetch 순으로 발전
오늘날에는 대부분 fetch를 사용하여 AJAX를 구현한다.