📞 AJAX

Ajax는 현대 동적인 웹에서 필수적으로 사용되는 javascript 기술이다.
또한 기술 면접에서 자주 묻는 키워드이므로 한번 정리해보자.

Ajax(Asynchronous Javascript and XML)과 탄생배경

ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기적으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 동적으로 웹페이지를 갱신하는 프로그래밍 방식이다.

Ajax이전 웹페이지의 문제점

기존 정적인 웹에서는 페이지 전환시 데이터의 변동사항이 있을 때, 서버에게 html을 요청하여 기존에 변하지 않는 데이터도 다시 응답받았다.

때문에 페이지 전환에 있어 작은 데이터의 변화에도 불구하고 전체적인 문서를 다시 요청/응답받아와야하기 때문에 비효율적인 단점이 있었다.

이로 인해 화면 전환이 일어나면 화면이 순간적으로 깜빡이는 현상이 발생한다.

1. 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함된 완전한 HTML을 서버로부터 매번 전송받기 때문에 불필요한 데이터 통신이 발생한다.
   2. 변경할 필요가 없는 부분까지 처음부터 다시 렌더링한다. 이로 인해 화면 전환이 일어나면 화면이 순간적으로 깜빡이는 현상이 발생한다.
2. 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때까지 다음 처리는 블로킹된다.

카테고리가 있는 뉴스 웹페이지를 만들어본다고 생각해보자.

Ajax를 활용하면 내가 만들어놓은 틀안에서 News API를 불러와 각 카테고리마다 필요한 데이터를 업로딩할 수 있다.

하지만 Ajax를 사용하지 않으면 다른 url에 카테고리별로 데이터를 로딩하기 위해서 html에 각 카테고리별로 해당 데이터를 수기로 작성해야한다.

즉, 각 카테고리별 html을 다시 작성해주고 해당 데이터를 각 html에 카테고리에 맞는 데이터를 작성해줘야한다는 것이다.

또한 이렇게 되면 위에서 설명한 것처럼 페이지전환에 있어서 각 html을 새로 받아와 화면이 깜빡임이 발생하게 되는 것이고 서버가 응답하기 전까지는 블로킹 처리가 되는 것이다.

Ajax 등장

하지만 ajax는 이에 대한 해결책을 제시했다.
서버로부터 웹페이지의 변경에 필요한 데이터만 비동기 방식으로 전송받아 웹페이지를 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 변경할 필요가 있는 부분만 한정적으로 렌더링하게 해줬다.

이를 통해 불필요한 데이터 통신이 발생하지 않게 되어 변경할 필요가 없는 부분은 리렌더링할 필요가 없어졌다.
그렇게 됨으로써 화면이 전환될 때 순간적으로 깜빡이는 현상 또한 발생하지 않는다.

ajax 방식은 내비게이션 클릭 이벤트를 캐치하고 preventDefault 메서드를 사용해 서버로의 요청을 방지한다. 이후, href 어트리뷰트에 path을 사용하여 ajax 요청을 하는 방식이다.

그리고 비동기방식으로 작동하여 응답을 받을 때까지 블로킹도 발생하지 않는다.

ajax의 이러한 장점들은 이전과 달리 빠른 퍼포먼스와 부드러운 화면 전환을 가능하게 했다.

Ajax의 특징

• ajax는 비동기적으로 작동한다.

• ajax는 XMLHttpRequest 객체를 기반으로 작동한다.
  XMLHttpRequest은 비동기 처리를 위한 프로퍼티 및 메서드를 제공한다.

• 주로 json이라는 텍스트 데이터 포멧으로 통신한다.

Reference

• https://poiemaweb.com/js-ajax
• https://poiemaweb.com/js-spa