💡 AJAX란?
AJAX(Asynchronous JavaScript And XMLHttpRequest)은 JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법을 말한다.
👀 AJAX의 특징
AJAX는 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다
예시)
검색어를 입력할 때마다 뜨는 추천 검색어
스크롤이 끝나면 데이터를 가져와서 업데이트하고 랜더링하는 무한스크롤
페이스북 메시지
네이버 포털사이트의 뉴스 탭
📌 AJAX의 두가지 핵심 기술: JavaScript,DOM & Fetch
ajax는 fetch와 dom이 결합된 형태라고 생각해도 된다고 한다.
| Fetch | -페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아올 수 있음 -사용자가 현재 페이지에서 작업을 하는 동안 서버와 통신할 수 있도록 함 - 브라우저는 Fetch가 서버에 요청을 보내고 응답을 받을 때까지 모든 동작을 멈추는 것이 아니라 계속해서 페이지를 사용할 수 있게 하는 비동기적인 방식을 사용 |
| JavaScript와 DOM | -JavaScript에서 DOM을 사용해 조작할 수 있기 때문에, Fetch를 통해 전체 페이지가 아닌 필요한 데이터만 가져와 DOM에 적용시켜 새로운 페이지로 이동하지 않고 기존 페이지에서 필요한 부분만 변경할 수 있다. |
📌 XHR VS Fetch
Fetch 이전에는 XHR(XMLHttpRequest)를 사용했다
Fetch는 XHR의 단점을 보완한 새로운 Web API이며, XML보다 가볍고 JavaScript와 호환되는 JSON을 사용한다.
따라서 오늘날에는 XHR보다 Fetch를 많이 사용한다.
🔍 AJAX의 장단점
| 장점 | 단점 |
| 서버에서 HTML을 완성하여 보내주지 않아도 웹페이지를 만들 수 있다. (필요한 데이터를 비동기적으로 가져와 브라우저에서 화면의 일부만 업데이트하여 렌더링 할 수 있다) |
Search Engine Optimization(SEO)에 불리 (처음 받는 HTML 파일에는 데이터를 채우기 위한 틀만 작성되어 있는 경우가 많아서 검색 사이트에서 사이트의 정보를 긁어가기 어렵다.) |
| 표준화된 방법 (이전에는 브라우저마다 다른 방식으로 AJAX를 사용했으나, XHR이 표준화되면서부터 브라우저에 상관없이 AJAX를 사용할 수 있게 되었다) |
뒤로가기 버튼 문제 (뒤로가기 등의 기능을 구현하기 위해서는 별도로 History API를 사용해야 한다) |
| 유저 중심 애플리케이션 개발 (AJAX를 사용하면 필요한 일부분만 렌더링하기 때문에 빠르고 더 많은 상호작용이 가능한 애플리케이션을 만들 수 있다.) |
|
| 더 작은 대역폭 (대역폭: 네트워크 통신 한 번에 보낼 수 있는 데이터의 크기) (AJAX에서는 필요한 데이터를 텍스트 형태(JSON, XML 등)로 보내면 되기 때문에 비교적 데이터의 크기가 작다. ) |
'개념 > 기초지식' 카테고리의 다른 글
| [HTTP/네트워크] REST API, Open API (0) | 2022.08.07 |
|---|---|
| [HTTP/네트워크] SSR&CSR 표 하나로 정리 (0) | 2022.08.07 |
| [HTTP/네트워크] HTTP Messages(HTTP Requests, HTTP Responses) (0) | 2022.08.04 |
| [HTTP/네트워크] 크롬 브라우저 에러 읽기 (0) | 2022.08.04 |
| [HTTP/네트워크] 기초개념 - Domain과 DNS (0) | 2022.08.04 |
