AJAX

# AJAX (Asynchronous Javascript And XML)

• 비동기 통신을 위한 기술들 간의 연계(묶음)을 의미 (자바스크립트 그리고 XML) 

## AJAX 적용 전..

• 기존 웹 애플리케이션은 브라우저 내에서 폼에 입력을 하고, 입력된 값을 웹 서버로 sumit하여 요청을 하였고, 웹 서버는 요청에 대해 데이터를 가공하여 새로운 웹 페이지를 작성하고 응답을 되돌려 주었다.
• 이렇게 하면 결과적으로 중복되는 HTML 코드를 재 전송을 받음으로써 대역폭을 낭비하게 된다.
• 대역폭의 낭비는 곧 금전적 손실을 야기할 수 있어 상호 반응하는 서비스를 만들기 어렵게 한다.
• 정리 : 사용자가 요청을 하면 서버에서는 응답에 따른 처리를 바탕으로 데이터를 전송( 매번 요청 시 매번 새로운 데이터 전송하여 다시 화면을 구성하기때문에 느리다. )

## AJAX 적용

• AJAX의 경우 필요한 데이터만 웹 서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있다.
• 보통 SOAP, XML 기반의 웹 서비스 프로토콜이 사용되며, 웹 서버의 응답을 처리하기 위해 클라이언트 에서는 자바스크립트를 사용한다. 
• 웹 서버에서 전적으로 처리되던 데이터 처리의 일부분이 클라이언트 쪽에서 처리 되므로 웹 브라우저와 웹 서버 사이에 교환되는 데이터량과 웹서버의 데이터 처리량도 줄어들기 때문에 애플리케이션의 응답성이 좋아진다.
• 웹서버의 데이터 처리에 대한 부하를 줄여주는 일이 요청을 주는 수많은 컴퓨터에 대해서 일어나기 때문에 전체적인 웹 서버 처리량도 줄어들게 된다.
• 정리 : 사용자가 요청을 하면 자바스크립트 함수가 자바스크립트 내에 있는 Ajax 브라우저 엔진을 통해 이를 요청 (이때, 필요한 부분의 데이터만 요청) 하면 web and/or XML 서버에서는 데이터베이스에서 필요한 자료만 프로세싱을 통해 가져오게 된다.

## AJAX 장점

• 페이지 이동없이 고속으로 화면 전환이 가능하다.
• 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
• 수신 데이터의 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수 있다.

## AJAX 단점

• Ajax를 쓸 수 없는 브라우저에 대한 문제
• HTTP 클라이언트의 기능 한정
• 페이지 이동없는 통신으로 인한 보안상의 문제
• 지원하는 Charset이 한정되어 있다.
• 스크립트로 작성되므로 디버깅이 용이하지 않다.
• 요청을 남발하면 역으로 서버 부하가 늘 수 있다.

## AJAX 적용 후 확인 방법

• AJAX를 적용 후 확인할 때는 크롬의 경우 F12 클릭 후 Network 내 XHR에서 AJAX 관련 통신을 확인할 수 있다.