[Web/Ajax] Ajax란 무엇인가? 개념 및 동작 원리

Ajax 개념 및 구성 요소

 

Ajax 개념

 

Ajax는 그 자체가 별도의 새로운 언어가 아니다.

 

HTML, CSS, 자바스크립트, XML 등 기존에 사용되던 여러 기술을 함께 사용하며,

웹 페이지 전체를 다시 로딩하지 않고 일부분만을 갱신할 수 있게 하는 '비동기 통신'을 가능하게 해주는 기법이다.

 

 

Ajax 구성 요소

 

• 웹 페이지의 표현을 위한 HTML과 CSS
• 데이터에 접근하거나 화면 구성을 동적으로 조작하기 위해 사용되는 DOM 모델
• 데이터 교환을 위한 JSON이나 XML
• 웹 서버와의 비동기식 통신을 위한 XMLHttpRequest 객체
• 위의 기술들을 결합해 작업 흐름을 제어하는 데 사용되는 JavaScript

 

 

2. Ajax의 동작 원리

 

Ajax의 동작은 위에서 언급한 구성 요소들을 사용하여 이루어진다.

 

Ajax를 이용한 웹 프로그램은 자바스크립트 코드를 통해 웹 서버와 통신을 하기 때문에 사용자의 동작에 영향을 미치지 않고 서버와 통신이 가능한 것이다.

 

 

출처 : http://www.tcpschool.com/ajax/ajax_intro_works

 

1. 클라이언트에 의한 이벤트 발생
2. 이벤트 핸들러에 의해 JavaScript 호출
3. XMLHttpRequest 객체를 사용하여 서버에 요청
4. 서버는 전달받은 객체를 가지고 Ajax요청을 처리
5. 서버는 처리한 결과를 HTML, XML 또는 JSON 타입의 형태로 결과값 생성
6. 결과 데이터를 웹 브라우저에 전달
7. 서버로부터 받은 데이터를 가지고 웹 페이지의 일부분을 갱신하는 자바스크립트 function 호출
8. 결과적으로 전체가 로딩이되지 않고 부분적으로 JavaScript 함수에 의해 표현

 

 

 

참조 문서
http://www.tcpschool.com/ajax/ajax_intro_works