AJAX(Async JavaScript and XML)
AJAX란?
AJAX는 Asynchronous JavaScript and XML의 약자로, 언어 그대로 풀어 JavaScript와 XML을 이용하여 클라이언트와 서버가 *비동기적으로 정보를 교환하는 방식을 의미 (XML보다는 JSON을 주로 사용)
*비동기적 방식이란 ?
여러가지 작업들은 순차적으로 요청할 때, 이전 요청한 작업 수행이 완전히 종료될 때까지 기다리는 것이 아닌, 실행 명령만 내리고 다음 작업을 실행하는 것을 의미
쉽게 설명하면 서버에 GET 요청 시 브라우저는 새로고침(리로드) 상태를 거치게 되는데, AJAX 방식을 활용하면 웹페이지를 리로드 하지 않고 데이터를 불러올 수 있으며, 웹페이지 화면을 동적으로 변경하는 것을 목적으로 활용
즉 브라우저의 *XHR(XMLHttpRequest)를 이용해 전체 페이지를 새로 가져오지 않고도 페이지 일부만을 변경할 수 있도록 JavaScript를 실행해 서버에 데이터만을 별도로 요청하는 기법
JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술입니다.
쉽게 설명하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것
*XHR객체?
현재 대부분의 주요 웹 브라우저는 서버에 데이터를 요청하기 위한 XMLHttpRequest 객체를 내장
XMLHttpRequest 객체는 서버로부터 XML 데이터를 전송받아 처리하는데 사용되며, 이 객체를 사용하면 웹 페이지가 전부 로딩된 이후에도 서버에 데이터를 요청하거나 서버로부터 데이터를 전송받을 수 있습니다.
즉, 웹 페이지 전체를 다시 로딩하지 않고 일부분만을 갱신이 가능
- 동작 요약
HTTP 프로토콜을 이용한 비동기 통신이며 브라우저는 정적(웹 서버에 이미 저장된 파일을 클라이언트에게 전송하는 웹 페이지)HTML 파일과 CSS파일, 데이터를 어떻게 요청하면 되는지를 설명한 JavaScript를 통해 HTML, CSS를 이용해 골격을 먼저 형성하고,
AJAX 실행 부가 담긴 JavaScript 영역을 실행하여 데이터를 별도로 가져와 적절한 방법으로 데이터를 끼워 넣은 후 페이지를 로딩
AJAX 동작 방식
1. 사용자에 의한 요청 이벤트가 발생
- EX. “인스타그램 내 새로운 게시글들을 보여줘!”
2. 요청 이벤트가 발생하면 이벤트 핸들러(이벤트를 처리하기 위해 사용한 함수)에 의해 자바스크립트 호출
3. 자바스크립트는 XHR 객체를 사용하여 서버로부터 요청
- 이때 웹 브라우저는 요청을 보내고 나서, 서버의 응답을 기다릴 필요 없이 다른 작업을 처리 (비동기적 방식)
- EX. 인스타그램 내 친구의 새로운 게시글을 보여주면서도 메시지가 도착하거나, 메시지가 온 것을 알림으로 송출
4. 서버는 전달받은 XHR 객체를 가지고 AJAX 요청을 처리
5. 6. 서버는 처리한 결과를 HTML, XML 또는 JSON 형태의 데이터로 웹 브라우저에 전달
- 이때 전달되는 응답은 새로운 페이지를 전부 보내는 것이 아니라 필요한 데이터만을 전달
7. 서버로부터 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신하는 자바 스크립트를 호출
8. 결과적으로 웹 페이지의 일부분만 다시 로딩되어 표시
AJAX 장점
- 데이터 요청 시 전체 페이지를 새로 가져오지 않고 데이터만을 별도로 요청할 수 있어, 웹페이지 속도 향상
- 비동기적 방식으로 서버의 처리가 완료될 때까지 기다리지 않고 처리 가능
- 웹페이지 UI 개선
- 기존 웹에서는 불가능했던 UI를 가능하게 해줌
- (EX. 인스타그램 내 게시글을 클릭 시 AJAX방식으로 게시글을 기존 화면 내 새로운 창으로 띄어줌)
- 코드의 컴팩트화
- 각각의 페이지마다 HTML 코드를 가지고 있을 필요가 없고, 서버에서 데이터만 전송하면 되므로 전체적인 코딩의 양이 감소
AJAX 단점
- 클라이언트가 서버에 데이터를 요청하는 *클라이언트 폴링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없다.
(클라이언트) 밥먹고싶어 -> (서버) 기다려
(클라이언트) 밥먹고싶어 -> (서버) 기다려
(클라이언트) 밥먹고싶어 -> (서버) 기다려
(클라이언트) 밥먹고싶어 -> (서버) 끄래~!
*클라이언트 폴링(Client Polling) 방식이란 사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식입니다.
가장 쉬운 방법이지만, 변경 사항이 있던 없던 계속 요청을 보내기 때문에 서버에 부담을 주게 됩니다.
따라서 데이터를 요청하는 주기가 짧아질수록 부하는 커지게 되고, 네트워크나 HTTP 커넥션을 맺기 위한 비용이 지속적으로 발생합니다.
http request connection을 맺고 끊는 것부터가 부담이 많은 방식이지만, 클라이언트에서 실시간 정도의 빠른 응답을 기대하기도 어렵습니다.
이에 반해 서버 푸시(Server Push) 방식은 사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는 것으로, 스마트폰에서 각종 앱이 보내는 푸시 알림이 서버 푸시 방식의 대표적인 예시입니다.
- 데이터만 끼워넣은 형태로, 페이지 이동이 없는 통신이어서 보안상의 문제 발생 가능성
- XSS : 악의적인 스크립트를 웹 페이지에 삽입하여 사용자의 브라우저에서 실행하는 공격으로,
- AJAX에서 XSS는 JavaScript 객체, JSON 데이터, XML 스트림 등에 악성 코드를 삽입할 수 있는 여러 기회를 제공
(실제 사례)
마이스페이스 사례
2003년에 설립, 2000년대 중후반의 미국에서는 현재의 페이스북과 같은 위상에 있었다고 보아도 무방할 정도로 인기 있는 사이트였다. 당시에는 인터넷 소셜 네트워크 서비스 중에서 가장 인기가 많았으나, XSS를 사용한 웜 공격을 처음으로 받은 사이트
2005년 새미 쿰카르(Samy Kumkar)가 Custom CSS를 통해 자동적으로 자신과 친구를 맺을 수 있도록 하여 5만명, 7만명을 넘기다가 1억명을 넘겼고, 결국 사이트를 다운시킨 사건
- 비동기적 방식 및 클라이언트가 데이터를 요청, 추가하는 클라이언트 풀링 방식이기 때문에 연속적으로 데이터 요청 시 서버 부하 증가
- 히스토리 관리의 어려움
- 스크립트로 작성되어 서버 측면에서 다루는 것이 아니기 때문에 오류 추적 및 수정(디버깅)에 어려움이 발생
AJAX 사용 사례
동적인 기능, 즉 움직이는 기능을 갖춘 웹페이지를 서비스하기 위해선 AJAX가 ‘필수’이자, AJAX의 가장 큰 활용 목적
해외를 가지 않고도 집에서 유명 건물의 모습을 확인할 수 있는 방법을 아시나요? 바로 ‘구글 어스(Google Earth)’를 사용하는 것입니다.
구글 어스는 위성 이미지와 함께 전 세계 도시의 빌딩 건물들을 3D로 확인할 수 있는 서비스를 갖춘 웹 페이지인데요, 구글 어스가 바로 AJAX의 기술이 적용된 웹 페이지 입니다. AJAX를 적용한 덕분에 명령어를 입력해도 새로운 페이지로 넘어가지 않고, 보고 있는 페이지에서 바로 확인이 가능
- 자동 완성
검색 엔진은 사용자가 검색 창에서 특정 키워드를 검색할 때 실시간으로 자동 완성 옵션을 제공합니다.
AJAX를 사용하면 웹 페이지가 각 문자 입력을 웹 서버로 릴레이하고, 기존 페이지의 관련 권장 사항 목록을 반환
- 양식 검증
AJAX를 사용하면 웹 애플리케이션이 사용자가 양식을 제출하기 전에 양식의 특정 정보를 확인할 수 있습니다.
예시로 하나의 쇼핑몰 내 새 사용자가 계정을 만들면 웹 페이지는 사용자가 다음 섹션으로 이동하기 전에 사용자 이름을 사용할 수 있는지 자동으로 확인
- 채팅 기능
텍스트 메신저와 챗봇은 AJAX를 사용하여 브라우저에 실시간 대화를 표시합니다.
AJAX는 사용자가 작성한 텍스트를 서버로 전송하고 다른 사용자의 채팅 인터페이스에 동시에 게시합니다.
- 소셜 미디어
소셜 미디어 플랫폼은 AJAX를 사용하여 브라우저에 새 페이지를 로드하지 않으면서 최신 콘텐츠로 사용자의 피드를 업데이트합니다.
예시로 Twitter는 내가 팔로우하는 누군가가 새 소식을 트윗할 때마다 피드를 즉시 새로고침
- 투표 및 등급 시스템
일부 포럼 및 소셜 북마킹 사이트는 AJAX를 사용하여 특정 게시물의 등급 또는 투표 결과를 실시간으로 표시합니다.
예를 들어 Reddit에서는 전체 페이지를 새로 고치지 않고도 게시물에 찬성 또는 반대 투표를 할 수 있습니다.
참조
https://www.tcpschool.com/ajax/ajax_intro_works
https://daegwonkim.tistory.com/445
https://jbground.tistory.com/4