[AJAX]Asynchronous JavaScript And XMLHttpRequest

AJAX(Asynchronous JavaScript And XMLHttpRequest)

• JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등 다양한 기술을 사용하는 웹 개발 기법, 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려냄.

핵심기술

• Fetch

Fetch는 현재 페이지에서 작업을 하는 동안 서버와 통신. 비동기적인 방식.

• JS & DOM

JS에서 DOM을 사용해 조작, Fetch를 통해 필요한 데이터만 가져와 DOM에 적용. 기존 페이지에서 필요한 부분만 변경.

AJAX 장단점

• 장점

  1. 서버에서 HTML을 완성하여 보내주지 않아도 웹페이지를 만들 수 있음 - 일부만 업데이트하여 렌더링 할 수 있기 때문에
  2. 표준화된 방법
  3. 유저 중심 애플리케이션 개발
  4. 더 작은 대역폭 - 필요한 데이터를 텍스트 형태(JSON, XML 등)로 보냄

• 단점

  1. Search Engine Optimization(SEO)에 불리 - AJAX 방식의 웹 애플리케이션의 HTML 파일은 뼈대만 있고 데이터는 없기 때문에
  2. 뒤로가기 버튼 문제 - 이전 상태를 기억하지 않음(별도의 History API 사용)