비동기 통신 Ajax 개념 (Asynchronous Javascript And Xml)

비동기 통신 ajax

 

 

비동기 통신 Ajax 개념 (Asynchronus Javascript And Xml)

 

ajax는 javascript의 라이브러리로, 클라이언트와 서버 간에 XML 데이터를 주고받는 비동기 통신입니다. (reload 없이 데이터를 불러오는 방식)

 

HTTP 프로토콜은 클라이언트와 서버 사이에서 Request를 보내고, Response를 받으면 연결이 끊어지는 무상태성(stateless)를 가지고 있습니다. 그래서 화면의 내용을 갱신하기 위해서는 다시 request를 보내고 response를 받아 전체 페이지를 갱신해야 합니다. 그렇기 때문에 페이지에서 작은 부분을 갱신하기 위해 전체 페이지를 다시 리로드 하는 자원과 시간이 낭비되는 상황이 생깁니다.

 

이때 ajax를 사용하면 XMLHttpRequest 객체를 통해 서버에 request 요청을 하고, 새로운 웹 페이지로 이동하는 것이 아니라 동일한 웹 페이지 내에서 필요한 부분한 DOM으로 변경하는 것이 가능해집니다.

 

 

 

장점

• 최소한의 데이터 통신으로 속도가 빠르고 부하가 적습니다.
• 비동기 통신이기 때문에 클라이언트는 요청에 대한 서버의 처리가 완료될 때까지 기다리지 않고 다른 작업을 할 수 있습니다.
• 웹 페이지의 갱신을 클라이언트가 담당하여 페이지 전환 대신 일부분만 변경하기 때문에 빠른 랜더링이 가능합니다.

 

 

단점

• 히스토리 관리가 어렵습니다.
• 연속적으로 데이터를 요청할 경우 서버에 부하가 증가할 수 있습니다.
• XMLHttpRequest를 통해 통신을 하는 경우 사용자에게 아무런 진행 정보가 주어지지 않습니다.
  (때문에 요청이 완료되지 않았는데 사용자가 페이지를 떠나거나, 작업이 오작동할 경우가 생길 수 있습니다.)
• 자바스크립트 엔진 표준 스팩의 동일 출처 정책 (SOP, Same-Origin Policy) 보안 규칙이 있습니다.
  (여러 도메인에 걸쳐서 구성되는 대규모 웹 프로젝트나 REST API 등 외부 호출이 많을 때 번거로울 수 있습니다.)

 

* Same-Origin Policy

여기서 같은 출처라는 것은 프로토콜, 호스트명, 포트가 같다는 것을 의미합니다. 즉 쉽게 말하자면 웹 페이지의 스크립트는 그 페이지와 같은 서버에 있는 주소로만 ajax 요청을 할 수 있습니다.

 

=> 이 부분은 JSONP 또는 CORS (Cross-Origin Resource Sharing) 등의 방법을 통해 해결할 수 있습니다.

 

 

 

데이터 형식

ajax에 사용되는 데이터 형식은 CSV, JSON, XML 형식이 있습니다.

 

 

CSV

: ,로 데이터 속성을 나눌 수 있고, 줄 바꿈으로 데이터를 나누는 방식으로 용량이 적다는 장점과 가독성이 떨어진다는 단점이 있습니다.

 

XML

: CSV 형식의 가독성을 개선하기 위해 나온 데이터 형식입니다. 속성과 데이터를 구분하며 CSV에 비해 가독성이 좋다는 장점이 있고, 용량이 큰 단점이 있습니다. 데이터가 많아지면 분석력이 떨어집니다.

 

JSON

: javascript 객체 형태로 데이터를 전송하며, 가장 많이 사용되는 형식입니다. 가독성이 좋고, 용량도 적지만 데이터가 많아지면 분석력이 떨어진다는 단점이 있습니다.

 

 

 

 

추가로 ajax는 javascript 언어를 그대로 사용하면 구현에 많은 코드를 필요로 합니다. 그래서 ajax를 손쉽게 사용할 수 있도록 여러 가지 기능을 포함해 놓은 환경을 ajax 프레임워크라고 합니다.

 

대표적으로 jQuery, srcipt.aculo.us, Prototype, dojo 등이 있습니다.

 

 

 

 

 

함께 보면 좋은 글

 

https://wildeveloperetrain.tistory.com/37

(Web) HTTP 통신의 개념과 예제