AJAX란

Ajax(Asynchronous JavaScript and XML)

빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법 중 하나. 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지 일부분만을 갱신할 수 있게 해준다. 즉, 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다. 

 

Ajax의 한계

• 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식(사용자가 직접 원하는 정보를 서버에 요청하여 얻는 방식)을 사용하므로, 서버 푸시 방식(사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는 것, 앱 푸시 알림)의 실시간 서비스는 만들 수 없음.
• Ajax로는 바이너리 데이터를 보내거나 받을 수 없음.
• Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수 없음.
• 클라이언트의 PC로 Ajax 요청을 보낼 수 없음.

 

Ajax 구성 요소

• 정적인 웹 페이지: HTML, CSS
• 데이터에 접근 / 화면 구성 동적으로 조작: DOM 모델
• 데이터 교환: JSON, XML
• 웹 서버와의 비동기적 통신: XMLHttpRequest 객체
• 사용자의 작업 흐름을 제어: JavaScript

 

Ajax 동작 원리

 

• 1) 웹 브라우저 사용자 UI에서 사용자에 의한 요청 이벤트 발생
• 2) 이벤트 핸들러에 의해 javascript 호출
• 3) Javascript는 XMLHttpRequest 객체 생성, 서버로 요청 전송(서버 응답 기다릴 필요 없이 다른 작업 처리)
• 4) 웹 서버에서 전달받은 XMLHttpRequest 객체를 가지고 Ajax 요청 처리
• 5) 웹 서버는 처리한 결과를 HTML, XML, JSON 형태 데이터로 웹 브라우저에 전달 (필요한 데이터만)
• 6) 서버로부터 전달받은 데이터를 가지고 웹 페이지의 일부를 갱신하는 Javascript 호출