[Web] AJAX

 AJAX(Asynchronous JavaScript And XMLHttpRequest)는 JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법이다.

 

 기본적으로 HTTP 프로토콜은 화면의 내용을 갱신하기 위해서는 클라이언트 쪽에서 request를 보내고 서버 쪽에서 response를 받으면서 페이지 전체를 갱신하게 되는데, 이런 경우 자원과 시간의 낭비가 발생한다. 하지만 AJAX는 페이지 전체가 아닌 일부분만 갱신할 수 있기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

 

 가장 큰 특징으로는 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아올 수 있다는 것이다. 이러한 '비동기성'을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만 업데이트할 수 있다.

 

 예를 들어 구글에 접속하면 html에 의해서 유저에게 필요한 페이지가 렌더링 된다. 여기서 딱 한 부분은 유저의 요구에 따라 반응하며 변화하는 부분이 있는데 바로 검색창이다. 즉, 검색창에서는 필요한 데이터만 비동기적으로 받아와 렌더링 되며, 여기에 AJAX가 사용된다.

 

 

 

 

AJAX의 핵심 기술

 

 AJAX를 구성하는 핵심 기술은 JavaScript와 DOM, Fetch가 있다.

 

 Fetch를 통해 페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아올 수 있다. Fetch는 사용자가 현재 페이지에서 작업을 하는 동안 서버와 통신할 수 있도록 한다. 즉, 브라우저는 Fetch가 서버에 요청을 보내고 응답을 받을 때까지 모든 동작을 멈추는 것이 아니라 계속해서 페이지를 사용할 수 있게 하는 비동기적인 방식을 사용한다.

 

 또한 JavaScript에서 DOM을 사용해 조작할 수 있기 때문에 Fetch를 통해 전체 페이지가 아닌 필요한 데이터만 가져와 DOM에 적용시켜 새로운 페이지로 이동하지 않고 기존 페이지에서 필요한 부분만 변경할 수 있다.

 

 

 

 

장점

 

• 서버에서 완성된 HTML을 보내주지 않아도 필요한 데이터를 비동기적으로 가져와 브라우저에서 화면의 일부만 업데이트하여 렌더링할 수 있다.
  
  
• 더 빠르고 더 많은 상호작용이 가능한 애플리케이션을 만들 수 있다.
  
  
• 필요한 데이터를 텍스트 형태(JSON, XML 등)로 보내면 되기 때문에 비교적 데이터의 크기가 작다.
  
  
• 서버에서 데이터만 전송하면 되므로 전체적인 코딩의 양이 줄어든다.
  
  
• 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다.

 

 

 

 

단점

 

• 뒤로 가기 등의 기능을 구현하기 위해서는 별도로 History API를 사용해야 한다.
  
  
• 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
  
  
• 보안상의 문제가 있다.
  
  
• 요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생할 수 있다.
  
  
• Script로 작성되므로 디버깅이 용이하지 않다.