[JavaScript] Ajax 대해서 알아보자!

📌 AJAX?

Asynchronous Javascript And Xml (비동기식 자바스크립트와 Xml)의 약자이다.

브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도, 페이지의 일부만을 데이터 로드하는 기법이다. Javascript를 사용하여 클라이언트와 서버 사이에서 XML(JSON) 데이터를 주고받는 비동기 통신 기술이다.

 

- XML

데이터를 저장하고 전달할 목적으로 만들어진 마크업 언어

- JSON

'키-값' 쌍 형식의 배열 형태를 이루는 데이터 형식

- XMLHttpRequest

브라우저가 가지고 있는 객체 중 하나

XML 언어와 JSON 데이터 형식

 

📌 동기 VS 비동기

 

❗Request 요청이 들어온다면

- 동기 방식

서버에서 요청을 처리하고 응답해야 다음 동작이 이루어진다.

이때 페이지가 리로드되면서 전체 리소스를 다시 불러와야 한다.

 

- 비동기 방식

서버에서 요청을 처리하고 응답과는 상관없이 동작한다.

이때 페이지의 일부분만 갱신되면서 자원과 시간을 아낄 수 있다.

따라서 AJAX는 비동기 방식이다!

 

< 용어 정리 >

- 클라이언트

서버에서 정보를 가져와서 사용자에게 보여줄 수 있고 사용자와 상호작용 할 수 있는 소프트웨어

- 서버

클라이언트의 요청에 따라 알맞은 데이터를 보내주는 프로그램

- request

클라이언트가 서버로 전달해서 서버에 액션이 일어나게끔 하는 메시지

- response

Request에 대한 서버의 응답 메시지

 

📌 AJAX 장단점

- Request를 보냈을 때, 서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능하다.

- 자원과 시간을 아낄 수 있다.

- 서버에서 필요한 데이터만 전송하면 되므로 전체적인 코드의 양이 감소된다. 

- 히스토리 관리가 되지 않는다.

- 연속으로 데이터를 요청하면 서버 부하가 증가한다.

- 사용자에게 아무런 진행 정보가 주어지지 않는다.

 

📌 AJAX 진행 과정

1. XMLHttpRequest 객체를 생성한다.

 

2. 서버에 요청을 보낸다.

 

3. 서버에서 요청에 대한 처리를 한다.

 

4. 서버의 response를 처리하는 함수를 httpRequest의 onreadystatechange 이벤트 리스너에 붙여준다.

Readystate

0 (uninitialized) Request가 초기화되지 않음

1 (loading) 서버와의 연결이 성사됨

2 (loaded) 서버가 request를 받음

3 (interactive) Request를 처리하는 중

4 (complete) 처리가 끝났으며 응답할 준비가 완료됨 (DONE)

 

5. 상태 값을 확인하고 응답을 처리한다.

 

Ajax 시작하기 - 웹 개발자 안내서 | MDN