Ajax란? 정의,탄생배경,동작순서, 구성요소

Ajax(Asynchronous JavaScript & XML)

 

정의

-비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.

탄생 배경

-사용자 인터페이스는 플래시를 사용한 플러그인, 자바 애플릿, 액티브엑스 등 웹 브라우저 자체의 기능이 아닌 추가적인 기능을 사용해서 구현하는 방법밖에 없다고 생각되어져 왔다.

그러나 구글 랩이 공개된 이후 이런 생각들은 바뀌게 되었다. 자바스크립트, DOM, 스타일 시트 등의 웹 브라우저가 기본적으로 가지고 있는 기능들을 사용해도 가능하다는 것을 알게 되었다. 다만 당시에는 이런 기술을 한마디로 정의할 용어가 없어 Ajax로 불리게 되었다.

 

-오래된 새로운 기술(이미 있었던 것을 조합해서 새롭게 발전시킨 기술)로 웹 브라우저가 기본적으로 가지고 있는 기능들을 사용해서 웹 브라우저와 사용자 간에 전적으로 새로운 관계가 구축되었다.

 

구성 요소

 

1)XHTML(현재는 HTML5)과 CSS를 사용한 표준 기술 기반의 웹 페이지

-사용자들의 운영체제와 웹 브라우저 환경은 매우 다양한데, 어느 환경에서나 Ajax가 같은 동작을 수행할 수 있으려면 일정한 기준이 필요하다.

 

- 이에 대해 Ajax에서는 W3C에서 규정한 XHTML(Extensible HyperText Markup Language), CSS(Cascading Style Sheets)와 ECMA에서 규정한 자바스크립트(또는 ECMAScript라고도 부름) 등 표준화 단체가 책정하고 있는 표준 기술을 기반으로 사이트를 작성하게 한다.

 

-이런 표준 기술을 준수한 Ajax로 작성한 사이트는 표준 기술을 지원할 수 있는 웹 브라우저를 사용하면 같은 결과를 얻을 수 있다.

 

2)DOM(Document Object Model, 문서 객체 모델)을 사용한 동적인 화면 표시와 상호 작용

-Ajax에서는 사용자의 동작에 대응해서 동적으로 웹 브라우저에 표시되는 결과를 변경할 수 있다.

 

-웹 브라우저에서 표시되는 내용의 변경은 자바 스크립트를 사용해서 DOM(Document Object Model)의 구조를 변경해 표현한다.

 

-DOM을 자바스크립트를 사용해서 웹 브라우저에 표시되는 내용을 변경한다는 것은 DynamicHTML란 용어로 불린다.

 

-Ajax에서 웹 브라우저에 표시되는 내용을 변경한다는 것은 DynamicHTML을 사용한다는 것을 의미

 

-Ajax에서는 사용자 또는 스크립트로부터의 동작에 의해서 표시되고 있는 웹 브라우저 용에 새로운 데이터를 보내서, 그 데이터를 기준으로 DynamicHTML의 기술을 사용해서 표시.

 

-이때 웹 브라우저측으로 보낼 수 있는 데이터는 표준화 데이터인 XML(Extensible Markup Language) 또는 XML문서를 변경하는 데 사용하는 XSLT(Extensible StyleSheet Language Transformation)를 사용한다.

 

3)XML(eXtensible Markup Language)과 XSLT(eXtensible StyleSheet Language Transformation) 등을 사용한 데이터의 변경과 조작

-XML은 HTML과 같은 마크업 언어(Markup Language)이다.

 

-차이점은 HTML은 미리 정의된 특정 태그를 사용, XML은 사용자가 태그를 정의할 수 있다는 것.

 

-사용자가 태그를 정의하기 때문에 HTML보다 XML의 문법 준수 규칙이 강한 편.

 

-이들은 서로 보완하는 입장으로 사용 목적 자체가 다르다.

 

-XML은 문서의 구조를 표현하는 것이 목적, HTMl은 문서의 내용을 표시하는 것이 목적이므로 상호보완적으로 사용됨.

4)XMLHttpRequest를 사용한 비동기적인 데이터전송(XHR 객체)

-XMLHttpRequest는 HTTP(Hyper Text Transfer Protocol)를 사용한 서버와의 통신을 수행하기 위한 객체로, Ajax에서 데이터의 전송은 XMLHttpRequest 객체를 사용한다.

 

-HTTP는 인터넷상에서 HTML 등을 송수신하기 위한 통신 프로토콜(절차)이다.

 

-DOM을 사용한 웹 브라우저의 내용은 객체화되어 있는데, 이것을 이용해서 비동기적으로 서버와의 통신을 수행할 수 있다.

 

-또한 XMLHttpRequest 객체의 이름에 있는 XML을 보면 알 수 있듯이 원래 XML 데이터의 전송을 목적으로 사용되는 객체,

HTML이나 Text형식의 데이터도 사용 가능하다

 

5)그리고 이것들을 결합해서 사용하는 자바스크립트

-위의 구성요소들을 결합해서 사용하는 자바스크립트가 필요

 

-이 자바스크립트는 Ajax를 사용한 사이트를 만들 때 기반이 되는 페이지로, 앞에서 소개한 구성 요소들 간의 동작을 제어하고 서버에 비동기적 요청을 하는 가장 중요한 부분.

동작 순서

 

1.웹 브라우저에서 사용자의 동작에 서버측에 요청이 XMLHttpRequest 객체에 의해 송신된다.

2.일단 요청이 송신되면 웹 브라우저가 서버측의 응답을 기다릴 필요 없이 그대로 웹 브라우저 안의 작업을 처리할 수 있다.

3.그 사이 서버측에서는 송신 받은 요청을 처리하며,

4.데이터베이스와 연동하는 작업을 수행한다.

5.이런 작업을 통해서 처리가 끝나면,,

6.웹 브라우저로 응답 시 필요한 데이터만을 보낸다.