[jQuery] - ajax가 도대체 뭐야? (Asynchronous Javascript And Xml)

ajax 란

JavaScript 의 라이브러리 중 하나이며

 " 비동기식 자바스크립트와 xml "

(Asynchronous Javascript And Xml) 의 약자이다

 

브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여

페이지를 새로고침하지 않고, 일부만을 새로 로드하는 기법(비동기식)이다

 

즉, 쉽게 풀어보면 JavaScript 를 통하여

클라이언트가 서버에 데이터를 비동기 통신으로 요청하는 것이다

 

 

 비동기 통신이란?

 

페이지를 새로고침하지 않고도

데이터를 불러오는 방식이다

 

예를 들어

네이버 블로그나 카페에서 댓글을 작성하면

전체 페이지가 새로 로드되지 않고

댓글 영역 부분만 업데이트되어

새로 작성한 댓글이 적용되는 방식이다

 

그렇다면,

동기 통신이란?

 

쉽게 말해

페이지가 전체로 리로딩되는 것

 

그렇다면,

굳이 비동기통신으로

데이터를 요청하는 이유는 뭘까?

 

비동기통신을 사용하면

필요한 부분만 갱신하여

시간과 자원을 아낄 수 있다

 

 웹 페이지 전체를

새로고침 하는 것보다 속도가 향상되며

전체적인 코드의 양이 줄어들고

서버의 처리가 완료될 때까지

기다리지 않고 처리가 가능하다

 

다시 말해

동기 통신은 통신을 하는 동안

다른 처리를 아무것도 못하고

오직 통신에만 집중해야 하지만

 

비동기 통신은

페이지는 가만히 있고

필요한 일부만 리로딩되기 때문에 통신을 하면서

다른 처리를 동시에 병렬적으로 처리할 수 있다

 

이러한 특성 때문에

비동기 통신의 장점은

 

페이지 전체의 리소스를 다시 불러오지 않아서

불필요한 리소스 낭비가 발생되지 않는다는 점

 

화면이 깜빡거리거나 멈추지 않고 부드럽게

작동하기에 사용자에게 보다 더 편리함 제공

 

요청과 응답이 동시에 일어나지 않아도 되기 때문에

요청을 보낸 후에 다른 작업이 가능하다는 점 등이 있다

 

단점으로는 처리 순서에 대한 보장이 없다는 점

 

즉 A 요청을 보낸 후 B 요청을 보냈을 때

B 처리가 더 빨라 B 응답이 먼저 올 수도 있다

따라서 순서를 보장해야 하는 처리에는 부적절할 수 있다

 

또한 보안상의 문제,히스토리 관리가 되지 않고

연속으로 데이터 요청 시 서버 부하

브라우저 호환성 등등 단점들 또한 존재한다

 

따라서 상황에 맞게

비동기 통신과 동기 통신을

적절히 배치해야 할 것이다

 

결론지어보자면

앞서 설명했던, 비동기 통신의

가장 대표적인 방식이

이 글의 주제인 ajax 이다