반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button onclick="loadXMLDoc()">내용변경</button>
<p id="demo">p tag</p>
<script>
var xhttp = new XMLHttpRequest();
function loadXMLDoc() {
xhttp.onreadystatechange = function() {
//console.log(this.responseText);
//첫번째 한번 들어와서 실행해주고 get으로 오픈 해준 후 send후 게속 실행
//console.log(this.readyState);
console.log(this.status);
//받아서 p tag에 뿌려주는 코드 readystate === 4(완료 됬을떄) this.status(서버까지 가서 200 성공처리됬을떄)
if (this.readyState === 4 && this.status === 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
}
xhttp.open("GET", "test.txt", true);
console.log("xhttp open");
xhttp.send();
console.log("xhttp send");
}
/*
readyState
0 -> open() 메소드를 수행하기 전에
1 -> loading 중...
2 -> loading 완료
3 -> Server 처리 중...
4 -> Server 처리 완료
status가 중요하다
status
200 -> 성공
403 -> 접근 금지
404 -> 페이지 없음
500 -> 구문 에러
*/
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- XML으로 데이터 뿌리기 -->
<p id="demo">
</p>
<script>
var xmltext = "<bookstore>" + // root tag 만들기 (=head), 2개
"<book>" + // node : <book> <title> <author> <year> ...
"<title>탈무드</title>" +
"<author>man</author>" +
"<year>2001</year>" +
"</book>" +
"<book>" + //반드시 위아래 xml태그의 종류와 개수가 똑같아야 함
"<title>이솝이야기</title>" +
"<author>woman</author>" +
"<year>2004</year>" +
"</book>" +
"</bookstore>";
var parser, xmlDoc;
parser = new DOMParser();
xmlDoc = parser.parseFromString(xmltext, "text/html");
// DOMParser() : parsing을 위한 객체 생성 (사용자지정함수 아님)
// xmlDoc = xml데이터로 파싱하여 문서로 담음
//xmltext : xml 데이터 담은 변수
document.getElementById("demo").innerHTML
//xmlDoc.getElementsByTagName("book")[0].childNodes[0]
// .nodeName; // nodeName = "title"이 출력
//xmlDoc.getElementsByTagName("book")[0].childNodes[1]
//.nodeName;
//= xmlDoc.getElementsByTagName("book")[0].childNodes[0].childNodes[0].nodeValue; //탈무드
// = xmlDoc.getElementsByTagName("book").length; //노드의 길이
// getElementsByTagName("태그이름")[인덱스].childNodes[인덱스].nodeName; => 해당 태그의 n번째 자식객체의
= xmlDoc.getElementsByTagName("book").length; //node의 node 길이
</script>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<?xml version="1.0" encoding="UTF-8" ?>
<고객들>
<고객>
<번호>1</번호>
<이름>홍길동</이름>
<주소>서울시</주소>
<방문>2001/12/04</방문>
</고객>
<고객>
<번호>2</번호>
<이름>일지매</이름>
<주소>부산시</주소>
<방문>2004/2/24</방문>
</고객>
<고객>
<번호>3</번호>
<이름>성춘향</이름>
<주소>남원시</주소>
<방문>2011/07/14</방문>
</고객>
</고객들>
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
반응형
'JavaScript > XML' 카테고리의 다른 글
| XML파일 값을 읽어서 테이블에 표시하기 (0) | 2020.01.15 |
|---|---|
| XML 파일 읽어오기 (0) | 2020.01.15 |
