1. Xml이란 무엇일까?
XML(eXtensible Markup Language)은 해석하면 확장 마크업 언어라는 뜻을 가지고 있다. 이렇게 설명하면 어려울 테니 좀더 풀어서 이야기 해보자면 주고받는 데이터를 보기좋게 기술하기 위한 마크업 언어라고 생각하면 된다.
만약 우리가 신세계라는 영화의 정보인 제목, 점수, 평론, 좋아요 횟수등의 여러가지 정보를 전달할 때
[신세계, 95, 평론좋음, 53234] 식으로 데이터를 보낸다면 그렇게 보기좋은 형태의 데이터는 아닐 것이다.
이 때 XML을 통하여 해당 데이터를 보기 좋게 기술을 하는데 그 예시는 아래의 소스 코드와 같다.
<?xml version="1.0" encoding="UTF-8"?>
<영화들>
<영화>
<제목>신세계</제목>
<점수>95</점수>
<평론>매우 좋음</평론>
<좋아요>12022</좋아요>
</영화>
<영화>
<제목>범죄와의 전쟁</제목>
<점수>85</점수>
<평론>보통</평론>
<좋아요>11011</좋아요>
</영화>
</영화들>
위의 코드에서 사용한 <영화들>, <제목>과 같은 태그들은 실제로 사용가능한 태그이다, 정확히 말하면 내가 원하는 이름으로 태그를 작성할 수 있다. 물론 한글보다는 영어로 작성되는게 권장되어지는 것은 당연하다.
그렇다면 왜 우리가 임의대로 태그의 이름을 붙일 수 있도록 만들었을까 생각을 해볼려고 한다.
만약 <점수>95</점수>라는 데이터가 있다면 우리는 당연히 95라는 숫자가 점수를 가르킨다는 것을 알 수 있다.
그런데 만약 그냥 95라는 숫자를 보여주고 이 숫자가 무엇을 의미하는지 물어 본다면 당황할 것이다.
이처럼 XML은 전달하는 데이터의 정보를 기술함으로써 이 데이터가 어떤 데이터인지 알려주는 것이다.
마치 JSON의 Key : Value의 형태처럼 말이다.
(참고로 JSON을 사용할지 XML을 사용할지는 개발환경이나 개발자의 선택에 달려 있다)
2. XML의 활용
아래 소스코드는 위에서 작성된 데이터를 가져오고 활용하는 예시를 작성한 코드이다.
만약 아래의 코드가 이해가 되지 않는다면 XMLHttpRequest()를 이용한 ajax 기능에 대하여 공부해 보고 다시 확인해 보는 것을 권장하고 싶다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p id="demo"></p>
<script type="text/javascript">
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if(this.readyState == 4 && this.status == 200){
func(this);
// nodeFunc(this);
// dataFunc(this);
}
};
xhttp.open("GET", "movie.xml", true);
xhttp.send();
function func( xml ) {
var arr, i, txt, xmlDoc;
xmlDoc = xml.responseXML;
txt = "";
arr = xmlDoc.getElementsByTagName("점수");
for(i = 0;i < arr.length; i++){
txt += arr[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
function nodeFunc( xml ) {
var arr, i, txt, xmlDoc;
xmlDoc = xml.responseXML;
txt = "";
arr = xmlDoc.documentElement.childNodes;
for(i = 0;i < arr.length; i++){
if(arr[i].nodeType == 1){
txt += arr[i].nodeName + "<br>";
}
}
document.getElementById("demo").innerHTML = txt;
}
function dataFunc( xml ) {
var arr, i, txt, xmlDoc;
xmlDoc = xml.responseXML;
txt = "";
arr = xmlDoc.getElementsByTagName("영화")[0];
xlen = arr.childNodes.length;
alert(xlen);
y = arr.firstChild;
for(i = 0;i < xlen; i++){
if(y.nodeType == 1){
txt += i + " " + y.nodeName + "<br>";
}
y = y.nextSibling;
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
댓글