Ajax

Ajax 이전

단점

• 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함된 HTML을 매번 전송받는다.

• 화면을 전환할 때마다 웹페이지 전체를 다시 랜더링 하기 때문에 화면이 깜박거린다.

• 클라이언트와 서버와의 통신이 동기 방식으로 동작한다.

Ajax란?

AJAX란 자바스크립트와 XMLHttpRequest객체를 사용해서 클라이언트와 서버가 비동기 방식으로 통신는 것을 말한다.

AJAX의 강력한 특징은 페이지 전체를 새로고침 하지 않고서도 수행되는 "비동기성"이다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해준다.

XMLHttpRequest (XHR)
브라우저에서 제공하는 WebAPI 객체로 HTTP 요청과 응답 수신을 위한 메서드와 프로퍼티를 제공한다.

장점

• 변경할 부분을 갱신하는 데에 필요한 데이터만 서버로부터 전송받는다.

• 화면이 깜박거리지 않는다.

• 클라이언트와 서버와의 통신이 비동기 방식으로 동작한다.

JavaScript는 single Thread 언어기 때문에 한 번에 하나의 작업만 수행할 수 있다. 그런데 어떻게 Ajax는 비동기적으로 동작할 수 있는 걸까?

Ajax의 동작원리

① : 사용자에 의한 요청 이벤트가 발생한다.

② : 요청 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트가 호출한다.

③ : 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청을 보낸다.

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

④ : 서버는 전달받은 XMLHttpRequest 객체를 가지고 Ajax 요청을 처리한다.

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

이때 전달되는 응답은 새로운 페이지를 전부 보내는 것이 아니라 필요한 데이터만을 전달

⑦ : 서버로부터 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신하는 자바스크립트를 호출한다.

⑧ : 결과적으로 웹 페이지의 일부분만이 다시 로딩되어 표시된다.