자바 스크립트 - 날씨 정보(xml) 불러오기 예제

[예제 내용 소개]
XML 파일을 호출해서 출력하는 예제입니다.
기상청 xml 파일을 긁어온 xml 파일이 첨부되어 있습니다.
동일 경로 상에 2개의 파일을 위치시키면 됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
     window.onload = function() {
          document.getElementById("btnOk").onclick = function() {
              startXHR(); //function startXHR로 이동
          }
     }
     var xhr;
     function createXHR() {
          if (window.ActiveXObject) {
              xhr = new ActiveXObject("Msxml2.XMLHTTP");
          } else {
              xhr = new XMLHttpRequest(); // xhr을 얻음
          }
     }
     function startXHR() {
          createXHR();
          xhr.open("get", "weather.xml", true); //weather.xml 호출
          xhr.onreadystatechange = function() {
              if (xhr.readyState == 4) {
                   if (xhr.status == 200) {
                        process();
                   }
              }
          }
          xhr.send(null);
     }
     function process() { // xml 업데이트 시점 불러오기
          var data = xhr.responseXML;
          var weatherNode = data.getElementsByTagName("weather")[0];
          var strDate = weatherNode.getAttribute("year") + "년 "
                   + weatherNode.getAttribute("month") + "월 "
                   + weatherNode.getAttribute("day") + "일 "
                   + weatherNode.getAttribute("hour") + "시";
          document.getElementById("disp").innerHTML = strDate; // disp 레이어에 집어넣음
          var localNode = data.getElementsByTagName("local");
          //날씨 출력방법1 - HTML DOM을 쓰는 방식
          for (var i = 0; i < localNode.length; i++) {
              var row = document.createElement("tr"); // tr 생성
              var col1 = document.createElement("td"); // td 생성
              var col2 = document.createElement("td"); // td 생성
              var loc = localNode[i].childNodes[0].nodeValue;
              var ta = localNode[i].getAttribute("ta");
               col1.appendChild(document.createTextNode(loc)); //appendchild로 넣음
               col2.appendChild(document.createTextNode(ta)); //appendchild로 넣음
              row.appendChild(col1);
              row.appendChild(col2);
               document.getElementById("myTbody").appendChild(row); // 테이블을 만들어서 row에 appendchild로 넣음
          }
          //날씨 출력방법1 - innerHTML을 쓴 방식
          var ss = "<table>";
          for (var i = 0; i < localNode.length; i++) {
              ss += "<tr>";
              ss += "<td>" + localNode[i].childNodes[0].nodeValue + "</td>";
              ss += "<td>" + localNode[i].getAttribute("ta") + "</td>";
              ss += "</tr>";
          }
          ss += "</table>";
          document.getElementById("disp2").innerHTML = ss;
     }
</script>
</head>
<body>
     <input type="button" value="온도 확인" id="btnOk"> <!-- 온도 확인 버튼 -->
     <div id="disp"></div> <!-- disp 레이어 - HTML DOM을 쓰기 위함 -->
     <table id="myTable"> <!-- 표 지정 -->
          <tbody id="myTbody"></tbody>
     </table>
     <hr>
     <div id="disp2"></div> <!-- disp2 레이어 - innerHTML을 쓰기 위함 -->
</body>
</html>

[결과 Console ]



[사용 환경] 
OS : Windows 7
IDE : Eclipse Oxygen
JAVA : JDK 9


[ 예제 파일 ]



본 포스팅은 IT 교육기관인 KIC 캠퍼스에서 공부하며 작성한 리포트입니다.
혹시 잘못된 내용이 있거나 문제 소지시 댓글 남겨주시면 조치하겠습니다.



댓글(0)

Designed by CMSFactory.NET