-
728x90반응형
XML DOM
문서 객체 모델(DOM)이란?
DOM(Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 API로 W3C 표준 권고안이다.DOM은 문서 내의 모든 요소를 정의하고, 해당 요소에 접근하는 방법까지 정의한다.
XML 예제
<?xml version="1.0" encoding="UTF-8"?>
<programming_languages>
<language>
<name>HTML</name>
<category>web</category>
<developer>W3C</developer>
<version status="working draft">5.1</version>
<priority rating="1">high</priority>
<language>
</programming_languages>
DOM은 다음 그림과 같이 계층 구조로 표현된다.
W3C DOM 표준은 다음과 같이 세 가지 모델로 구분된다.
- Core DOM : 모든 문서 타입을 위한 DOM 모델
- HTML DOM : HTML 문서를 위한 DOM 모델
- XML DOM : XML 문서를 위한 DOM 모델
HTML DOM
HTML DOM은 HTML 문서에 접근하여 조작할 수 있는 표준화된 방법을 정의한다.
모든 HTML 요소는 HTML DOM을 통해 접근할 수 있다.
XML DOM
XML DOM은 XML 문서에 접근하여, 해당 문서를 조작할 수 있는 표준화된 방법을 정의한다.
모든 XML 요소는 XML DOM을 통해 접근할 수 있다.
XML DOM은 XML 문서 내의 모든 요소의 객체, 속성 그리고 메소드를 정의한다.
이러한 XML DOM은 플랫폼이나 프로그래밍 언어에 상관없이 언제나 사용할 수 있다.
XMLHttpRequest 객체
현재 대부분의 주요 웹 브라우저는 서버에 데이터를 요청하기 위한 XMLHttpRequest 객체를 내장하고 있다.
XMLHttpRequest 객체는 서버로부터 XML 데이터를 전송받아 처리하는 데 사용된다.
이 객체를 사용하면 웹 페이지가 전부 로딩된 후에도 서버에 데이터를 요청하거나 서버로부터 데이터를 전송받을 수 있다.
즉, 웹 페이지 전체를 다시 로딩하지 않고 일부분만을 갱신할 수 있게 된다.
XMLHttpRequest 객체의 생성
자바스크립트를 이용하여 XMLHttpRequest 객체를 생성하는 방법은 다음과 같다.
예제
var xmlHttp = new XMLHttpRequest( );
readyState 프로퍼티
readyState 프로퍼티는 XMLHttpRequest 객체의 현재 상태를 나타낸다.
이 프로퍼티의 값은 객체의 현재 상태에 따라 다음과 같은 주기로 변화한다.
- UNSENT (숫자 0) : XMLHttpRequest 객체가 생성됨.
- OPENED (숫자 1) : open( ) 메소드가 성공적으로 실행됨.
- HEADERS_RECEIVED (숫자 2) : 모든 요청에 대한 응답이 도착함.
- LOADING(숫자 3) : 요청한 데이터를 처리 중임.
- DONE(숫자 4) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨.
status 프로퍼티
status 프로퍼티는 서버의 문서 상태를 나타낸다.
- 200 : 서버에 문서가 존재함.
- 404 : 서버에 문서가 존재하지 않음.
XMLHttpRequest 객체의 전송
자바스크립트를 이용하여 XMLHttpRequest 객체를 전송하는 방법은 다음과 같다.
예제
var xmlHttp = new XMLHttpRequest( ); // XMLHttpRequest 객체를 생성함.
xmlHttp.onreadystatechange = function( ) { // onreadystatechange 이벤트 핸들러를 작성함.
// 서버상에 문서가 존재하고 요청한 데이터의 처리가 완료되어 응답할 준비가 완료되었을 때
if(this.status == 200 && this.readyState == this.DONE) {
// 요청한 데이터를 문자열로 반환함.
document.getElementById("text").innerHTML = xmlHttp.responseText;
}
};
xmlHttp.open("GET", "/examples/media/xml_httpxmlrequest_data.txt", true);
xmlHttp.send( );
respnseText 프로퍼티
responseText 프로퍼티는 서버에 요청하여 응답으로 받은 데이터를 문자열로 저장하고 있다.
예제
document.getElementById("text").innerHTML = xmlHttp.responseText;
responseXML 프로퍼티
responseXML 프로퍼티는 서버에 요청하여 응답으로 받은 데이터를 XML DOM 객체로 저장하고 있다.
예제
xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.
nameList = xmlObj.getElementsByTagName("name"); // XML DOM 객체에서 요소이름이 "name"인 요소들을 선택함.
result = "";
for (idx = 0; idx < nameList.length; idx++) {
// id가 "name"인 요소들의 텍스트 노드를 찾아 그 값을 반환함.
result += nameList[idx].childNodes[0].nodeValue + "<br>";
}
document.getElementById("text").innerHTML = result;
위의 예제에서 사용된 programming_languages.xml 파일의 코드는 다음과 같다.
예제
<?xml version="1.0" encoding="UTF-8"?>
<programming_languages>
<language>
<name>HTML</name>
<category>web</category>
<developer>W3C</developer>
<version status="working draft">5.1</version>
<priority rating="1">high</priority>
</language>
<language>
<name>CSS</name>
<category>web</category>
<developer>W3C</developer>
<version status="stable">3.0</version>
<priority rating="3">middle</priority>
</language>
<language>
<name korean="자바">Java</name>
<category>application</category>
<developer>Oracle</developer>
<version status="stable">8.91</version>
<priority rating="2">high</priority>
</language>
<language>
<name korean="파이썬">Python</name>
<category>application</category>
<developer>Python</developer>
<version status="stable">3.52</version>
<priority rating="4">middle</priority>
</language>
</programming_languages>
비동기식(asynchronous) 요청
서버에 비동기식 요청을 보내기 위해서는 open( ) 메소드의 세 번째 인수로 true를 전달하면 된다.
이렇게 비동기식으로 요청을 보내면 자바스크립트는 서버로부터 응답을 기다리면서 동시에 다른 일을 할 수 있게 된다.
예제
xmlHttp.open("GET", "/media/programming_languages.xml", true);
XML 파서(parser)
현재 대부분의 주요 웹 브라우저는 XML 문서에 접근하고 조작하기 위한 XML 파서를 별도로 내장하고 있다.
XML DOM은 XML 문서에 접근하고 조작할 수 있는 다양한 메소드를 포함하고 있다.
하지만 이러한 메소드를 이용하려면 우선 XML 문서를 XML DOM 객체로 변환해야만 한다.
XML 파서(parser)는 XML 문서의 평문(plain text) 데이터를 읽어 들여, 그것을 XML DOM 객체로 반환해 준다.
문자열 파싱(parsing)
다음 예제는 XML 문서의 문자열을 추출하여 XML DOM 객체로 파싱하고, 해당 객체에서 정보를 추출하는 예제이다.
예제
text = "<lanuage><name>HTML</name>" +
"<category>web</category>" +
"<priority>high</priority>
"<standard version="5.1">W3C</standard></language>";
xmlParser = new DOMParser( ); // DOMParser 객체를 생성함.
// parseFromString( ) 메소드를 이용해 문자열을 파싱함.
xmlDoc = xmlParser.parseFromString(text, "text/xml");
document.getElementById("text").innerHTML = "첫 번째 name 요소의 텍스트 값은 " +
xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue + "입니다.";
728x90반응형
