(191215) AJAX

AJAX가 등장하기 전

AJAX가 등장하기 전에는 웹 브라우저가 서버에 데이터를 요청하면 서버는 해당 정보를 통째로 보내주었다. 그리고 그럴때 마다 페이지 전체가 다시 리로드 되야했다. 이럴 경우에는 클라이언트와 서버 모두 많은 자원과 시간이 낭비된다.

 

그래서 비동기적으로 데이터를 요청하는 기술이 생겨났다. 페이지를 렌더링하고나서 특정부분만 데이터를 받아 변경할 수 있으면 서버에서는 필요한 데이터만 줄 수 있고, 클라이언트는 적은 부분만 렌더링하면 되기 때문에 자원과 시간이 모두 절약된다. 

 

이러한 관점에서 AJAX가 나오게 되었다.

 

AJAX란?

AJAX는 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자로 자바스크립트 라이브러리 중 하나이다.

 

XML은 eXtensible Markup Language의 약자이다. 이름에서 알 수 있듯이, 마크업 언어이다. HTML처럼 데이터를 보여주는 목적이 아닌 저장하고 전달할 목적으로 만들어졌다. 하지만 JSON 형식에 비해 구문이 길고, 데이터를 읽는 속도가 더 느리고, 자바스크립트로 사용하기 불편한 점 등 여러 이유로 인해 최근에는 JSON이 많이 쓰이고 있다. (XML은 본적이 없음...)

 

브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해 전체 페이지를 새로고치지 않고 페이지의 일부만을 로드하는 기법을 나타내며 자바스크립트를 사용한 비동기 통신, 클라이언트와 서버간의 XML 데이터를 주고받는 기술이라고 할 수 있다.

 

XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위하여 사용됩니다. 전체 페이지의 새로고침없이도 URL 로부터 데이터를 받아올 수 있습니다. 이는 웹 페이지가 사용자가 하고 있는 것을 방해하지 않으면서 페이지의 일부를 업데이트할 수 있도록 해줍니다. XMLHttpRequest 는 AJAX 프로그래밍에 주로 사용됩니다. (MDN)

 

즉, 자바스크립트를 통해 서버에 데이터를 요청하는 것을 말한다.

 

비동기식

비동기 통신 또는 방식을 좀 더 설명하자면 동기식으로 처리할 경우, 클라이언트에서 서버에 요청을 보내고, 서버에서 응답을 보내 받을때까지 다른 요청 또는 작업을 수행할 수 없다.

 

하지만 비동기 처리의 경우 요청을 보내고 그 요청에 대한 응답을 받기까지 기다리지않고 다른 요청이나 작업을 바로 진행할 수 있기 때문에 여러 작업을 동시에 진행할 수 있다는 장점이 있다. 즉, 서버와 통신하는 동안 다른 작업을 할 수 있다.

 

따라서 서버에서 로딩된 데이터를 페이지에 보여주기 위해서 페이지를 다시 리로드 하지않고, 비동기를 이용하여 페이지의 일부분만 업데이트 할 수 있는 것이다.

 

 

AJAX를 사용하는 이유

기본적으로 HTTP 프로토콜은 Connectless 방식이기 때문에 클라이언트에서 요청을 보내고 서버쪽에서 응답을 받으면 연결이 끊어진다. 그래서 화면의 내용을 업데이트하기 위해서는 다시 요청을 보내고 응답을 받아 페이지 전체를 리로드 한다. 이럴 경우 자원와 시간이 많이 들어간다. 

 

AJAX를 사용하면 XMLHttpRequest 객체를 이용하여 서버에 요청을 보내고 응답을 받기 때문에 위에서 계속 언급되었던 문제들을 해결할 수가 있는 것이다.

 

AJAX를 이용하면 다음과 같은 장점이 있다.

- 웹페이지의 속도 향상

- 비동기적 처리

- 서버에서는 필요한 data만 보내주면 되므로 코딩의 양이 줄어듬

- 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해줌 (예를들어, 사진 제목이나 태그를 리로드 없이 수정 등)

 

---

AJAX의 핵심은 한마디로 하면 비동기 처리로 전체 페이지의 리로드 없이 필요한 부분만 업데이트 한다는 것이다.

 

AJAX는 코딩 언어 같은 것이 아니라 프로그래밍 기법이다. XMLHttpRequest를 사용하여 구현한다. 그리고 jQuery를 이용하여 좀 더 손쉽게 사용하는 것 같다. 

 

하지만... 나는 jQuery는 사용하지 않아서 잘 모르고, 최근에는 fetch API나 axios등을 사용하기 때문에 XMLHttpRequest를 사용할 일이 없을 것 같다. 그리고 최근 api를 사용하면서 은연중에 ajax를 구현하고 있었던 것 같다(?)

 

그래도 AJAX가 대강 무슨 개념인지는 알아 두는게 좋을 것 같다.