Ajax

비동기 자바스크립트와 XML(Asynchronous Javascript And XML)을 말한다.

Ajax는 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하며 XML 뿐만 아니라 HTML, JSON, 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다.
Ajax의 가장 큰 특징과 핵심적인 부분은 웹 페이지 전체를 다시 로딩하지 않고 웹 페이지의 필요한 일부분만을 갱신할 수 있게 해주는 것이다.

사용하는 이유는 무엇일까?

Ajax를 사용하면 요청과 관련된, 정말 필요한 내용만 부분적으로 갱신하여 필요한 데이터와 자원만 받아 올 수 있어 시간과 자원을 아낄 수 있다. 페이지를 새로고침 하지 않고 단순히 웹에서 무언가를 부르거나 어떠한 데이터를 조회 하고싶은 경우에 주로 사용한다.

예를들어 네이버, 카카오, 배달의 민족 처럼 통신량이 어마어마한 곳들은 항상 과부하에 대해 신경쓰고 리소스를 관리할 것이다. 하나의 웹 페이지를 구성하기 위해 필요한 파일과 그 용량이 엄청 많을것인데, 페이지를 전환할 때마다 모든 파일을 다운 받는 것 보다 사용자가 원하는 내용만 요청해서 필요한 것만 부분적으로 변경하는것이 더 좋을것이다.

Ajax을 사용하면 얻는 장점에 대해 요약해 보자면 아래와 같다.

• 필요한 데이터만 가지고 오는 것으로 웹 페이지를 새로고침 하는 것보다 속도가 향상된다

• 서버의 처리가 완료될 때 까지 기다리지 않고 처리 가능하다
  (비동기적인 특징)

• 서버에서 데이터만 전송하면 되어 전체적인 코드의 양이 줄어든다

이렇게 Ajax를 사용하면 누릴 수 있는 장점이 매우 크다. 하지만 히스토리 관리가 안되거나 페이지가 이동하지 않는 통신이라 보안에 더 신경을 써야한다는 점 등의 단점도 있으니 신중하게 생각하여 사용해야 한다.👀

Ajax의 동작원리

다음은 Ajax의 동작 원리를 나타낸 그림이다. 동작 원리에 따른 설명을 그림 속 순서에 따라 설명해 보겠다.

① : 먼저 사용자에 의한 요청 이벤트가 발생한다.

② : 요청 이벤트가 발생하면 이벤트 핸들러라는 것에 의해 자바스크립트가 호출된다.

③ : 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청을 보낸다.

(이때 웹 브라우저는 요청을 보내고 서버의 응답을 기다릴 필요 없이 다른 작업을 처리할 수 있다.)

④ : 서버는 전달받은 XMLHttpRequest 객체를 가지고 Ajax 요청을 처리한다.

⑤, ⑥ : 서버는 처리한 결과를 HTML, XML 또는 JSON 형태의 데이터로 웹 브라우저에 전달한다.

⑦ : 서버로부터 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신하는 자바스크립트를 호출한다.

⑧ : 웹 페이지가 필요로했던 부분만 다시 로딩되어 표시된다.

Ajax의 한계

Ajax는 클라이언트가 서버쪽으로 데이터를 요청하는 방식이다. 그렇기 때문에 사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는 서버 푸시 방식(스마트 폰에서 각종 앱이 보내는 푸시알림 등)의 실시간 서비스는 만들기가 어렵다는 한계가 있다.

Ajax 프레임워크

Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은 개발 환경을 Ajax 프레임워크라고 한다.
최근 자주 쓰이는 Ajax 프레임워크에는 Prototype, script.aculo.us, dojo, jQuery, axios 같은 것들이 있고, 이 외에도 수많은 Ajax 프레임워크들이 널리 사용되고 있다고 한다. 나는 위의 Ajax프레임워크 중 현재까지 JQuery만 사용해 봤지만 앞으로 다양한 Ajax 프레임워크들을 경험해 보고 싶다.😍