[AJAX] AJAX(Asynchronous JavaScript and XML) 란?

---

1.AJAX(Asynchronous JavaScript and XML)

웹 페이지를 새로 고침하지 않고도 서버와 비동기적으로 데이터를 교환할 수 있게 해주는 기술
이를 통해 사용자는 페이지를 보다 매끄럽고 빠르게 탐색할 수 있습니다.

 

 

 

2.AJAX 특징

2-1.비동기적 데이터 요청

AJAX를 사용하면 페이지의 일부만 업데이트할 수 있어 전체 페이지를 다시 로드할 필요가 없습니다. 사용자가 버튼을 클릭하거나 폼을 제출할 때, AJAX는 서버에 요청을 보내고 응답을 받습니다.

 

 

 

2-2.JavaScript와 XMLHttpRequest

AJAX는 JavaScript를 사용하여 XMLHttpRequest 객체를 생성하고, 이를 통해 서버와 데이터를 주고받습니다.

 

 

 

2-3.데이터 형식

초기에는 XML 형식의 데이터를 주로 사용했지만, 현재는 JSON(JavaScript Object Notation) 형식이 더 일반적입니다.

 

 

 

 

 

 

3.AJAX를 쓰는 이유

3-1.향상된 사용자 경험

AJAX를 통해 페이지의 일부만 업데이트할 수 있으므로 사용자는 빠르고 매끄러운 인터페이스를 경험할 수 있습니다.

 

 

 

3-2.효율적인 데이터 전송

AJAX는 필요한 데이터만 요청하고 전송함으로써 네트워크 자원을 절약합니다.
서버와 클라이언트 간의 불필요한 데이터 전송을 줄이고, 성능을 향상시키는 데 기여합니다.

 

 

3-3.실시간 상호작용

AJAX는 비동기적으로 작동하므로 사용자와 서버 간의 상호작용을 실시간으로 처리할 수 있습니다.

 

 

 

3-4.SEO(검색 엔진 최적화) 고려

AJAX를 적절히 사용하면, 검색 엔진이 페이지의 콘텐츠를 인덱싱하는 데 유리한 구조를 만들 수 있습니다.

 

 

 

3-5.비교적 쉬운 구현

JavaScript와 XMLHttpRequest를 활용하여 손쉽게 비동기 요청을 구현할 수 있으며, 다양한 라이브러리(예: jQuery, Axios 등)를 통해 더 간편하게 사용할 수 있습니다.

 

 

 

 

 

4.동작원리

4-1.XMLHttpRequest 객체 생성

AJAX의 핵심은 XMLHttpRequest 객체를 사용하는 것입니다.
이 객체를 통해 클라이언트(브라우저)가 서버에 요청을 보내고, 응답을 받을 수 있습니다.

 

 

 

4-2.서버와의 연결 설정

XMLHttpRequest 객체가 생성되면, 서버로 보낼 요청을 준비합니다. 요청에는 HTTP 메서드(GET, POST 등), URL, 그리고 요청이 비동기인지 여부를 포함합니다.

 

 

 

4-3.서버에 요청 보내기

요청이 준비되면, send() 메서드를 사용해 서버로 요청을 보냅니다.

 

 

4-4.서버 응답 대기

서버는 클라이언트가 보낸 요청을 처리한 뒤 응답을 보냅니다.
이때 서버의 응답은 XMLHttpRequest 객체의 onreadystatechange 이벤트 핸들러를 통해 감지할 수 있습니다.

 

 

4-5.응답 데이터 처리

요청이 성공하면, 서버에서 응답을 받아 처리합니다. 응답은 일반적으로 텍스트 또는 JSON 형식으로 전달되며,
xhr.responseText 또는 xhr.responseJSON을 사용하여 응답 데이터를 가져옵니다.

 

 

4-6.페이지 업데이트

서버에서 받아온 데이터를 이용해 HTML 요소를 동적으로 업데이트합니다.
페이지 전체를 새로 고치지 않고도 이 데이터를 바탕으로 원하는 UI 부분만 변경할 수 있습니다.