XML·JSON·AJAX

시스템끼리 데이터를 주고받으려면 양쪽이 같은 방식으로 읽을 수 있는 형식이 필요하다. XML과 JSON이 그 대표이고, 웹 브라우저가 페이지를 통째로 다시 불러오지 않고 서버와 이런 데이터를 주고받는 기술이 AJAX(Asynchronous JavaScript and XML, 비동기 자바스크립트와 XML)다. 실기 시험은 설명을 주고 셋 중 무엇인지 쓰게 하는 단답형이 많다.

XML

XML(eXtensible Markup Language, 확장성 마크업 언어)은 사용자가 태그를 직접 정의할 수 있는 마크업 언어다. HTML은 정해진 태그만 쓰고 브라우저마다 해석이 달랐으며, 그 원형인 SGML(Standard Generalized Markup Language, 표준 일반화 마크업 언어)은 너무 복잡했다. XML은 SGML을 간단하게 줄여 웹에서 쓰도록 W3C(World Wide Web Consortium, 월드 와이드 웹 컨소시엄)가 1998년에 권고안으로 만들었다. 분야마다 자기 태그 집합을 정해 새 문서 형식(SVG 그림, RSS 피드 등)을 만들 수 있어서, 시험에서는 다목적 마크업 언어라고 설명한다.

<student id="7">
  <name>김철수</name>
  <score>90</score>
</student>

XML 문서는 하나의 루트 요소 아래 요소가 중첩되는 트리 구조다. 여는 태그와 닫는 태그가 짝을 이뤄야 하고, 대소문자를 구분한다. 이 규칙을 지킨 문서를 잘 짜인 문서(well-formed document)라고 한다. 문서가 어떤 요소를 가져야 하는지는 DTD(Document Type Definition, 문서 형식 정의)나 XML 스키마(XML Schema)로 정한다.

JSON

JSON(JavaScript Object Notation)은 데이터를 속성-값 쌍(attribute-value pair)으로 나타내는 가벼운 텍스트 형식이다. JavaScript 객체 문법에서 나왔지만 언어와 무관하게 쓰이며, 표준은 RFC(Request for Comments, 인터넷 표준 문서) 8259다. RFC는 이 쌍을 이름/값 쌍(name/value pair)이라고 부르지만 시험에서는 속성-값 쌍으로 쓴다.

{ "id": 7, "name": "김철수", "scores": [90, 85], "graduated": false }

값으로는 문자열, 숫자, 불리언, null, 배열([ ]), 객체({ })를 쓴다. 닫는 태그가 없어 같은 데이터를 XML보다 짧게 쓸 수 있고, JavaScript에서 바로 객체로 바꿀 수 있다. 그래서 웹 API와 AJAX에서 XML을 많이 대체했다.

비교	XML	JSON
표현	태그로 감싼 트리	속성-값 쌍
크기	태그 때문에 김	짧음
스키마	DTD·XML 스키마	JSON Schema(별도)

AJAX

AJAX(Asynchronous JavaScript and XML, 비동기 자바스크립트와 XML)는 JavaScript로 서버와 비동기로 데이터를 주고받아, 페이지 전체를 새로 고치지 않고 일부만 바꾸는 기술 묶음이다. 2005년 제시 제임스 개럿(Jesse James Garrett)이 이름을 붙였다.

예전 웹은 버튼을 누를 때마다 서버가 새 페이지 전체를 보내 화면이 깜박였다. AJAX에서는 브라우저가 XMLHttpRequest 객체(요즘은 fetch)로 필요한 데이터만 요청하고, 응답을 기다리는 동안에도 사용자는 화면을 계속 쓸 수 있다. 응답이 오면 JavaScript가 해당 부분만 고친다. 검색창 자동 완성이 대표 예다. 이름에 XML이 들어 있지만 요즘은 JSON을 더 많이 주고받는다.

시험 포인트

• 태그를 직접 만들어 쓰고 SGML을 웹용으로 단순화한 마크업 언어 → XML.
• 속성-값 쌍으로 적는 가벼운 텍스트 형식, 요즘 AJAX 응답의 주류 → JSON.
• 페이지를 다시 불러오지 않고 JavaScript로 서버와 비동기 통신해 일부만 고침 → AJAX. 핵심 객체 → XMLHttpRequest.
• XML 문서 구조 정의 → DTD·XML 스키마. XML은 트리 구조, 태그는 대소문자 구분.