이 포스트에서는 자바스크립트로 XML 문서의 데이터를 읽어들이는 AJAX 기법을 사용하는 방법을 설명합니다.
우선, XML 문서가 다음과 같이 있다고 가정합니다.
<?xml version="1.0" encoding="UTF-8"?>
<girlgroup>
<name>여자친구</name>
<members>
<member>소원</member>
<member>예린</member>
<member>은하</member>
<member>유주</member>
<member>신비</member>
<member>엄지</member>
</members>
<albums>
<album order="EP 1집">Season of Glass</album>
<album order="EP 2집">Flower Bud</album>
<album order="EP 3집">Snowflake</album>
<album order="정규 1집">LOL</album>
</albums>
</girlgroup>
이 XML 문서의 파일 이름이 xml_sample.xml이라고 가정하고 HTML 문서를 하나 만들어 봅니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function loadDoc() {
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
req.open("GET", "xml_sample.xml", true);
req.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var gname = xmlDoc.getElementsByTagName("name")[0].firstChild.data;
document.getElementById("gname").innerHTML = gname;
var members = "";
var member = xmlDoc.getElementsByTagName("member");
for (i = 0; i < member.length; i++) {
if (i != 0) { members += ", "; }
members += member[i].firstChild.data;
}
document.getElementById("members").innerHTML = members;
var albums = "";
var album = xmlDoc.getElementsByTagName("album");
for (i = 0; i < album.length; i++) {
albums += "<li>" + album[i].getAttribute('order') + ": " +
album[i].firstChild.data + "</li>\n";
}
document.getElementById("albums").innerHTML = albums;
}
</script>
<title>AJAX Sample</title>
</head>
<body onload="loadDoc();">
<h2 id="gname"></h2>
<p>멤버 구성: <span id="members"></span></p>
<h3>앨범 목록</h3>
<ul id="albums"></ul>
</body>
</html>
여기서 자바스크립트 부분이 AJAX 처리를 담당할 부분입니다.
우선 AJAX 처리를 준비할 함수를 선언합니다. (이 예제의 6번 줄부터 15번 줄까지) new XMLHttpRequest()로 XML의 HTTP 요청을 받아들일 객체 변수 req를 선언해 두고, 요청 후 응답에 성공하면 파싱으로 넘어가기 위한 코드를 추가합니다. 조건문에서 제시된 조건이 this.readyState == 4 && this.status == 200 이렇게 되어 있는데 이는 서버로부터 모든 응답을 받았으며(코드 4) 성공적으로 읽어들였을 때(코드 200) 유효한 조건임을 의미합니다. 그리고 req에 open 메소드를 써서 요청을 보내기 위한 준비를 합니다. 여기서는 GET 방식으로 xml_sample.xml 파일의 데이터를 비동기식(Asynchronous)으로 전송받겠다는 의미입니다. (3번째 인수가 비동기식 여부입니다.) 그 후 send 메소드를 써서 요청을 보냅니다.
XML 파일이 있다면 서버로부터 성공적으로 코드번호 200번과 함께 데이터를 받아올 것이고 그러면 데이터 처리를 위해 정의된 함수(이 페이지의 17번 줄부터 39번 줄까지)를 수행합니다. 가장 먼저 서버로부터 받아온 XML 데이터를 .responseXML 프로퍼티를 써서 배열화한 후 객체 변수 xmlDoc에 대입합니다. 이를 받아서 HTML 문서에 넣습니다.
21번 줄에서는 name 요소의 값인 ‘여자친구’를 추출해서 22번 줄에서는 이 값을 ID가 gname인 요소에 넣습니다. 그 다음으로 member 요소의 값들을 추출할 차례입니다. (25번 줄부터) member 요소는 6개 있으므로 이 요소의 값을 모두 추출하기 위해 반복문을 사용합니다. 이 반복문 안에서 추출한 값들을 미리 정의해 둔 문자열 변수 members에 추가해 나갑니다. 그리고 첫 값이 아닐 경우 쉼표(,)가 추가되도록 합니다. 이러면 문자열 변수의 값은 “소원, 예린, 은하, 유주, 신비, 엄지”가 될 것입니다. 이를 ID가 members인 요소에 넣습니다.
마지막으로 앨범 목록을 받아와서 출력하기 위해 album 요소의 값들을 추출할 차례인데 (33번 줄부터) 이번에는 본래의 XML 문서에 <album order="EP 1집">Season of Glass</album> 식으로 속성값이 함께 존재해서 처리 방법이 조금 달라질 것입니다. 앞의 member 요소 처리할 때와 같은 방법으로 미리 문자열 변수 albums를 정의해 두고 반복문으로 처리하는데 속성값을 추출하기 위해서 getAttribute() 메소드를 사용합니다. 여기서는 인자값으로 ‘order’를 씀으로써 order 속성의 값을 추출하고 또 .firstChild 프로퍼티로 본래 데이터 값도 함께 추출합니다. 이 값은 ID가 albums인 요소에 들어갈 것입니다. 다만, ul 태그 안에 목록으로 들어갈 것이므로 처리할 때마다 li 태그로 감쌉니다.
그러면 다음과 같이 표시될 것입니다.
멤버 구성: 소원, 예린, 은하, 유주, 신비, 엄지
- EP 1집: Season of Glass
- EP 2집: Flower Bud
- EP 3집: Snowflake
- 정규 1집: LOL
이렇게 파싱된 XML 데이터가 표시되면 성공입니다.
저는 이렇게 해봤는데 값이 안뜹니다 ㅜㅜ
var xhr = new XMLHttpRequest();
var url = ‘http://openapi.tago.go.kr/openapi/service/ArvlInfoInqireService/getCtyCodeList?serviceKey=A2C6WKuZwdEx08OODGH2clmfQCkFMypGQMfr5pt4M1EXiVfgzdi1Ek%2Ff4Uu1026jycb2MSyg9LEyCxrfhbENvg%3D%3D’;
xhr.open(‘GET’, url);
xhr.send();
alert(xhr);
안녕하세요. 댓글 감사합니다.
확인해 본 결과 “No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘(URL 주소)’ is therefore not allowed access.” 오류가 발생하였습니다.
이는 서버 측에서 보안상의 이유로 크로스 도메인을 차단하여 생기는 문제입니다.
이 경우는 jQuery의 플러그인을 이용하거나 PHP 등 서버 프로그래밍이 가능하다면 우회적인 방법으로 해결할 수 있습니다.
https://pjw48.net/wordpress/2017/02/14/xml-parsing-jquery/
위의 포스트에서 맨 밑의 댓글을 보시면 크로스 도메인 차단을 우회해서 AJAX 요청을 하는 방법이 있습니다.
아니면,
http://www.isgoodstuff.com/2012/07/22/cross-domain-xml-using-jquery/
위의 사이트에서 크로스 도메인을 우회해서 XML을 액세스하는 jQuery 스크립트를 참고해서 쓸 수도 있습니다.