[ajax]1. 개요

이번 시리즈에서는 ajax의 개념과 vanilla js, jquery, axios에서 ajax를 처리하는 방법에 대해서 살펴본다.

 

동기와 비동기

프로그래밍에서 요청사항을 처리하는 방식으로 "동기적" 또는 "비 동기적인" 처리 라는 개념이 존재한다.

동기 처리

먼저 동기처리란 사용자가 요청을 하면 서버가 요청을 처리하고 응답을 보내줄때까지 사용자는 잠시 대기하게 된다. 즉 서버에서 응답을 받아야만 다음 동작이 가능해진다.

동기처리(출처:Asynchronous vs Synchronous Ajax - Dinesh on Java)

일반적으로 동기처리는 "submit"을 처리할 때 발생하며 서버에서는 요청에 따라 화면을 그릴 HTML을 생성해서 회신하게 된다. 결과적으로 동일한 화면이더라도 전체를 새로 그리게 된다.

 

비 동기 처리

반면 비 동기처리는 사용자가 요청을 하고 서버의 요청 결과를 기다리지 않고 바로 다음 동작을 진행한다. 즉 서버에서의 응답 여부에 상관 없이 다음 동작이 가능해진다.

비동기처리(출처:Asynchronous vs Synchronous Ajax - Dinesh on Java)

비동기 통신은 "submit" 동작이 아닌 javascript 이벤트를 처리하면서 발생하며 서버에서는 요청에 따라 데이터 조각만을 회신한다. 그럼 결과를 받은 javascript 단에서 데이터를 이용해서 화면을 그리게 된다. 당연히 동일환 화면을 새로 그릴 필요는 없고 필요한 부분만 갱신하므로 효율적이다.

 

다시한번 정리해보면

위 내용을 다시한번 정리해보면 아래와 같다.

 

AJax

Ajax란 Asynchronous JavaScript And XML의 약자로 말 그대로 비 동기로 처리되는 JavaScript와 XML을 의미한다. 

AJAX의 개요

ajax는 JavaScript 기반으로 동작하며 전달되는 데이터의 형태로 XML을 사용하기 때문이다. 물론 최근에는 XML 보다 JSON 형태를 많이 사용하지만 적어도 개념이 나왔을 때는 XML을 많이 사용했었다.

Ajax의 주요 사용처는 화면의 전환 없이 클라이언트와 서버간에 XML, JSON, HTMl 등의 정보를 교환할 때 사용된다.

예를 들어 Google을 통해서 map을 보고 있는데 최초 이 화면을 그리는데 엄청나게 많은 양의 html이 서버에서 클라이언트로 전송되었을 것이다. (이처럼 처음 화면에서 필요한 전체 html을 받아와서 처리하는 경우가 동기 처리이다.)

화면을 보다가 특정 지점(서울역)에 마우스 커서를 가져다 대면 역에 대한 정보가 표시된다. 

그런데 이 지도에는 어마어마하게 많은 지점들이 있는데 최초에 지도가 로딩되었을 때부터 그런 정보를 가지고 있었을리는 만무하다! 그럼 새로 서버에 요청해서 정보를 가져왔을텐데 서울역 정보 이외 나머지 화면이 동일한 상태에서 처음의 경우처럼 전체 데이터를 다 가져와서 뿌리고 서울역 정보만 추가하는 것도 너무 낭비적이다.

이런 상황에서 기존 화면은 그대로 두고 추가적인 데이터(서울역 정보)만 서버에서 가져와서 뿌려주기 위한 기술이 Ajax이다. 

 

주요 사용처

AJAX는 화면 전환 없이 클라이언트와 서버간에 정보를 교환하고 JavaScript에서 화면을 갱신하기 위해서 사용된다. 앞서 봤던 구글 맵이나 구글의 실시간 검색, 댓글을 달 때 화면 전환 없이 바로 작성하는 화면 등에 AJAX가 적용된다.

실시간 검색: 이런 검색어들을 미리 만들어놨을리 없다.

 

 

아이디 중복에 대한 내용만 가져와서 화면에 추가한다.

 

그럼 어떻게 AJAX를 사용할 수 있을지 살펴보자.

 

Test 서버

Ajax를 사용하려면 데이터를 뿌려줄 서버가 있어야 하는데 이번 포스트에서는 https://jsonplaceholder.typicode.com/ 이라는 사이트를 이용해보자.

어떻게 요청했을 때 어떤 데이터를 주는지 정보는 미리 봐두면 예제를 실행할 때 도움이 될 수 있다.

 

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

 

다음 연관 글

[ajax]2. vanilla javascript를 이용한 ajax 처리