목차
- 모든 데이터 가져오기
- 첫번째 데이터 가져오기
- 네비게이션 버튼 만들기
- 리스트 클릭 시, 상세정보 보여주기
※ AJAX는 xml 파일과 대화적 통신 가능.
모든 데이터 가져오기
[작동 원리]
버튼 클릭하면 hz() 함수 실행됨.
이 hz()함수는
XMLHttpRequest 객체 생성하고
서버 응답이 준비될 때 실행될 함수를 추가 한 다음
요청을 서버로 보냄.
서버 응답이 준비되면
HTML 테이블이 작성되고
XML 파일에서 nodes (= 요소)가 추출되며
마지막으로 XML 데이터로 채워진 HTML 테이블로 "demo"요소를 업데이트 함.
b.php
<button type="button" onclick="hz()">베스트 사이트?</button>
<table id="demo"></table>
<script>
function hz() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
getXML(this);
}
};
xhttp.open("GET", "a.xml", true);
xhttp.send();
}
function getXML(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>NAME</th><th>DOMAIN</th></tr>";
var x = xmlDoc.getElementsByTagName("SITE");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("DOMAIN")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
a.xml
<GOODSITE>
<SITE>
<NAME>홈짱닷컴</NAME>
<DOMAIN>Homzzang.com</DOMAIN>
</SITE>
<SITE>
<NAME>그누보드</NAME>
<DOMAIN>Sir.kr</DOMAIN>
</SITE>
</GOODSITE>
첫번째 데이터 가져오기
b.php
<div id='demo'></div>
<script>
displaySITE(0);
function displaySITE(i) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
getXML(this, i);
}
};
xmlhttp.open("GET", "a.xml", true);
xmlhttp.send();
}
function getXML(xml, i) {
var xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("SITE");
document.getElementById("demo").innerHTML =
"Name: " +
x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue +
"<br>Domain: " +
x[i].getElementsByTagName("DOMAIN")[0].childNodes[0].nodeValue;
}
</script>
네비게이션 버튼 만들기
b.php
<div id='demo'></div>
<input type="button" onclick="previous()" value="<<">
<input type="button" onclick="next()" value=">>">
<script>
var i = 0, len;
displaySITE(i);
function displaySITE(i) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
getXML(this, i);
}
};
xmlhttp.open("GET", "a.xml", true);
xmlhttp.send();
}
function getXML(xml, i) {
var xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("SITE");
len = x.length;
document.getElementById("demo").innerHTML =
"NAME: " +
x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue +
"<br>DOMAIN: " +
x[i].getElementsByTagName("DOMAIN")[0].childNodes[0].nodeValue;
}
function next() {
if (i < len-1) {
i++;
displaySITE(i);
}
}
function previous() {
if (i > 0) {
i--;
displaySITE(i);
}
}
</script>
리스트 클릭 시, 상세정보 보여주기
b.php
<p id='demo'></p>
<table id="sitelist"></table>
<script>
var x,xmlhttp,xmlDoc
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "a.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
x = xmlDoc.getElementsByTagName("SITE");
table="<tr><th>NAME</th><th>DOMAIN</th></tr>";
for (i = 0; i <x.length; i++) {
table += "<tr onclick='displaySITE(" + i + ")'><td>";
table += x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue;
table += "</td><td>";
table += x[i].getElementsByTagName("DOMAIN")[0].childNodes[0].nodeValue;
table += "</td></tr>";
}
document.getElementById("sitelist").innerHTML = table;
function displaySITE(i) {
document.getElementById("demo").innerHTML =
"사이트: " +
x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue +
"<br>도메인: " +
x[i].getElementsByTagName("DOMAIN")[0].childNodes[0].nodeValue +
"<br>오픈년: " +
x[i].getElementsByTagName("OPEN")[0].childNodes[0].nodeValue;
}
</script>
a.xml
<GOODSITE>
<SITE>
<NAME>홈짱닷컴</NAME>
<DOMAIN>Homzzang.com</DOMAIN>
<OPEN>2012</OPEN>
</SITE>
<SITE>
<NAME>그누보드</NAME>
<DOMAIN>Sir.kr</DOMAIN>
<OPEN>2001</OPEN>
</SITE>
</GOODSITE>
