Ajax와 비동기 통신의 구현하기 위해 필요한 기술들을 간단히 정리하고자 한다.
Ajax 비동기 통신을 위한 기술
- XMLHttpRequest
- JavaScript
- DOM
- XML
Ajax 비동기 통신을 위해서는 위 네 가지의 기술들을 이용해야 구현이 가능하다.
1. XMLHttpRequest
XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위하여 사용됩니다. 전체 페이지의 새로고침없이도 URL 로부터 데이터를 받아올 수 있습니다. 이는 웹 페이지가 사용자가 하고 있는 것을 방해하지 않으면서 페이지의 일부를 업데이트할 수 있도록 해줍니다. XMLHttpRequest 는 AJAX 프로그래밍에 주로 사용됩니다.
출처: https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest
XMLHttpRequest는 브라우저 상에서 서버와 HTTP 통신을 하기 위한 API이다. (HTTP 외에도 file, ftp 등도 가능하다.)
이 API를 사용하여 구현을 하는 것이 JavaScript다.
2. JavaScript
JavaScript(JS)는 가벼운 인터프리터 또는 JIT 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다. 웹 페이지의 스크립트 언어로서 제일 유명하지만 Node.js, Apache CouchDB, Adobe Acrobat처럼 많은 비 브라우저 환경에서도 사용하고 있습니다. JavaScript는 프로토타입 기반의 동적 다중 패러다임 스크립트 언어로, 객체지향형, 명령형, 선언형(함수형 프로그래밍 등) 스타일을 지원합니다.
출처: https://developer.mozilla.org/ko/docs/Web/JavaScript
XMLHttpRequest는 자바스크립트로 만들어진 '객체'이다. 그렇기 때문에 Ajax라는 이름 그대로 비동기 통신은 자바스크립트를 사용하지 않으면 구현할 수 없다.
3. DOM
문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
출처: https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C
AJax을 사용하여 동적으로 웹 페이지를 만들 때, HTML과 XML 상의 어떤 요소를 변경할 것인가를 지정한다. 여기에서 DOM은 HTML이나 XML을 트리구조로 처리하고, 웹 페이지의 가공이나 변경을 하기 쉽게 해준다.
4. XML
XML은 Extensible Markup Language을 뜻하며, W3C 권고 범용 마크업 언어다.
출처: https://developer.mozilla.org/ko/docs/Web/XML/XML_Introduction
문서나 데이터의 의미, 구조를 기술하기 위한 마크업 언어의 하나이다. XML은 태그를 자유롭게 설정할 수 있고, 그 태그에 의미를 부여하는 것이 가능하다. 따라서 복수의 태그를 동시에 사용해도 태그를 보고 요소를 파악하는 것이 가능하다.
XML의 예시는 아래와 같다.
출처: https://www.w3schools.com/xml/
<?xml version="1.0" encoding="UTF-8"?>
<breakfast_menu>
<food>
<name>Belgian Waffles</name>
<price>$5.95</price>
<description>
Two of our famous Belgian Waffles with plenty of real maple syrup
</description>
<calories>650</calories>
</food>
<food>
<name>Strawberry Belgian Waffles</name>
<price>$7.95</price>
<description>
Light Belgian waffles covered with strawberries and whipped cream
</description>
<calories>900</calories>
</food>
<food>
<name>Berry-Berry Belgian Waffles</name>
<price>$8.95</price>
<description>
Belgian waffles covered with assorted fresh berries and whipped cream
</description>
<calories>900</calories>
</food>
<food>
<name>French Toast</name>
<price>$4.50</price>
<description>
Thick slices made from our homemade sourdough bread
</description>
<calories>600</calories>
</food>
<food>
<name>Homestyle Breakfast</name>
<price>$6.95</price>
<description>
Two eggs, bacon or sausage, toast, and our ever-popular hash browns
</description>
<calories>950</calories>
</food>
</breakfast_menu>