AJAX란?
AJAX는 Asynchronous Javascript And XML의 줄임말로 '비동기식 자바스크립트와 XML'을 뜻합니다.
풀어서 설명하자면 자바스크립트와 XML을 이용하여 클라이언트와 서버가 비동기식 통신을 하는 개념입니다.
이름에 XML이 들어가있긴 한데 사실상 요즘은 대부분 다 JSON으로 사용하는 추세입니다.
(XML과 JSON은 데이터 전송 포멧정도로 이해하시면 됩니다.)
상세
예전에는 클라이언트에서 서버로 요청을 보내면 서버는 그에 대한 응답으로 페이지 전체를 매번 리로드했었습니다.
이는 HTTP 프로토콜이 Request에 대한 Response를 받고 나면 그 연결을 끊어버리기 때문인데
이로 인해 화면 일부에 약간의 변화만 있어도 Request와 Response를 새로 보내고 받아 매번 새로운 페이지를 그려내야 한다는 불편함이 있었습니다. 이는 사용자 입장에서도 서버 입장에서도 명백한 단점이었습니다.
AJAX는 이러한 불편함을 해소해주는 기술입니다.
AJAX를 사용하게 되면 먼저 HTML 페이지 전체를 렌더링 한 뒤, 필요한 데이터를 자바스크립트(XMLHttpRequest)로 서버에 요청합니다. 그럼 서버는 해당 요청을 받아 XML이나 JSON등의 데이터로 응답하게 되고 그 데이터를 이용하여 전체를 갱신하지 않고도 일부만 갱신할 수 있게 되는 것입니다. 이 모든 과정은 비동기식으로 진행됩니다. 자원과 시간을 모두 절약하는 기술인 것입니다.
*비동기는 데이터를 받는 방식으로 요청에 대한 응답이 오는 동안 다른 작업을 할 수 있는 방식입니다.
반대로 동기는 요청에 대한 응답이 오기 전까지는 작업을 할 수 없습니다.
AJAX의 장점
1. 속도 및 자원낭비가 없다
- 페이지 전체를 갱신하지 않고 일부만 갱신할 수 있게 되기 때문에 속도가 훨씬 빠르고 자원의 낭비가 적습니다.
2. 동적인 페이지 디자인 가능
- 페이지 리로딩 없이 실시간으로 유저의 행동에 따라 변화하는 유기적인 페이지를 만들 수 있게 됩니다.
3. 서버의 부담이 줄어든다
- 서버는 매번 같은 HTML페이지를 렌더링 할 필요가 없어지므로 부담이 줄어들게 됩니다.
4. 사용자의 편의성이 증가
- 비동기 방식으로 데이터를 주고 받기 때문에 사용자는 응답을 기다리는 동안 다른 작업을 할 수 있습니다.
AJAX의 단점
1. 진행 파악이 힘들다
- XMLHttpRequest는 진행 과정에 대해 사용자에게 어떤 정보나 단서를 주지 않습니다. 따라서 사용자는 요청이 완료되기 전에 페이지를 이탈하거나 다른 요청을 할 수 있으며 이는 오류를 초래할 수 있습니다. 따라서 요청 처리중에 시각적으로 사용자에게 '요청이 완료되지 않았다'고 보여주는 코드를 넣을 필요가 있습니다.
2. 연속적으로 데이터를 요청하면 서버에 부하가 증가
- 연속적으로 데이터를 요청한다면 서버에 부하가 증가 할 수 있습니다.
3. 보안 취약점
- AJAX 관련 보안 취약점이 있기 때문에 보안에 대해 좀 더 신경써야 합니다. 대표적으로 XSS 취약점이 존재합니다.(XSS 너는 정말이지..)
4. 히스토리 관리
- 페이지의 일부만 갱신하기 때문에 페이지 단위로 저장되는 히스토리가 남지 않습니다. 때문에 사용자가 뒤로가기 버튼 등을 통해 히스토리를 되돌릴 수 없습니다.
'JS' 카테고리의 다른 글
| 자바스크립트(JavaScript) - 호이스팅(Hoisting) (0) | 2020.11.12 |
|---|---|
| 자바스크립트(JavaScript)란? (0) | 2020.10.16 |