• Q&A
  • 회원가입
  • 로그인

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

698  

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) {

      myFunction(this);

    }

  };

  xhttp.open("GET", "a.xml", true);

  xhttp.send();

}

function myFunction(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) {

      myFunction(this, i);

    }

  };

  xmlhttp.open("GET", "a.xml", true);

  xmlhttp.send();

}


function myFunction(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) {

      myFunction(this, i);

    }

  };

  xmlhttp.open("GET", "a.xml", true);

  xmlhttp.send();

}


function myFunction(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>

 

 

 

 


찾아주셔서 감사합니다. Since 2012