Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

moozi

Ajax 본문

TIS_2016/HTML5_1기

Ajax

moozi 2016. 4. 8. 11:53

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

<div id="albumList"></div>

 
<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="";
        var title=xmlDoc.getElementsByTagName("TITLE");
        var artist=xmlDoc.getElementsByTagName("ARTIST");
        for (i = 0; i < title.length; i++) {
//          list = list + "<h1>"+title[i].childNodes[0].nodeValue + "</h1>";
//          list = list + "<h2>"+artist[i].childNodes[0].nodeValue + "</h2>";
          list += "<h1>"+title[i].childNodes[0].nodeValue + "</h1>";
          list += "<h2>"+artist[i].childNodes[0].nodeValue + "</h2>";
        }
        document.getElementById("albumList").innerHTML = list;
    }     
  };
  xhttp.open("GET", "cd_catalog.xml", true);
  xhttp.send();
}
</script>

</body>
</html>

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

ajax예제파일  (0) 2016.04.08
ajax02  (0) 2016.04.08
jquery 연습문제 1 ~ 5 풀이  (0) 2016.04.08
svg예제파일  (0) 2016.04.07
자바스크립트 연습문제 풀이 1 ~ 16  (0) 2016.04.07
'TIS_2016/HTML5_1기' Related Articles more
Comments