[AJAX] JS - AJAX - XML 아작스 예제 (= xml 데이터 불러와 표만들기)

1. 모든 데이터 가져오기
2. 첫번째 데이터 가져오기
3. 네비게이션 버튼 만들기
4. 리스트 클릭 시, 상세정보 보여주기

※ 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>