[ Ajax ] Ajax란?

Front-end/Ajax

주옹스 2020. 12. 5. 00:58

Asynchronous JavaScript and XML (비동기 자바스크립트 XML)

- 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나

- 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다

① 클라이언트는 HTTP Request를 이용해 서버에 요청한다.

이때 클라이언트는 서버가 요청에 대한 응답을 할 때까지 기다린다. (동기 통신)

② 서버에서 요청 받은 데이터를 처리하여 HTML, CSS, JavaScript를 클라이언트에게 전송한다.

③ 클라이언트는 응답받은 HTML, CSS, JavaScript를 가지고 화면을 갱신한다.

이때 응답 받은 내용은 전체 페이지의 내용으로 화면 전체가 갱신된다.

동기 통신

① 유저가 이벤트를 발생시켜 자바스크립트를 실행한다.

② 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청한다.

이때 웹 브라우저는 요청을 보내고 나서, 서버의 응답을 기다릴 필요 없이 다른 작업을 처리할 수 있다.

③ 서버는 전달받은 Ajax 요청을 처리한다.

④ 서버는 처리한 결과를 HTML, XML 또는 JSON형태의 데이터로 웹 브라우저에 전달한다.

이때 전달되는 응답은 전체 페이지의 내용이 아니라, 필요한 데이터만 전달된다.

⑤ 서버로부터 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신한다.

비동기 통신

- 웹 페이지 전체를 다시 로딩하지 않고, 웹 페이지 일부분만을 갱신할 수 있다.

- 웹 페이지가 로드 된 후에 서버로 데이터 요청을 보낼 수 있다.

- 웹 페이지가 로드 된 후에 서버로부터 데이터를 받을 수 있다.

- 백그라운드 영역에서 서버로 데이터를 보낼 수 있다.

비동기 통신을 사용함으로써 데이터를 보내고 나서도 사용자는 다른 작업을 할 수 있다.

- 데이터만 들어가 있는 형식으로 응답을 받으므로 전통적인 웹어플리케이션에 비해 빠르고 전송양도 적다.

- Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 폴링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없다.

- Ajax로 바이너리 데이터를 보내거나 받을 수 없다.

- Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수 없다.

- 클라이언트의 PC로 Ajax요청을 보낼 수 없다.

사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식

예) 웹 사이트 : 클라이언트가 어떤 요청을 해야지만 정보를 얻음

- 사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는 것을 의미

예 ) 카카오톡, 스마트폰에서 각종 앱이 보내는 푸시 알림