xml파일을 만들어준다
<?xml version="1.0" encoding="UTF-8"?>
<data>
<person>
<name>이순신</name>
<phone>01033112311</phone>
</person>
<person>
<name>세종대왕</name>
<phone>01011221122</phone>
</person>
</data>
html 파일을 만든다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax XML 파싱</title>
<script>
function xml() {
var request;
//IE8.0 이하 브라우저가 아닐 때
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
alert("Ajax 요청 객체 생성");
}
//IE8.0 이하 브라우저일 때
else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
alert("IE에서 객체 생성");
} else {
alert("객체 생성 실패");
}
//Ajax 요청 주소 생성 - data.txt 를 get 방식으로 요청
//Ajax 요청 주소 생성
request.open('GET', 'name.xml');
//Ajax 요청
request.send();
//요청을 한 후 상태 변화를 확인
request.onreadystatechange = function() {
//응답이 전부 왔다면
if (request.readyState == 4) {
//응답이 정상이라면
if (request.status >= 200 && request.status < 300) {
//가져오는데 성공했을 때 처리
//xml데이터 가져오기
var str = request.responseXML;
//name 태그와 phone 태그의 모든 내용 가져오기
var names = str.getElementsByTagName("name");
var phones = str.getElementsByTagName("phone");
var display = document.getElementById("connet");
for(var i=0;i<names.length;i++){
display.innerHTML +=
names[i].childNodes[0].nodeValue + ":"
phones[i].childNodes[0].nodeValue +"<br />";
}
}
} else {
alert("데이터를 가져오기 실패");
}
}
}
};
</script>
</head>
<body>
<input type="button" value="xml 가져오기" onclick="xml()" />
<br />
<div id="connet"></div>
</body>
</html>
'Web개발 > JSP, Web' 카테고리의 다른 글
| [javascript] 캔버스 트랜스 폼 (0) | 2014.11.18 |
|---|---|
| [javascript] 캔버스 그리기 (0) | 2014.11.18 |
| [JSP] javaseript 사용하기4 (0) | 2014.11.18 |
| [JSP] javaseript 사용하기3 (0) | 2014.11.18 |
| [JSP] javaseript 사용하기2 (0) | 2014.11.18 |