AJAX

# AJAX

-Asynchronous JavaScript And XMLHttpRequest

-JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법.
-가장 큰 특징은 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다는 것이다.
-비동기적으로 데이터를 서버에서 받아와 브라우저에 렌더링을 하는것이다.

 

#원티드사이트에서 맨밑까지 스크롤하여 스크롤바 하단에 도달하면, 새로운 채용공고를 서버로부터 가져와 렌더링한다.
이러한 이벤트를 무한 스크롤이라고 한다. 
무한스크롤이 발생할때마다 Fetch를 통해 데이터를 가져와서 업데이트하고 렌더링한다.

 

#두가지 핵심기술
-AJAX를 구성하는 핵심기술은 자바스크립트와 DOM, Fetch이다.
-fetch를 사용하면 페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아올수있다. 브라우저는 fetch가 서버에 요청을 보내고 응답을 받을때까지 모든 동작을 멈추는 것이 아니라 계속해서 페이지를 사용할수있게하는 비동기적인 방식을 사용한다.
-자바스크립트에서 DOM을 사용해 조작할수있기 때문에, fetch를 통해 전체 페이지가 아닌 필요한 데이터만 가져와 DOM에 적용시켜 새로운 페이지로 이동하지 않고 기존 페이지에서 필요한 부분만 변경할수있다.
-fetch이전에는 XHR(XMLHttpRequest)를 사용했다. fetch는 XHR의 단점을 보완한 새로운 web api이며, XML보다 가볍고 자바스크립트와 호환되는 JSON을 사용한다. 현재는 XHR보다 fetch를 더 많이 사용한다.

# AJAX의 장점
1.서버에서 html을 완성하여 보내주지 않아도 웹페이지를 만들수있다.
-서버에서 완성된 html을 보내주지 않아도 필요한 데이터를 비동기적으로 가져와 브라우저에서 화면의 일부만 업데이트하여 렌더링 할수있다.
2.표준화된 방법
-이전에는 브라우저마다 다른 방식으로 AJAX를 사용했으나, XHR이 표준화되면서부터 브라우저에 상관없이 AJAX를 사용할수있게되었다.
3.유저 중심 애플리케이션 개발
-필요한 일부분만 렌더링하기 때문에 빠르고 더 많은 상호작용이 가능한 애플리케이션을 만들수있다.
4.더 작은 대역폭
-대역폭: 네트워크 통신 한번에 보낼수있는 데이터의 크기
-필요한 데이터를 텍스트형태(JSON, XML등)로 보내면 되기 때문에 비교적 데이터의 크기가 작다.

 

# AJAX의 단점
1.SEO(Search Engine Optimization)에 불리
-AJAX 방식의 웹 애플리케이션은 한 번 받은 HTML을 렌더링 한 후, 서버에서 비동기적으로 필요한 데이터를 가져와 그려냅니다.
따라서, 처음 받는 HTML 파일에는 데이터를 채우기 위한 틀만 작성되어 있는 경우가 많습니다. 검색 사이트에서는 전 세계 사이트를 돌아다니며 각 사이트의 모든 정보를 긁어와 사용자에게 검색 결과로 보여줍니다. 
AJAX 방식의 웹 애플리케이션의 HTML 파일은 뼈대만 있고 데이터는 없기 때문에 사이트의 정보를 긁어가기 어렵습니다.
2.뒤로가기 버튼 문제
-AJAX에서는 이전 상태를 기억하지 않기 때문에 사용자가 의도한 대로 동작하지 않는다.  따라서 뒤로가기 등의 기능을 구현하기 위해서는 별도로 history API를 사용해야 한다.