- XML (eXtensible Markup Language)
๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๊ณ ๊ณต์ ํ๊ธฐ ์ํ ๋ชฉ์ .
์ ์ฅ๋๋ ๋ฐ์ดํฐ์ ๊ตฌ์กฐ๋ฅผ ๊ธฐ์ ํ๋ ์ธ์ด.
- ๊ธฐ๋ณธ ํ์
<?xml version="1.0" encoding="UTF-8"?>
<๊ณ ๊ฐ๋ค>
<๊ณ ๊ฐ>
<๋ฒํธ>1</๋ฒํธ>
<์ด๋ฆ>ํ๊ธธ๋</์ด๋ฆ>
<์ฃผ์>์์ธ์</์ฃผ์>
<๋ฐฉ๋ฌธ>2020/03/23</๋ฐฉ๋ฌธ>
</๊ณ ๊ฐ>
<๊ณ ๊ฐ>
<๋ฒํธ>2</๋ฒํธ>
<์ด๋ฆ>์ฑ์ถํฅ</์ด๋ฆ>
<์ฃผ์>๋จ์์</์ฃผ์>
<๋ฐฉ๋ฌธ>2021/01/31</๋ฐฉ๋ฌธ>
</๊ณ ๊ฐ>
<๊ณ ๊ฐ>
<๋ฒํธ>3</๋ฒํธ>
<์ด๋ฆ>์ผ์ง๋งค</์ด๋ฆ>
<์ฃผ์>๋ถ์ฐ์</์ฃผ์>
<๋ฐฉ๋ฌธ>2019/07/11</๋ฐฉ๋ฌธ>
</๊ณ ๊ฐ>
</๊ณ ๊ฐ๋ค>- XML ํ์ผ ์ฝ๊ธฐ
XMLํ์ผ์ ๋ถ๋ฌ์ฌ ๋ DOM์ผ๋ก ์ ๊ทผํ์ฌ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ฌ ์ ์๋ค.
*์๋ ๊ณผ์ ์ ํ์ ๊ณผ์ ์ด๋ฏ๋ก ํ์ ์์๋ ๊ฒ.
<script type="text/javascript">
let xhttp = new XMLHttpRequest(); //xml ํ์ผ ์ฝ๊ธฐ Request : ์์ฒญ
function loadXMLDoc() {
xhttp.onreadystatechange = function () {
// console.log(this.responseText); // response : ์๋ต
// console.log(this.status);
// console.log(this.readyState);
if(this.readyState == 4 && this.status == 200) { //์ฒ๋ฆฌ์๋ฃ && ์ฑ๊ณต์ผ ๋,
document.getElementById("demo").innerHTML = this.responseText;
}
}
xhttp.open("GET", "test.txt", true);
xhttp.send();
}
</script>- readyState : ์งํ์ํ
0 -> open ๋ฉ์๋๋ฅผ ์ํํ๊ธฐ ์ ์ํ
1 -> loading ์ค...
2 -> loading ์๋ฃ
3 -> Server ์ฒ๋ฆฌ์ค
4 -> Server ์ฒ๋ฆฌ์๋ฃ
- status
200 -> success
403 -> ์ ๊ทผ ๊ธ์ง, Forbidden.
404 -> ์์. not found.
500 -> ์๋ฒ ์๋ฌ. Server error.
- XML ํ์(parser)
ํ์ฌ ๋๋ถ๋ถ์ ์ฃผ์ ์น ๋ธ๋ผ์ฐ์ ๋ XML ๋ฌธ์์ ์ ๊ทผํ๊ณ ์กฐ์ํ๊ธฐ ์ํ XML ํ์๋ฅผ ๋ณ๋๋ก ๋ด์ฅํ๊ณ ์์ต๋๋ค.
XML DOM์ XML ๋ฌธ์์ ์ ๊ทผํ๊ณ ์กฐ์ํ ์ ์๋ ๋ค์ํ ๋ฉ์๋๋ฅผ ํฌํจํ๊ณ ์์ต๋๋ค.
ํ์ง๋ง ์ด๋ฌํ ๋ฉ์๋๋ฅผ ์ด์ฉํ๋ ค๋ฉด ์ฐ์ XML ๋ฌธ์๋ฅผ XML DOM ๊ฐ์ฒด๋ก ๋ณํํด์ผ๋ง ํฉ๋๋ค.
XML ํ์(parser)๋ XML ๋ฌธ์์ ํ๋ฌธ(plain text) ๋ฐ์ดํฐ๋ฅผ ์ฝ์ด ๋ค์ฌ, ๊ทธ๊ฒ์ XML DOM ๊ฐ์ฒด๋ก ๋ฐํํด ์ค๋๋ค.
(TCPSCHOOL ์ฐธ๊ณ ๋ฌธํ)
<script type="text/javascript">
let xmltext = "<bookstore>" + //root tag
"<book>" + // node
"<title>ํ๋ฌด๋</title>" +
"<author>man</author>" +
"<year>2001</year>" +
"</book>" +
"<book>" + // node
"<title>์ด์์ด์ผ๊ธฐ</title>" +
"<author>woman</author>" +
"<year>2004</year>" +
"</book>" +
"</bookstore>";
let parser, xmlDoc;
parser = new DOMParser(); // DOMParser ๊ฐ์ฒด๋ฅผ ์์ฑํจ.
xmlDoc = parser.parseFromString(xmltext, "text/html");
// parseFromString() ๋ฉ์๋๋ฅผ ์ด์ฉํด ๋ฌธ์์ด์ ํ์ฑํจ.
//alert(xmlDoc);
document.getElementById("demo").innerHTML
// = xmlDoc.getElementsByTagName("book")[0].childNodes[0].nodeName; //TITLE
// = xmlDoc.getElementsByTagName("book")[0].childNodes[1].nodeName; //author
// = xmlDoc.getElementsByTagName("book")[0].childNodes[0].childNodes[0].nodeValue; //ํ๋ฌด๋
// = xmlDoc.getElementsByTagName("book").length; //2 (book)
= xmlDoc.getElementsByTagName("book")[0].childNodes.length; //3 (title, author, year)
</script>
- ์ฃผ์ ์ค๋ช ์ฐธ๊ณ ํ๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p id="demo"></p>
<script type="text/javascript">
// XML ํ์ผ๋ก๋ถํฐ ๋ฐ์ดํฐ๋ฅผ ์ฝ์ด๋ค์ฌ, ํด๋น ๋ฐ์ดํฐ๋ฅผ ์น ํ์ด์ง์ ํ์
// ๊ธฐ๋ณธ ํ์
let xhttp = new XMLHttpRequest(); // XMLHttpRequest ๊ฐ์ฒด ์์ฑ
xhttp.onreadystatechange = function () { // onreadystatechange ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ์์ฑํจ.
if(this.readyState == 4 && this.status == 200) {
// ์๋ฒ์์ ๋ฌธ์๊ฐ ์กด์ฌํ๊ณ ์์ฒญํ ๋ฐ์ดํฐ์ ์ฒ๋ฆฌ๊ฐ ์๋ฃ๋์ด ์๋ตํ ์ค๋น๊ฐ ์๋ฃ๋์์ ๋
// nodeValFunc(this);
nodeNameFunc(this);
// childNodeFunc(this);
}
}
xhttp.open("GET", "member.xml", true);
xhttp.send();
function nodeValFunc(xml) { //๋
ธ๋์ value๊ฐ ๊ฐ์ ธ์ค๊ธฐ
let num, name;
let txt, numtxt, xmlDoc;
txt = numtxt = "";
xmlDoc = xml.responseXML; // ์์ฒญํ ๋ฐ์ดํฐ๋ฅผ XML DOM ๊ฐ์ฒด๋ก ๋ฐํํจ.
console.log(xmlDoc);
// ๋
ธ๋๋ก์ ์ ๊ทผ
// ๋
ธ๋์ด๋ฆ.getElementsByTagName("ํ๊ทธ์ด๋ฆ")
num = xmlDoc.getElementsByTagName('๋ฒํธ'); //<๋ฒํธ> ์์๋ค์ ๋ฐํ
name = xmlDoc.getElementsByTagName('์ด๋ฆ'); //<์ด๋ฆ> ์์๋ค์ ๋ฐํ
console.log(num.length); // 3 (1, 2, 3์ด ์๋ค.)
for (i = 0; i < num.length; i++) {
txt += num[i].childNodes[0].nodeValue + "<br>"; //'i๋ฒ์งธ <๋ฒํธ>ํ๊ทธ'์ '์ฒซ๋ฒ์งธ ์์๋
ธ๋'์ value ๋ฐํ
numtxt += name[i].childNodes[0].nodeValue + "<br>"; //'i๋ฒ์งธ <์ด๋ฆ>ํ๊ทธ'์ '์ฒซ๋ฒ์งธ ์์๋
ธ๋'์ value ๋ฐํ
}
document.getElementById("demo").innerHTML = txt + numtxt;
//๊ฒฐ๊ณผ๊ฐ : 1 2 3 ํ๊ธธ๋ ์ฑ์ถํฅ ์ผ์ง๋งค
}
function nodeNameFunc(xml) { //๋
ธ๋์ ์ด๋ฆ ๊ฐ์ ธ์ค๊ธฐ
let arr, xmlDoc, txt;
txt = "";
xmlDoc = xml.responseXML; // responseXML : ์์ฒญํ ๋ฐ์ดํฐ๋ฅผ XML DOM ๊ฐ์ฒด๋ก ๋ฐํํจ.
arr = xmlDoc.documentElement.childNodes; // XML ๋ฌธ์ ๋
ธ๋์ ์์ ๋
ธ๋๋ฅผ ๋ฐํํจ.
for (var i = 0; i < arr.length; i++) {
alert(arr[i]);
}
for (i = 0; i < arr.length; i++) {
if(arr[i].nodeType == 1 ) { //๋ฐ์ดํฐ๊ฐ ์์ ๋ (์์ ๋
ธ๋๋ง์ ์ถ๋ ฅํจ.)
/* nodeType ๊ฐ
์์ ๋
ธ๋(element node) : 1
์์ฑ ๋
ธ๋(attribute node) : 2
ํ
์คํธ ๋
ธ๋(text node) : 3
์ฃผ์ ๋
ธ๋(comment node) : 8
๋ฌธ์ ๋
ธ๋(document node) : 9
*/
txt += arr[i].nodeName + "<br>";
}
}
document.getElementById("demo").innerHTML = txt;
//๊ฒฐ๊ณผ๊ฐ : ๊ณ ๊ฐ ๊ณ ๊ฐ ๊ณ ๊ฐ
}
function childNodeFunc(xml) { //์์ ๋
ธ๋ ์์์ ๋
ธ๋ ์ด๋ฆ ๊ฐ์ ธ์ค๊ธฐ
let arr, xmlDoc, txt;
txt = "";
xmlDoc = xml.responseXML; // ์์ฒญํ ๋ฐ์ดํฐ๋ฅผ XML DOM ๊ฐ์ฒด๋ก ๋ฐํํจ.
arr = xmlDoc.getElementsByTagName("๊ณ ๊ฐ")[0]; //์ฒซ ๋ฒ์งธ <๊ณ ๊ฐ>์์๋ฅผ ๋ฐํํจ.
let len = arr.childNodes.length;
// alert(len); // 9
let fchild = arr.firstChild; // ์ฒซ ๋ฒ์งธ <๊ณ ๊ฐ>์์์ ์ฒซ ๋ฒ์งธ ์์ ๋
ธ๋๋ฅผ ๋ฐํํจ.
for (var i = 0; i < len; i++) {
if(fchild.nodeType == 1) { // ์์ ๋
ธ๋๋ง์ ์ถ๋ ฅํจ.
txt += i + " " + fchild.nodeName + "<br>";
}
fchild = fchild.nextSibling; // ํ์ฌ ๋
ธ๋์ ๋ฐ๋ก ๋ค์ ํ์ ๋
ธ๋๋ฅผ ๋ฐํํจ.
}
document.getElementById("demo").innerHTML = txt;
//๊ฒฐ๊ณผ๊ฐ : 1 ๋ฒํธ 3 ์ด๋ฆ 5 ์ฃผ์ 7 ๋ฐฉ๋ฌธ
}
</script>
</body>
</html>
- JSON : JavaScript Object Notation
XML๊ณผ ๊ฐ์ด ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๊ณ ๊ณต์ ํ๊ธฐ ์ํ ๋ชฉ์ . XML์ ๋นํด ๊ตฌ๋ฌธ์ด ๊ฐ๊ฒฐํ๋ค๋ ์ฅ์ ์ด ์๋ค.
- ๊ธฐ๋ณธ ํ์
key : value
,(์ฝค๋ง) ์ฐ๋ ์์น์ ์ ์ํ์.
[
{
"name":"์ ์๋",
"age":23,
"address":"์์ธ์",
"height":181.1
},
{
"name":"์ฌ์ฒญ์ด",
"age":14,
"address":"๊ฐ์์",
"height":165.3
},
{
"name":"ํฅ๋จ์ด",
"age":16,
"address":"๋จ์์",
"height":157.9
},
{
"name":"์ด๋ชฝ๋ฃก",
"age":18,
"address":"๊ณต์ฃผ์",
"height":173.9
}
]
- parse() : ์ธ์๋ก ์ ๋ฌ๋ฐ์ ๋ฌธ์์ด์ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด๋ก ๋ณํํ์ฌ ๋ฐํ
- stringify() : ์ธ์๋ก ์ ๋ฌ๋ฐ์ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด๋ฅผ ๋ฌธ์์ด๋ก ๋ณํํ์ฌ ๋ฐํ
<script type="text/javascript">
let jsonData = [
{
"name":"ํ๊ธธ๋",
"age":24
},
{
"name":"์ฑ์ถํฅ",
"age":16
},
{
"name":"์ผ์ง๋งค",
"age":16
}
];
document.getElementById("demo").innerHTML = jsonData[1].name + " " +jsonData[1].age;
let arrText = '{"name":"ํ๊ธธ๋", "age":24, "์ฃผ์":"์์ธ์"}';
let jsonObj = JSON.parse(arrText); // String -> Json
let strObj = JSON.stringify(jsonObj); // Json -> String (ํ์ธ์ฉ์ผ๋ก ์ฃผ๋ก ์ฌ์ฉ)
document.getElementById("demo").innerHTML = jsonObj.name + " " + jsonObj.์ฃผ์;
</script>
- JSON ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ
์ฒซ๋ฒ์งธ ๋ฐฉ๋ฒ์ for๋ฌธ ์์ for each๋ฌธ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ๋ฐฉ๋ฒ์ด๊ณ ,
๋๋ฒ์งธ ๋ฐฉ๋ฒ์ for๋ฌธ ํ๋๋ก ๊ฐ key์ ๊ฐ์ ๊ฐ์ ธ์ค๋ ๋ฐฉ๋ฒ์ด๋ค.
์ํฉ์ ๋ง๊ฒ ๊ณจ๋ผ ์ฌ์ฉํ๋ฉด ๋๋ค.
<script type="text/javascript">
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if(xhttp.readyState == 4 && xhttp.status == 200) {
jsonFunc(this.responseText);
}
};
xhttp.open("GET","data.json", true);
xhttp.send();
function jsonFunc(respTxt) {
let json = JSON.parse(respTxt);
// alert(json.length); //4
let txt = "";
//์ฒซ๋ฒ์งธ ๋ฐฉ๋ฒ
for (var i = 0; i < json.length; i++) {
for(key in json[i]) {
txt += key + ":" + json[i][key];
}
txt += "<br>";
}
//๋๋ฒ์งธ ๋ฐฉ๋ฒ
for (var i = 0; i < json.length; i++) {
txt += json[i].name +" "+
json[i].age +" "+
json[i].address +" "+
json[i].height +"<br>";
}
document.getElementById("demo").innerHTML = txt;
};
</script>
- ๋ฐ์ดํฐ์ ํ์ ๊ฐ์ ์๋์ ๊ฐ์ด . ์ ๋ถ์ฌ ๋ค์ด๊ฐ ์ ์๋ค.
ex ) quiz → sport → q1 →options → 2๋ฒ์ง๊ฐ
= json.quiz.sport.q1.options[2]
<script type="text/javascript">
let json = {
"quiz": {
"sport": {
"q1": {
"question": "Which one is correct team name in NBA?",
"options": [
"New York Bulls",
"Los Angeles Kings",
"Golden State Warriros",
"Huston Rocket"
],
"answer": "Huston Rocket"
}
},
"maths": {
"q1": {
"question": "5 + 7 = ?",
"options": [
"10",
"11",
"12",
"13"
],
"answer": "12"
},
"q2": {
"question": "12 - 8 = ?",
"options": [
"1",
"2",
"3",
"4"
],
"answer": "4"
}
}
}
};
function jsonTest() {
document.getElementById("demo").innerHTML
// = json.quiz["sport"].q1.options[2]; //Golden State Warriros
// = json.quiz.sport.q1["options"][2]; //Golden State Warriros
= json.quiz.maths.q2.question; //12 - 8 = ?
};
jsonTest();
</script><์์>
๋ค์ ์ ๋ณด๋ฅผ XML ๊ณผ JSON ์ผ๋ก ํ์ผ ์ ์ํ์ฌ ํ ์ด๋ธ๋ก ์์ฑํ๊ธฐ.
- ์ฑ
: 5๊ถ
- ์ ๋ชฉ(title), ์ ์(author), ๊ฐ๊ฒฉ(price)
XML
<?xml version="1.0" encoding="UTF-8"?>
<novel>
<book>
<title>๋ฐ๋ฏธ์</title>
<author>ํค๋ฅด๋ง ํค์ธ</author>
<price>7,200์</price>
</book>
<book>
<title>ํธ๋ฐ๋ฐญ์ ํ์๊พผ</title>
<author>์ ๋กฌ ๋ฐ์ด๋น๋ ์๋ฆฐ์ </author>
<price>7,200์</price>
</book>
<book>
<title>1984</title>
<author>์กฐ์ง ์ค์ฐ</author>
<price>8,550์</price>
</book>
<book>
<title>์ธ๊ฐ ์ค๊ฒฉ</title>
<author>๋ค์์ด ์ค์ฌ๋ฌด</author>
<price>7,200์</price>
</book>
<book>
<title>์๋ํ ๊ฐ์ธ ๋น</title>
<author>F.์ค์ฝง ํผ์ธ ์ ๋ด๋</author>
<price>7,200์</price>
</book>
</novel>
XML_Work.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table, tr{
border: 1px solid #444444;
text-align: center;
}
th, td{
border: 1px solid #444444;
width: 100px;
height: 20px;
}
</style>
</head>
<body>
<table id="booksTable">
<col width="20%"><col width="20%"><col width="20%">
<tr>
<th>์ ๋ชฉ</th>
<th>์ ์</th>
<th>๊ฐ๊ฒฉ</th>
</tr>
</table>
<script type="text/javascript">
let tdList = document.getElementsByTagName('td');
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if(this.readyState == 4 && this.status == 200) {
nodeValFunc(this);
}
};
xhttp.open("GET", "book.xml", true);
xhttp.send();
function appendRow() { // ํ
์ด๋ธ ๋ก์ฐ๋ฅผ ์์ฑํ๋ ํจ์
let myTable = document.getElementById("booksTable");
let tr = document.createElement('tr');
let td1 = document.createElement('td');
let td2 = document.createElement('td');
let td3 = document.createElement('td');
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
myTable.appendChild(tr);
}
function nodeValFunc(xml) {
let title, author, price;
let numtxt, xmlDoc;
numtxt = "";
xmlDoc = xml.responseXML;
title = xmlDoc.getElementsByTagName("title");
author = xmlDoc.getElementsByTagName("author");
price = xmlDoc.getElementsByTagName("price");
for (var i = 0; i < title.length; i++) {
appendRow(); //๋ฐ์ดํฐ๋ฅผ ๋ฃ๊ธฐ ์ ์ ๋ก์ฐ ์์ฑ
tdList[3*i].innerHTML = title[i].childNodes[0].nodeValue;
tdList[3*i+1].innerHTML = author[i].childNodes[0].nodeValue;
tdList[3*i+2].innerHTML = price[i].childNodes[0].nodeValue;
}
}
</script>
</body>
</html>JSON
[
{
"title":"๋ฐ๋ฏธ์",
"author":"ํค๋ฅด๋ง ํค์ธ",
"price":"7,200์"
},
{
"title":"ํธ๋ฐ๋ฐญ์ ํ์๊พผ",
"author":"์ ๋กฌ ๋ฐ์ด๋น๋ ์๋ฆฐ์ ",
"price":"7,200์"
},
{
"title":"1984",
"author":"์กฐ์ง ์ค์ฐ",
"price":"8,550์"
},
{
"title":"์ธ๊ฐ ์ค๊ฒฉ",
"author":"๋ค์์ด ์ค์ฌ๋ฌด",
"price":"7,200์"
},
{
"title":"์๋ํ ๊ฐ์ธ ๋น",
"author":"F.์ค์ฝง ํผ์ธ ์ ๋ด๋",
"price":"7,200์"
}
]
JSON_Work.html
jsonfunc ํจ์์์ ๋ฐ์ดํฐ๋ฅผ ๋ฐ๋ ๋ฐฉ๋ฒ๋ง XML_Work.html์ ๋ค๋ฅด๊ณ ๋๋จธ์ง ๊ฐ๋ค.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table, tr{
border: 1px solid #444444;
text-align: center;
}
th, td{
border: 1px solid #444444;
width: 100px;
height: 20px;
}
</style>
</head>
<body>
<table id="booksTable">
<col width="20%"><col width="20%"><col width="20%">
<tr>
<th>์ ๋ชฉ</th>
<th>์ ์</th>
<th>๊ฐ๊ฒฉ</th>
</tr>
</table>
<script type="text/javascript">
let tdList = document.getElementsByTagName('td');
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if(this.readyState == 4 && this.status == 200) {
jsonfunc(this.responseText);
}
};
xhttp.open("GET","book.json",true);
xhttp.send();
function appendRow() { // ํ
์ด๋ธ ๋ก์ฐ ์์ฑ ํจ์
let myTable = document.getElementById("booksTable");
let tr = document.createElement('tr');
let td1 = document.createElement('td');
let td2 = document.createElement('td');
let td3 = document.createElement('td');
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
myTable.appendChild(tr);
}
function jsonfunc(respTxt) {
let json = JSON.parse(respTxt);
for (var i = 0; i < json.length; i++) {
appendRow();
tdList[3*i].innerHTML = json[i].title;
tdList[3*i+1].innerHTML = json[i].author;
tdList[3*i+2].innerHTML = json[i].price;
}
}
</script>
</body>
</html>
'๐ป ๊ฐ๋ฐ > ๐ TIL (Today I Learned)' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| 21.03.12 TIL(D+42 ์๋ธ๋ฆฟ Cookie and Session, JSP, Ajax) (0) | 2021.03.12 |
|---|---|
| 21.03.10(D+40 ์๋ธ๋ฆฟ(Servlet) , WAS) (0) | 2021.03.10 |
| 21.03.05 TIL(D+37 jQuery) (0) | 2021.03.05 |
| 21.03.04 TIL(D+36 JavaScript) (0) | 2021.03.04 |
| 21.03.03 TIL(D+35 JavaScript) (0) | 2021.03.03 |
