Ajax 구성요소, 동작원리

Ajax는 웹페이지에서 서버와 비동기적으로 통신하여 페이지를 새로고침하지 않고도 데이터를 갱신할 수 있게 해주는 기술이다. 

 

---

• 주요구성요소

1.  HTML,CSS : 웹페이지의 구조와 디자인을 정의한다. (HTML은 웹페이지의 콘텐츠와 구조, CSS는 페이지의 스타일과 레이아웃을 정의)

 

2. DOM(Document Object Model)모델 : 웹 페이지의 구조와 내용을 프로그래밍적으로 조작하고 접근할 수 있게 해주는 인터페이스. 자바스크립트를 통해 DOM을 조작하여 웹페이즈이 내용을 동적으로 변경할 수 있게한다.

 

3. JSON과 XML: 데이터의 교환형식. 웹 서버와 클라이언트 간에 데이터를 주고받을 때 사용되는 표준 포맷이다.

JSON은 JavaScrip Object Notaition의 약자로, 데이터의 키-값 쌍으로 표현한다. 

XML은 Extensible Markup Language의 약자로, 데이터를 마크업 형식으로 표현한다. 

 

4. XMLHttpRequest 객체 : 웹 브라우저에서 제공하는 객체로, 웹 서버와 비동기적으로 통신하기 위해 사용된다. 이 객체를 사용하여 서버에 데이터를 요청하거나 서버로부터 데이터를 받아올 수 있다. 

 

5. 자바스크립트 : 위의 모든 기술들을 결합하여 웹페이지의 동작을 제어하는 프로그래밍 언어이다. 자바스크립트를 통해 사용자의 입력에 반응하거나, 서버로부터 받아온 데이터를 처리하고, 웹페이지의 내용을 동적으로 변경할 수 있다.

 

 

• Ajax 동작원리

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

 

1. 사용자 요청 이벤트 발생 : 사용자가 웹페이지에서 어떤동작(e x. 버튼클릭, 폼제출 등)을 수행하면, 이에 대한 요청 이벤트가 발생한다.

2. 자바스크립트 호출 : 요청 이벤트가 발생하면, 해당 이벤트에 연결된 이벤트가 핸들러가 작동하고 , 이 핸들러 내부의 자바스크립트 코드가 실행된다.

3.  XMLHttpRequest 객체로 서버 요청: 자바스크립트는 XMLHttpRequest 객체를 생성하고, 이 객체를 통해 웹 서버에 데이터 요청을 보낸다. 이때, 중요한점은 웹 브라우저가 서버의 응답을 기다리는 동안 다른 작업도 계속 수행할 수 있다는 것이다. 

4.서버에 AJax요청 처리 : 웹 서버는 받은 XMLHTtpRequest 객체의 정보를 바탕으로 필요한 처리를 수행한다.

5. 서버응답: 처리가 완료된후, 서버는 결과 데이터를 웹 브라우저에게 응답으로 보낸다. 이때 응답 데이터는 전체 페이지가 아닌, 필요한 부분의 데이터만 전성된다.

6. 웹페이지 갱신 : 웹 브라우저는 받은 응답 데이터를 바탕으로 웹 페이지의 일부분만을 갱신한다. 이로써 전체 페이지를 새로고침하지않고도 웹페이지의 일부 내용을 업데이트 할 수 있게 된다.