서버와 통신하기(요청/응답 처리
3.2 responseXML 속성을 이용한 DOM 시작하기
지금까지의 예제에서는 간단하고 단순한 문자열을 처리하는데 적합한 XHR 객체의 resonseText 속성만을
살펴보았다. 하지만 대단히 복잡한 응답데이터의 경우는 단순한 문자열로 처리할 수 없으며 XML 형식으로
처리하는 것이 훨씬 논리적이고 효율적일 것이다. 그러면 어떻게 브라우저는 서버로부터 받은 XML 형식의
데이터를 처리할 수 있는 것일까? XML 문서는 W3C 의 DOM 을 이용해서 처리된다. DOM 을 지원하는
브라우저들은 당연히 XML 문서를 다루는 많은 API 를 구현하고 있기 때문이다.
DOM 은 HTML 과 XML 을 다루는 API 를 제공하고 있으며, 스크립트를 통해서 다큐먼트에 접근할 수
있도록 정의되어 있다. 자바스크립트는 DOM 에 접근할 수 있고 DOM 을 다룰수 있는 스크립팅 언어이다.
다큐먼트의 모든 요소들은 DOM 의 부분들이기 때문에 요소의 속성과 메소드들은 자바스크립트로 제어가
가능하다.
다음은 XML 문서를 처리하기 위한 DOM 요소의 속성을 살펴보도록 하자.
childNodes : 현재 요소의 자식을 배열로 표현한다.
firstChild : 현재 요소의 첫번째 자식이다.
lastChild : 현재 요소의 마지막 자식이다.
nextSibling : 현재 요소와 바로 다음의 요소를 의미한다.
nodeValue : 해당 요소의 값을 읽고 쓸 수 있는 속성을 정의한다.(=data)
parentNode : 해당 요소의 부모노드이다.
previousSibling : 현재 요소와 바로 이전의 요소를 의미한다.
다음은 XML 다큐먼트를 다루는 유용한 DOM 요소의 메소드를 살펴보자.
getElementById(id) : 다큐먼트에서 특정한 id 속성값을 가지고 있는 요소를 반환한다.
getElementsByTagName(name) : 특정한 태그 이름을 가지고 있는 자식 요소로 구성된 배열을 리턴한다.
hasChildNodes() : 해당 요소가 자식 요소를 포함하고 있는지를 나타내는 Boolean 값을 리턴한다.
getAttribute(name) : 특정한 name 에 해당하는 요소의 속성값을 리턴한다.
이번에는 XHR 객체의 responseXML 속성을 이용한 예제를 살펴봄으로써 XML 다큐먼트를 다루기 위한
DOM 객체의 속성과 메소드에 대해서 알아본다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Parsing XML Responses with the W3C DOM</title>
<script type="text/javascript">
var xmlHttp;
var requestType = "";
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(requestedList) {
requestType = requestedList;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "parseXML.xml", true);
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
if(requestType == "north") {
listNorthStates();
}
else if(requestType == "all") {
listAllStates();
}
}
}
}
function listNorthStates() {
var xmlDoc = xmlHttp.responseXML;
var northNode = xmlDoc.getElementsByTagName("north")[0];
var out = "Northern States";
var northStates = northNode.getElementsByTagName("state");
outputList("Northern States", northStates);
}
function listAllStates() {
var xmlDoc = xmlHttp.responseXML;
var allStates = xmlDoc.getElementsByTagName("state");
outputList("All States in Document", allStates);
}
function outputList(title, states) {
var out = title;
var currentState = null;
for(var i = 0; i <states.length; i++) {
currentState = states[i];
out = out + "₩n- " + currentState.childNodes[0].nodeValue;
}
alert(out);
}
</script>
</head>
<body>
<h1>Process XML Document of U.S. States</h1>
<br/><br/>
<form action="#">
<input type="button" value="View All Listed States" onclick="startRequest('all');"/>
<br/><br/>
<input type="button" value="View All Listed Northern States"
onclick="startRequest('north');"/>
</form>
</body>
</html>
<3-4 parseXML.html 의 내용>
<?xml version="1.0" encoding="UTF-8"?>
<states>
<north>
<state>Minnesota</state>
<state>Iowa</state>
<state>North Dakota</state>
</north>
<south>
<state>Texas</state>
<state>Oklahoma</state>
<state>Louisiana</state>
</south>
<east>
<state>New York</state>
<state>North Carolina</state>
<state>Massachusetts</state>
</east>
<west>
<state>California</state>
<state>Oregon</state>
<state>Nevada</state>
</west>
</states>
<3-5 parseXML.xml 의 내용>
일단 <3-4>의 실행결과를 살펴본 후 핵심원리를 파악해 보자
<3-6 parseXML.html 을 실행했을때의 그림>
그림 <3-6> 은 parseXML.html 을 실행했을 때의 화면으로 View All Listed States 버튼을 눌렀을때의
결과 및 View All Listed Northern States 버튼을 눌렀을때의 결과 화면을 아래에 표시하였다.
<3-7 View All Listed States 버튼을 눌렀을때의 결과 화면>
<3-8 View All Listed Northern States 버튼을 눌렀을때의 결과 화면>
예제 3-4 는 다소 길어보이나 XHR 객체의 responseXML 속성을 이용한 DOM 객체를 다루는 속성 및 메
소드를 다루고 있다는 면에서 반드시 이해하고 넘어가야만 한다. 소스 패턴은 지금까지의 예제와 비슷하므
로 DOM 속성 및 메소드가 사용된 주요 부분만 설명하겠다.
listAllStates() 메소드의 아래 라인을 주목해 보자.
var xmlDoc = xmlHttp.responseXML;
=> XHR 객체는 responseXML 속성을 이용해서 서버로부터의 XML 결과 다큐먼트를 다룰수 있는 DOM
속성 및 메소드를 사용할 수 있게 해준다는 것을 알 수 있다.
var allStates = xmlDoc.getElementsByTagName("state");
=>XML 결과 다큐먼트로부터 state 자식 엘리먼트들로 구성된 배열을 얻어와 allStates 변수에 할당하는
로직이다.
listNorthStates() 메소드를 살펴보자.
var northNode = xmlDoc.getElementsByTagName("north")[0];
=> XML 다큐먼트에서 north 앨리먼트는 유일하게 하나만 존재하므로 자식 앨리먼트로 구성된 배열중에서
첫번째(0) 배열값을 얻어와야 한다. 위 식은 아래와 같이 수정해도 결과는 같다.
var northNode = xmlDoc.getElementsByTagName("north").item(0);
outputList() 메소드를 살펴보자.
out = out + "₩n- " + currentState.childNodes[0].nodeValue;
=> 이부분은 각각의 state 앨리먼트의 첫번째 자식 노드의 값을 out 변수에 계속 연결하는 부분이다.
state 앨리먼트의 값을 표현하고 있는 부분도 XML 에서는 하나의 text 엘리먼트이다. 따라서 각각의
state 엘리먼트의 첫번째 text 자식 엘리먼트를 childNodes[0] 으로 표시한 것이며 그 값을 가져오기 위
해서 nodeValue 속성이 사용된 것이다. nodeValue 는 아래와 같이 data 속성을 사용해도 같은 결과를 얻
는다.
out = out + "₩n- " + currentState.childNodes[0].data;
출처: http://uip80.tistory.com/entry/서버와-통신하기요청응답-처리?category=199706 [여명의집]