[네트워크]AJAX

AJAX(Asynchronous JavaScript and XML)란, 이름 그대로 JavaScript와 XML을 이용한 비동기적 정보교환 기법이다.

 

위의 그림과 같은 SPA(Single Page Application)를 제작할 때 사용하며, 요즘은 XML보단 가벼운 JSON을 사용한다.

 

추가로 XHR(XMLHttpRequest)을 개선한 Fetch를 사용한다고 한다.

 

AJAX의 가장 큰 특징은 SPA를 다룰 때도 말했지만 필요한 데이터만 비동기적으로 받아올 수 있다는 점이다.

 

구글 검색창을 예로 들면, 검색창에 한 글자를 입력할 때마다 단어들을 서버에서 받아와 추천 검색어로 보여준다.

 

글자를 입력할 때마다 페이지를 새로 로딩하지 않고 필요한 부분만 렌더링 하는데, 이때 사용되는 것이 AJAX이다.

 

또한 인스타그램을 사용할 때 스크롤바를 가장 아래까지 내리면  새로운 글을 서버에서 가져와 렌더링 하는데,

 

(이를 무한 스크롤이라고 한다) 이때 Fetch를 통해 데이터를 업데이트하고 렌더링하게 된다.

 

구체적인 AJAX의 적용 순서는 아래와 같다.

 

1. 클라이언트가 사이트에 접속하면 서버는 사이트의 기본 구조를 담은 '템플릿'을 전달한다.
2. 클라이언트는 수신받은 템플릿 HTML과 CSS를 해석해 화면의 기본 모양을 그린다.
3. 계속해서 서버는 데이터의 요청 방식과 수신받은 데이터를 어떻게 가공해야 하는지를 기술한 자바스크립트 파일을 전달한다.
4. 클라이언트는 자바스크립트 파일을 해석해서 파일에 기술된 방식대로 서버에 추가 데이터를 요청한다.
5. 서버는 순수 데이터를 응답으로 되돌려준다.
6. 클라이언트는 수신한 데이터를 해석하여 템플릿의 적절한 위치에 삽입한다. 데이터의 가공 방식에 따라 삽입 외의 작업(변경, 삭제)을 할 수도 있다.

계속해서 장점과 단점에 대해 알아보자.

 

장점

 

• 서버에서 완성된 HTML을 보내주지 않아도 필요한 데이터를 비동기적으로 가져와 화면의 일부만 업데이트하여 렌더링 할 수 있음
• XHR이 표준화되면서 클라이언트에 상관없이 AJAX를 사용할 수 있게 되었음
• 필요한 일부분만 렌더링하기 때문에 빠르고 풍부한 UX를 가진 애플리케이션을 만들 수 있음
• 필요한 데이터를 텍스트 형태(JSON, XML 등) 보내면 되기 때문에 비교적 데이터의 크기가 작음

 

단점

 

• Search Engine Optimization(SEO)에 불리 - AJAX 웹 앱에서 처음 받는 HTML 파일에는 데이터를 채우기 위한 틀만 작성되어 있는 경우가 많다. 검색 사이트는 전 세계 사이트를 돌아다니며 각 사이트의 모든 정보를 긁어와 사용자에게 검색 결과로 보여주는데, AJAX 방식의 HTML 파일은 뼈대만 있고 데이터는 없기 때문에 사이트의 정보를 긁어가기 어렵다(구글은 AJAX 기반의 웹 사이트도 읽을 수 있다).
• 뒤로 가기 버튼 문제 - AJAX에서는 이전 상태를 기억하지 않기 때문에 뒤로 가기 버튼이 사용자가 의도한 대로 동작하지 않는다. 뒤로 가기 등의 기능을 구현하기 위해서는 별도로 History API를 사용해야 한다.
• 레이아웃이 복잡한 사이트는 웹 브라우저가 렌더링하는 데 힘겨워할 수도 있다. 아주 신속하게 첫 화면을 보여 줄 필요가 있는 경우에도 AJAX는 최소 두 번의 데이터 요청(일반적으로 4회 이상. HTML, CSS, JS 로딩 후 AJAX Call 1회)을 해야 한다는 문제가 있다(속도 저하가 필연적으로 발생한다).