Ajax

1.

Ajax :

Asynchronous JavaScript and XML

 

자바스크립트를 사용 하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청 하고,

서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식.

 

 

 

2.

HTML, CSS, JS, DOM, XML, XMLHttpRequest 를 이용한 새로운 (2005 년 기준) 접근법 이자

싱글 스레드인 자바스크립트 엔진을 보완 하기 위한 비동기 통신 방식을 의미.

 

 

 

3.

Ajax 적용 이전의 웹페이지

 

 

html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로 부터 받는다.

 

즉, 웹페이지 전체를 처음 부터 다시 렌더링 하는 방식으로 동작 했다.

 

이는,

필요한 부분이 아닌 다른 부분들도 모두 렌더링 해서 페이지의 모든 부분을 다 화면에 받게 되기 때문에

비효율적인 방식 이라고 할 수 있겠다.

 

정리하자면,

 

1) 이전 페이지와 비교 하여 변경할 필요가 없는 부분까지 포함한 HTML을

매번 다시 받기 때문에 불필요한 데이터 통신이 발생.

 

2) 변경할 필요가 없는 부분까지 처음부터 다시 랜더링 하여, 화면 전환이 일어날 때,

화면이 순간적으로 깜빡이는 현상이 발생.

 

3) 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에,

서버로부터 응답이 있을 때까지 다음 처리는 블로킹 됌. (다음 처리 요청 불가능)

 

 

 

4.

Ajax 사용

 

1) 브라우저에서 제공하는 Web API인 XMLHttpRequest (XHR) 객체를 기반으로 동작.

 

2) XHR은 HTTP 비동기 통신을 위한 메서드 + 프로퍼티 를 제공.

 

 

 

5.

XMLHttpRequest (XHR) 이란 ?

 

1) XHR 객체는 서버와 상호 작용 할 때 사용

 

2) XHR을 사용하면 페이지의 새로고침 없이도 URL 에서 데이터를 가져올 수 있다.

 

3) 이를 활용 하면 사용자의 작업을 방해 하지 않고 페이지의 일부를 업데이트 할 수 있다.

 

4) XML 이외에 다른 종류의 데이터도 요청 할 수 있다. (JSON, ..)

 

 

정리하자면,

 

Ajax 적용 이후의 웹페이지는 다음과 같다.

 

1) 변경할 부분을 갱신하는 데 필요한 데이터만 서버로부터 받기 때문에,

불필요한 데이터 통신이 발생 하지 않음.

 

2) 변경할 필요가 없는 부분은 다시 랜더링 하지 않기 때문에,

화면이 깜박이지 않음.

 

3) 클라이언트 - 서버 간의 통신이 비동기 방식으로 동작 하기 때문에,

서버에게 요청을 보낸 뒤 블로킹이 발생 하지 않음.

 

 

 

6.

JSON 데이터 란 ?

 

비동기처리를 통해 데이터를 주고 받을 때, 주로 JSON 데이터 형식으로 주고 받는다.

 

이유는 여러가지가 있지만, 우선 가독성 측면에서 비교해 볼 수 있다.

 

기존의 XML 파일의 형식은 아래와 같다.

 

 

반면에 JSON 데이터 형식은 아래와 같다.

 

 

XML 파일은 태그를 계속 열고 닫고를 반복 해야 했지만,

 

JSON 데이터 형식은 Key-Value 한쌍의 형태로 훨씬 간편하게 작성 할 수 있게 된다.

 

뿐만 아니라, XML 파일과 JSON 파일은 데이터 파싱 속도에서도 차이가 발생 한다.

 

 

 

XML VS JSON

 

XML : 

 

- 데이터 표현 : 데이터를 계층적인 구조로 나타냄. 태그 사용. 계층적으로 구조화.

 

- 파싱 속도 : 상대적으로 느림. (동일한 데이터 기준)

 

- 데이터의 크기 : 상대적으로 큼. (동일한 데이터 기준)

 

JSON : 

 

- 데이터 표현 : JavaScript 객체 표기법을 기반으로 함. Key-Value 한쌍으로 데이터를 표현.

 

- 파싱 속도 : 상대적으로 빠름. (동일한 데이터 기준)

 

- 데이터의 크기 : 상대적으로 작음. (동일한 데이터 기준)

 

 

 

7.

동기 / 비동기

 

동기 / 비동기는 요청을 보낸 후에, 그에 대한 응답을 기다리는지 여부로 구분 한다.

 

동기 (Synchronous) : 요청 후 응답을 받아야만 다음 동작을 실행.

 

비동기 (Asynchronous) : 요청 후 응답을 받지 않아도 다음 동작을 실행.

 

 

 

8.

사용 방법

 

ES6 이전 비동기 통신 방법 (XMLHttpRequest)

 

 

ES6 이전 비동기 통신 방법 (jQuery.ajax)

 

 

 

 

ES6 이후 비동기 통신 방법

 

1. Fetch API

 

- Promise (ES6) 와 함께 등장

 

- Promise를 이용한 브라우저 내장 함수인 Fetch API

 

- 기존의 XHR API를 사용 하는 것보다 손쉽게 비동기 통신 가능

 

- 구버전의 브라우저 에서는 동작 하지 않음

 

 

2. Axios

 

- 비동기 통신 라이브러리

 

- XHR / Promise를 활용한 비동기 통신

 

- 구버전의 브라우저와도 호환 (장점)

 

- XSRF (교차 사이트 요청 위조) 보안 기능 O

 

- JSON 데이터 자동 변환

 

- import 하여 사용

 

 

 

 

[ 결론 ]

 

1) Ajax는 특정한 함수 / 라이브러리 / 프레임워크 모두 아니다. 접근 방법이며, 비동기 통신 방식을 뜻한다.

 

2) Ajax 적용으로 웹 사용자에게 보다 좋은 사용자 경험을 제공 할 수 있다.