웹 페이지 전체가 아닌 필요한 부분의 데이터를 비동기적으로 서버에서 받아와 필요한 부분만 변경하는 웹 개발 기법이다.
AJAX는 Asynchronous JavaScript And XML의 약자로, (즉 비동기식 자바스크립트와 XML) JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법이다.
전통적인 웹 애플리케이션에서는 클라이언트에서 요청을 보내면 매번 새로운 페이지를 서버로부터 받아와 변경할 필요가 없는 부분까지 처음부터 렌더링 했기 때문에 성능면에서 효율적이지 못했다.
그러나 Fetch같은 Web API를 사용하면, 페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아올 수 있다.
(Fetch는 사용자가 현재 페이지에서 작업을 하는 동안 서버와 통신할 수 있도록 한다.)
자바스크립트에서는 DOM을 사용해 html요소들을 조작할 수 있기 때문에, Fetch를 통해 전체 페이지가 아닌 필요한 데이터만 가져와 DOM에 적용시켜 새로운 페이지로 이동하지 않고 기존 페이지에서 필요한 부분만 변경할 수 있다.
즉, 브라우저는 Fetch가 서버에 요청을 보내고 응답을 받을 때까지 모든 동작을 멈추는 것이 아니라, 계속해서 페이지를 사용할 수 있게 하는 비동기적인 방식을 사용한다.
ex)무한 스크롤과 추천 검색어
fetch('http://172.217.25.110:3000/messages')
.then (function(response) {
return response.json();
})
.then(function (json) {
...
});웹페이지는 문서 객체(Document Object)라는 것으로 구성되어 있다.
<HTML>
<HEAD>
<TITLE>타이틀입니다.</TITLE>
</HEAD>
<BODY>
<P>문장입니다.</P>
<IMG SRC="tiger.jpg"></IMG>
</BODY>
</HTML>위 코드를 브라우저에서 로드하면 다음과 같은 결과를 볼 수 있다.
코드를 살펴보면 간단하다.
처음에 <HTML>로 시작하는데, HTML언어로 쓰여져 있다는 것을 알리는 것이다.
<TITLE>여기 있는 내용이 브라우저의 타이틀로 사용된다.
그 다음은 <BODY>라고 정의되고,
그 아래에 <P…> 로 "문장입니다"를 표시하는 태그가 있다.
그 다음은 <IMG…>로 이미지를 표시하는데,위와 같이 호랑이 이미지가 나타난다.
위와 같은 HTML 코드는 실제로 브라우저에서 처리되기 전에 아래와 같이 분해가 된다.
이렇게 분해된 모습을 ‘문서 객체 모델(DOM: Document Object Model)’이라고 부른다.
이것이 중요한 이유는, 일단 이렇게 분해되고 나면 조작하기가 쉽기 때문이다.
예를 들어, 이 상태에서 호랑이 그림을 사자 그림으로 바꾸고 싶다면, 페이지 전체를 다시 구성할 필요 없이 “IMG” 아래 “tiger.jpg”라는 요소만 “lion.jpg”로 바꾸면 된다.
이런 식으로 하면, 웹 페이지 위에 있는 어떤 것이든 조작할 수 있게 된다.
웹페이지에 새로 보여줘야 하는 내용이 서버에서 와야 할 경우가 있다.
그럴 경우, 서버에 그 내용을 요청해놓고 다른 작업을 하고 있다가 원하는 내용이 도착하면 그 때 업데이트한다.
다른 예로,
카페에서 커피를 주문할 때 두 가지 선택을 할 수 있다.
하나는 주문하고 음료가 완성될 때까지 카운터 앞에서 기다리는 것이다.
이러한 경우는 커피를 주문하고자 하는 사람이 많을 경우 한 사람이 주문하고 음료를 받을 때까지 뒷 사람들은 기다려야만 한다. 즉 모든 과정이 순차적으로 일어나야만 한다.
이것이 바로 “동기(Synchronous)” 방식이다.
또 한가지는, 음료를 주문하고 자리에 앉아서 친구와 수다를 떨거나 다른 작업을 하는 것이다.
그리고 이후 음료가 완성되면 진동벨로 호출받고 음료를 받아 하던 작업을 마저 수행하면 된다.
이러한 경우에는 사람들은 각자의 음료를 주문하고나서 각자 다른 작업을 수행할 수 있다.
이것이 “비동기(Asynchronous)” 방식이다.
Ajax에서 A의 약자가 바로 Aynchronous(비동기 방식)를 의미한다.
페이지 전체를 새로 로드하는 것이 첫 번째 방식과 비슷하다.
이 경우, 사용자는 버튼을 눌러 놓고 (즉, 커피를 주문하고) 커피가 제조될 때까지 가만히 기다려야 한다.
두 번째 방식의 경우, 사용자는 커피를 주문하고 다른 일을 할 수 있다.
진동벨이 울리면(커피가 완성되면), 그 때 커피를 받고 하던 작업을 하면된다.
AJAX의 장점
- 서버에서 HTML을 완성하여 보내주지 않아도 웹페이지를 만들 수 있다.
전에는 서버에서 HTML을 완성하여 보내주어야 화면에 렌더링을 할 수 있었지만, AJAX를 사용하면 서버에서 완성된 HTML을 보내주지 않아도 필요한 데이터를 비동기적으로 가져와 브라우저에서 화면의 일부만 업데이트하여 렌더링 할 수 있다.
- AJAX를 사용하면 필요한 일부분만 렌더링하기 때문에 빠르고 더 많은 상호작용이 가능한 애플리케이션을 만들 수 있다.
- 더 작은 대역폭 (네트워크 통신 한 번에 보낼 수 있는 데이터의 크기)
이전에는 서버로부터 완성된 HTML 파일을 받아와야 했기 때문에 한 번에 보내야 하는 데이터의 크기가 컸다. 그러나 AJAX에서는 필요한 데이터를 텍스트 형태(JSON, XML 등) 보내면 되기 때문에 비교적 데이터의 크기가 작다.
AJAX의 단점
- Search Engine Optimization(SEO)에 불리
AJAX 방식의 웹 애플리케이션은 한 번 받은 HTML을 렌더링 한 후, 서버에서 비동기적으로 필요한 데이터를 가져와 그려낸다. 따라서, 처음 받는 HTML 파일에는 데이터를 채우기 위한 틀만 작성되어 있는 경우가 많다.
그리고 검색 사이트에서는 전 세계 사이트를 돌아다니며 각 사이트의 모든 정보를 긁어와, 사용자에게 검색 결과로 보여준다.
그런데 AJAX 방식의 웹 애플리케이션의 HTML 파일은 뼈대만 있고 데이터는 없기 때문에 사이트의 정보를 긁어가기 어렵다.
- 뒤로가기 버튼 문제
일반적으로 사용자는 뒤로가기 버튼을 누르면 이전 상태로 돌아갈 거라고 생각하지만, AJAX에서는 이전 상태를 기억하지 않기 때문에 사용자가 의도한 대로 동작하지 않는다. 따라서 뒤로가기 등의 기능을 구현하기 위해서는 별도로 History API를 사용해야 한다.
