4. AJAX란?

Dev StoryTeller·2020년 12월 25일
0

Websocket 알아보기

목록 보기
5/9

이번 편은 AJAX에 대해 간략히 알아볼 것이다.
왜 AJAX는 WebSocket의 대응책이 되지 못했을까?가 궁금한 사람들은 클릭하여 건너뛰면 된다 : )


HTTP의 불편함

HTTP가 좋은 통신인 것은 맞지만, 비동기 통신은 할 수 없었다.

기존의 HTTP 통신을 생각해보자.
우리는 서버에 데이터를 전송할 때, 어떻게 전송했을까?
HTML의 form 테그로 전송 데이터를 감싸고, submit 버튼으로 서버에 전송하였다.
그럼 서버는 응답값으로 새로운 페이지를 알려주고,
클라이언트는 그 페이지를 새로 그린다.

이것을 응용하여 쇼핑몰 사이트를 생각해보자.
장바구니에서 상품을 추가/제거할 때마다, 총 결제 가격은 실시간으로 변할 수 있어야한다.
하지만 HTTP는 이것이 불가능하다.
구현을 하려면 매번 페이지를 새로 랜더링해야 한다. 즉, 업데이트 될 때까지 계속 새로고침을 눌러야 한다.
어마무시한 비효율이 나는 것이다!!


AJAX의 등장

이런 문제점 때문에 만들어진 기술이 바로 AJAX이다!
Ansynchronous Javascript And Xml의 약자로, 자바스크립트와 XML로 비동기를 지원한다는 것이다.

즉 이전에는 클라이언트와 서버간에 HTML로 데이터를 주고 받았다.
하지만 AJAX는 데이터로 XML를 사용하면서, 서버와 특정 부분만을 데이터 교환할 수 있게 되었다.


XML 이란?

그렇다면 대체 XML이 뭐길래 이러는 걸까?
XML은 EXtensible Markup Language의 약자로, 역시 마크업 언어이다.
하지만 HTML은 태그 기반이지만, XML은 텍스트 기반의 언어이다.

앞에서 알아봤듯 HTML은 사실 "데이터를 어떻게 누구나 보기쉽게 표현할 수 있을까?"에 중점이 맞춰진 언어이다.
그렇기 때문에 서버와 통신 시에는 적합하지 않았다.

하지만 XML은 텍스트 기반으로, 데이터를 저장하고 교환할 목적으로 만들어진 언어이다.
이런 XML의 특징은 엄청나게 많지만, HTML의 단점을 극복한 특징은 다음과 같다.


특징 1 - 호환성

XML은 JSON과 함꼐 호환성의 갑이라 불리는 형식이다.
데이터를 텍스트 형식으로 저장하므로, H/W나 S/W에 상관없이 데이터를 다룰 수 있다.


특징 2 - 데이터의 분리

이것이 바로 페이지 일부 랜더링과 관련된 특징이다.
HTML로부터 데이터를 일부 불러와 XML로 저장할 수 있다.
간단한 자바스크립트HTML 데이터를 불러올 수 있으며, 이를 다시 HTML에 반환할 수 있다.


결론

AJAX와 XML 또한 내용이 꽤 방대하다.
언젠가 시간이 된다면 다뤄보도록 하겠다.(언젠가...ㅎㅎ)
다음 편에서는 왜 AJAX는 WebSocket의 대응책이 되지 못했을까?에 대해 알아보도록 하겠다.

profile
개발을 이야기하는 개발자입니다.

0개의 댓글