Ajax(정보 교환 기법) 에이잭스를 알아보자

0. 들어가기

Fetch API를 찾아보니 Fetch는 Ajax의 최신 버전이라고 한다. Ajax가 뭔지 먼저 알아봐야겠다.

 

0.1 에이잭스란?

Ajax는 "Asynchronous JavaScript and XML"(비동기식 자바스크립트와 XML)의 약자로, 웹 페이지에서 비동기적으로 데이터를 서버로부터 가져와 화면을 갱신하는 웹 개발 기법이다.

 

비동기적으로 작동하기 때문에 페이지를 새로고침 하지 않고도 동적으로 정보를 업데이트 할 수 있어 사용자 경험을 향상시킨다.

 

이름에 XML을 명시하고 있긴 하지만, JSON이나 일반 텍스트 파일같은 다른 데이터 오브젝트도 사용 가능하다. 요즘은 JSON을 주로 다룬다.

 

1. Ajax 이전 - 전통적인 웹 어플리케이션

기존 어플리케이션은 브라우저에서 폼 채워 제출 - 웹 서버는 요청된 내용에 따라 데이터를 가공 - 응답으로 새로운 웹 페이지를 작성해서 보내기 단계를 거친다.

 

이 때 최초에 폼을 가지고 있던 페이지와 사용자가 이 폼을 채워 결과물로써 돌려받는 페이지는 일반적으로 유사한 내용을 가지고 있는 경우가 많다.

 

결과적으로 중복되는 HTML 코드를 다시 한 번 전송받음으로써 많은 대역폭을 낭비하게 된다.

 

 

2. Ajax 어플리케이션

반면 Ajax는 웹 페이지의 디자인 요소와 data를 분리한다.

 

처음 사이트에 접속하면 웹 서버는 해당 페이지의 스타일과 레이아웃을 정의하는 정적 HTML 파일과 CSS 파일, 그리고 데이터를 어떻게 요청하면 되는지를 설명한 JavaScript 파일을 전달한다.

 

브라우저는 일단 이걸로 페이지의 골격을 구축하고, 전달받은 JavaScript를 실행해서 서버에 데이터만을 별도로 요청한다.

 

이 때 서버에서 주는 응답은 HTML이 아닌 XML, JSON같은 순수한 데이터 객체이다.

브라우저가 이 데이터를 수신하면 미리 만들어 둔 틀 안에 데이터를 끼워 넣는다.

 

기존 웹 어플리케이션 모델과 Ajax를 사용한 어플리케이션 비교

 

2.1 Ajax 어플리케이션 과정 정리

1. 브라우저가 사이트에 접속하면 서버는 사이트의 기본 얼개를 담은 '템플릿'을 전달한다.
2. 브라우저는 수신받은 템플릿 HTML과 CSS를 해석해 화면의 기본 모양을 그린다.
3. 계속해서 서버는 데이터의 요청 방식과 수신받은 데이터를 어떻게 가공해야 하는지를 기술한 자바스크립트 파일을 전달한다.
4. 브라우저는 자바스크립트 파일을 해석해서 파일에 기술된 방식대로 서버에 추가 데이터를 요청한다.
5. 서버는 순수 데이터를 응답으로 되돌려준다.

 

2.2 Ajax 어플리케이션의 장단점

장점

1. 페이지 이동없이 고속으로 화면을 전환할 수 있다.
2. 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.

3. 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.

  - 웹 서버에서 전적으로 처리되던 데이터 처리의 일부분이 클라이언트 쪽에서 처리되므로 웹 브라우저와 웹 서버 사이에 교환되는 데이터량과 웹서버의 데이터 처리량도 줄어든다.

4. 플러그인 없이도 인터렉티브한 웹페이지 구현할 수 있다.

---

단점

1. Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다(그러나 대부분은 사용 가능하다).
2. HTTP 클라이언트의 기능이 한정되어 있다.
3. 페이지 이동없는 통신으로 인한 보안상의 문제가 잇다.
4. 지원하는 문자집합(Charset)이 한정되어 있다.
5. 스크립트로 작성되므로 디버깅이 용이하지 않다.
6. 요청을 남발하면 역으로 서버 부하가 늘 수 있음.
7. 동일-출처 정책으로 인해 다른 도메인과는 통신이 불가능하다.

 

 

마무리

요즘은 Ajax의 단점을 극복하고 사용하기 편리한 현대적인 방식으로 Fetch API를 도입했다.

다음은 Fetch API에 대해 알아보자.

 

---

내용 및 그림 출처 : https://ko.wikipedia.org/wiki/Ajax