Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

moozi

ajax02 본문

TIS_2016/HTML5_1기

ajax02

moozi 2016. 4. 8. 14:02

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ajax</title>
    <style type="text/css">
        h1{ color:blue;}
        h2{ color:red;}
    </style>  
</head>
<body>

<h2>My CD Collection:</h2>

<button type="button" onclick="loadDoc()">클릭</button>

<table id="albumList" border="1"></table>

 
<script>
function loadDoc() {
  var xhttp, xmlDoc, txt, x, i;
  xhttp = new XMLHttpRequest();//Ajax를 처리하기 위한 객체
  //처리가 끝나고 변경할 준비가 다되면 실행됨.   
  xhttp.onreadystatechange = function() {
  //처리상태가 정상인지 체크
  if (xhttp.readyState == 4 && xhttp.status == 200) {
        xmlDoc = xhttp.responseXML;//xml결과를 xmlDoc에 저장
        var list="<tr><td>타이틀</td><td>아티스트</td></tr>";
        var title=xmlDoc.getElementsByTagName("TITLE");
        var artist=xmlDoc.getElementsByTagName("ARTIST");
        for (i = 0; i < title.length; i++) {

          list += "<tr><td>"+title[i].childNodes[0].nodeValue + "</td>";
          list += "<td>"+artist[i].childNodes[0].nodeValue + "</td></tr>";
        }
        document.getElementById("albumList").innerHTML = list;
    }     
  };
  xhttp.open("GET", "cd_catalog.xml", true);
  xhttp.send();
}
</script>

</body>
</html>

'TIS_2016 > HTML5_1기' 카테고리의 다른 글

프로젝트(3차포폴) 조편성  (14) 2016.04.11
ajax예제파일  (0) 2016.04.08
Ajax  (0) 2016.04.08
jquery 연습문제 1 ~ 5 풀이  (0) 2016.04.08
svg예제파일  (0) 2016.04.07
'TIS_2016/HTML5_1기' Related Articles more
Comments