TIL_Ajax

💡 Ajax

Asynchronous Javascript And XMLHttpRequest

Ajax는 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있는 웹 개발 기법이다.

우리가 브라우저를 통해 웹페이지를 열면, html에 의해 우리에게 필요한 페이지가 렌더링된다.
이 때, html에 작성된 대로 사용하는 것이 아닌, 사용자의 요구에 따라 변화되는 부분이 있다.

예를 들면 다음과 같다.

위의 사진처럼 검색창에 키워드를 입력할 때마다, 연관된 단어들이 하단에 실시간으로 렌더링된다.

즉, 필요한 데이터만 비동기적으로 받아와 렌더링하는 것으로써 여기서 사용된 기술이 Ajax이다.

🔍 Ajax의 핵심기술

JavaScript, DOM, Fetch

이전에도 학습했듯이, Fetch를 사용하여 서버로부터 필요한 데이터를 받아올 수 있다.

Ajax의 핵심은 html전체가 아닌 필요한 부분에 필요한 데이터를 렌더링할 수 있다는 것이다.

JavaScript에서 DOM을 사용해 필요한 엘리먼트에 접근할 수 있고, 여기에 Fetch를 사용하면 우리가 원하는 부분을 변경할 수 있는 것이다.

🔍 Ajax의 장점

1. 서버에서 HTML을 완성하여 보내주지 않아도 웹페이지 제작 가능
2. 표준화된 방법 (브라우저에 상관없이 사용가능)
3. 유저 중심 애플리케이션 개발 (빠르고 더 많은 상호작용이 가능)
4. 더 작은 대역폭 (필요한 데이터를 JSON, XML 형태로 주고받기 때문에 비교적 데이터 크기가 작음)

🔍 Ajax의 단점

• SEO (Search Engine Optimization)에 불리
  : 서버에서 비동기적으로 데이터를 가져오기 때문에 초반의 html은 뼈대만 있을 가능성이 크다.
  이때, '네이버, 구글' 같은 검색 사이트들은 전 세계 사이트의 html에 있는 정보를 수집해가는 방식으로 운영되는데, Ajax를 사용할 경우, html에 데이터가 거의 없기 때문에, SEO에 불리할 수 밖에 없다.

• 뒤로가기 버튼문제
  : Ajax에서는 이전 상태를 기억하지 않기 때문에 뒤로가기 기능구현에 제한이 많다.
  이를 위해선 따로 History API를 사용해야 한다.