티스토리 뷰

프로그래밍/Front (HTML, CSS, JS)

[Ajax] XMLHttpRequest 객체 사용(responseXML)

꼬렙 2011. 9. 23. 17:22
728x90
프로그래밍을 하다보면 XML 형태의 내용을 읽어오는 경우가 많다

물론 텍스트로 보내서 요령껏 잘 꺼내쓰는 것도 상관은 없지만.. 매우 노가다적인 작업이 된다

예를들어서  아래와 같은 xml 문서가 있다고 치자..

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<XMLTEST>
    <ARTICLE>
        <ARTICLE_NUMBER>20</ARTICLE_NUMBER>
        <ID>GGoReb</ID>
        <PASSWORD>1</PASSWORD>
        <CONTENT>안녕하세요</CONTENT>
        <WRITE_DATE>2011-09-22 09:54:49</WRITE_DATE>
    </ARTICLEr>
    <ARTICLE>
        <ARTICLE_NUMBER>19</ARTICLE_NUMBER>
        <ID>GGoReb</ID>
        <PASSWORD>1</PASSWORD>
        <CONTENT>꺼져</CONTENT>
        <WRITE_DATE>2011-09-22 09:39:51</WRITE_DATE>
    </ARTICLE>
.....
.....
</XMLTEST> 


만약에 이 문서를 그냥 문자열로 받아서 내용만 잘 분해해서 쓸려면
<ARTICLE> 엘리먼트가 총 몇개 나왔는지 찾아보고
하위 엘리먼트들이 뭐가 있는지 확인하고
'<>'를 기준으로 내용과 컬럼명을 구분해주고 등등등등
String 클래스의 indexOf() 와 substring() 같은 문자열을 건드리는 메소드와 매우 친해져야 된다

그리고 만약에 컬럼명이 바뀌거나.. 다른 테이블의 값을 읽어와야 하는 경우가 생긴다면
그 내용에 맞춰서 다시 엄청난 노가다를 해야 될꺼다

그래서 이럴경우 편하게 사용할수 있는 responseXML 이 있다

값을 꺼내오는 부분에서 responseText와 약간 다르다

간단한 예제이다
1. test.jsp 버튼 클릭
2. bb.xml 파일의 내용을 읽어서
3. test.jsp의 content에 내용 출력

[test.jsp]

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>Test</title>
<script language="JavaScript">
var xmlHttp;
function createXMLHttpRequest() {
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function test() {
createXMLHttpRequest();
var url = "bb.xml";
xmlHttp.onreadystatechange = loader;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function loader() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
temp = xmlHttp.responseXML;
document.getElementById("content").innerHTML = temp;
}
}
}
</script>
</head>

<body>
요 밑으로 글자 바뀜<br />
<div id="content">
요기?
</div>
<input type="button" value="바꾸기" onClick="test()" />
</body>

</html>


[bb.xml]

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<XMLTEST>
<ARTICLE>
<ARTICLE_NUMBER>20</ARTICLE_NUMBER>
<ID>GGoReb</ID>
<PASSWORD>1</PASSWORD>
<CONTENT>안녕하세요</CONTENT>
<WRITE_DATE>2011-09-22 09:54:49</WRITE_DATE>
</ARTICLE>
<ARTICLE>
<ARTICLE_NUMBER>19</ARTICLE_NUMBER>
<ID>GGoReb</ID>
<PASSWORD>1</PASSWORD>
<CONTENT>꺼져</CONTENT>
<WRITE_DATE>2011-09-22 09:39:51</WRITE_DATE>
</ARTICLE>
</XMLTEST>


그냥 이대로 실행시키면 아래와 같은 결과가 된다


출력부분에 [object Document] 로 나온다

xml 형태로 넘어온 object를 그대로 출력을 해서 그렇다

그래서 이 object를 약간 건드려 줘야 원하는 결과를 얻을수 있다

loader() 함수만 약간 바꿔준다

function loader() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
var temp = xmlHttp.responseXML;
var articleList = temp.getElementsByTagName("ARTICLE");
var articleNumberList = temp.getElementsByTagName("ARTICLE_NUMBER");
var idList = temp.getElementsByTagName("ID")
var contentList = temp.getElementsByTagName("CONTENT");
var writeDateList = temp.getElementsByTagName("WRITE_DATE");
var result = "------------------------------------<br />";
for(var i = 0; i < articleList.length; i++) {
result = result + 
"ArticleNumber : " + articleNumberList[i].childNodes[0].nodeValue + "<br />" +
"ID : " + idList[i].childNodes[0].nodeValue + "<br />" +
"Content : " + contentList[i].childNodes[0].nodeValue + "<br />" +
"WriteDate : " + writeDateList[i].childNodes[0].nodeValue + "<br />" +
"------------------------------------<br />";
}
document.getElementById("content").innerHTML = result;
}
}
}


reponseXML로 받아온 객체를 꺼낼때는
getElementsByTagName("엘리먼트명") 을 사용한다

getElementsByTagName()의 반환값은 NodeList 이다

만약 <ID> 라는 엘리먼트를 불러오고 싶다면
temp.getElementsByTagName("ID")[index] 이런식으로 배열 번호를 지정해줘야 하고

<ID>꼬렙</ID> 여기서 꼬렙이란 글자를 빼오고 싶다면
temp.getElementsByTagName("ID")[index].nodeValue 가 아니라
temp.getElementsByTagName("ID")[index].childNodes[0].nodeValue 가 된다

꼬렙이란 글자도 ID의 자식 노드로 취급되기 때문이다



※ 결과가 제대로 출력되지 않는다면...
1. XML이 형식에 맞게 잘 되어 있는지 확인
2. 오타 확인..
    - getElementByTagName() => X
    - getElementsByTagName() => O
3. 입력내용에 한글이 있을경우에 인코딩이 부분 확인






'프로그래밍 > Front (HTML, CSS, JS)' 카테고리의 다른 글

[JavaScript] CSS 속성 읽어오기(currentStyle)  (0) 2011.09.27
[JQuery] JQuery Selector  (0) 2011.09.26
[Ajax] XMLHttpRequest 객체 사용(responseText)  (0) 2011.09.23
[HTML] 접속시 임의로 지정한 페이지로 바로 보내고 싶을때  (0) 2011.09.12
[JavaScript] 공백 제거  (0) 2011.09.07