TIL - AJAX

박지민·2022년 7월 24일

JavaScript

목록 보기

1/1

1. AJAX란?

Ajax(Asynchronous JavaScript and XML : 비동기식 자바스크립트와 XML)는 자바스크립트의 라이브러리 중 하나로 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이며 자바스크립트를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고 받는 기술입니다. 이러한 AJAX는 여러가지 기술이 혼합적으로 사용되어 이루어지는데 그 구성요소의 대표적인 예로는 HTML, DOM, 자바스크립트, XMLHttpRequest 등이 있습니다.

1.1 XML이란?

XML(Extensible Markup Language)이란 HTML과 비슷한 마크업 언어로 HTML이 데이터를 보여주는 목적인 것에 비해 데이터를 저장하고 전달할 목적으로 만들어졌습니다. 또한 HTML 태그처럼 미리 정의 되어 있지 않고 사용자가 직접 정의할 수 있다는 특징이 있습니다.

1.2 XMLHttpRequest이란?

XMLHttpRequest 클라이언트와 서버 간의 통신을 담당하는 객체로서 서버로부터 XML 데이터를 전송받아 처리하는데 사용됩니다. 이 객체를 사용하면 웹 페이지가 전부 로딩된 후에도 서버에 데이터를 요청하거나 서버로부터 데이터를 전송받을 수 있습니다. 즉, 페이지 전체를 다시 로딩하지 않고 일부분만을 갱신할 수 있게 됩니다.

2. AJAX를 사용하는 이유

AJAX를 사용하는 이유는 단순하게 WEB화면에서 무언가 부르거나 데이터를 조회하고 싶을 경우, 페이지 전체를 새로고침하지 않기 위해 사용한다고 볼 수 있습니다. 기본적으로 HTTP 프로토콜은 클라이언트쪽에서 Request를 보내고 서버쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있습니다. 그래서 화면의 내용을 갱신하기 위해서는 다시 request를 하고 response를 하며 페이지 전체를 갱신하게 되는데 이러한 방식은 엄청난 자원낭비와 시간낭비를 불러 올 수 있습니다. 그래서 AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest객체를 통해 서버에 request하며 이 경우, JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있게 됩니다.

3. AJAX의 장단점

AJAX의 장점

웹 페이지의 속도향상(웹 페이지 전체를 다시 로딩하지 않고도 일부분만 갱신 가능)
웹 페이지가 로드된 후에 서버로 데이터 요청을 보내거나 데이터를 받을 수 있음
백그라운드 영역에서 서버로 데이터를 보낼 수 있음

AJAX의 단점

히스토리 관리가 되지 않는다.
페이지 이동없는 통신으로 인한 보안상의 문제가 있다.
연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
XMLHttpRequest를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않는다. (요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다.)
AJAX를 쓸 수 없는 브라우저에 대한 문제 이슈가 있다.
HTTP 클라이언트의 기능이 한정되어 있다.
지원하는 Charset이 한정되어 있다.
Script로 작성되므로 디버깅이 용이하지 않다.
동일-출처 정책으로 인하여 다른 도메인과는 통신이 불가능하다. (Cross-Domain문제)