Ajax (Asynchronous JavaScript and XML)

Ajax는 자바스크립트의 라이브러리중 하나이다.

비동기 자바스크립트 + XML이다.

서버와 통신하기 위해 XMLHttpRequest 객체를 사용한다.

JSON/XML/HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다.

AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"이다.

사용자의 이벤트가 잇으면 전체 페이지가 아닌 일부분만 업데이트 할 수 있게 해준다.

 

요약하면,

1. 페이지 새로고침 없이 서버에 요청

2. 서버로부터 데이터를 받고 작업을 수행

 

라이브러리? 더보기 클릭!

💡여기서 라이브러리란? '도서관'이라는 뜻을 가지고 있는 라이브러리는 개발에서 자주 사용하게 되는 코드를 하나의 함수나 클래스라는 단위로 묶어 코드를 재사용하는 것이다.

라이브러리는 개발자가 직접 만들 수 있고 다른 사람이 만든 것을 설치받아 사용할 수 있다.

다시말해 재사용이 가능한 코드의 집합으로 볼 수 있다.

 

브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도

페이지의 일부만을 위한 데이터를 로드하는 기법이며 자바스크립트를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고 받는 기술이라고 할 수 있다.

 

XML? 비동기? 더보기 클릭!

💡XML이란? HTML과 매우 비슷한 문자 기반의 마크업 언어다. 그러나 HTML처럼 데이터를 보여주는 목적이 아닌 데이터를 저장하고

전달할 목적으로 만들어졌다. 태그가 미리 정의 되어 있지 않고 사용자가 직접 정의할 수 있다.

::XML의 특징

1. 다른 목적의 마크업 언어를 만드는데 사용되는 다목적 마크업 언어이다.

2. 다른 시스템끼리 다양한 종류의 데이터를 손쉽게 교환할 수 있도록 해준다.

3. 새로운 태그를 만들어 추가해도 계속해서 동작하므로 확장성이 좋다.

4. 데이터를 보여주지 않고 데이터를 전달하고 저장하는 것만을 목적으로 한다.

5. 텍스트 데이터 형식의 언어로 모든 XML 문서는 유니코드로만 이루어진다.

 

💡비동기(async)방식이란?

비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이다. 이 방식의 장점은 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지,스크립트, 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만

비동기 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있으므로 매우 큰 장점이 있다.

 

기본적으로 HTTP프로토콜은 클라이언트쪽에서 Request를 보내고 Server쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있다.

그래서 화면의 내용을 갱신하기 위해서 다시 요청을 해야하고 응답을 하면서 페이지 전체를 갱신하게 된다.

하지만 이렇게 할 경우 페이지의 일부분만 갱신할 경우에도 페이지 전체를 다시 로드해야하는데 엄청난 지원낭비와 시간낭비를 초래하고 말것이다. 그러나 ajax는 html 페이지 전체가 아닌 일부분만 갱신할수 있도록 XML HttpRequest객체를 통해 서버에 요청을 한다.

이경우 Json이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼 자원과 시간을 아끼고 속도를 향상 시킬 수 있다.