자바 스크립트 - Ajax를 활용한 강남구 도서관 정보(json) 불러오기 예제

[예제 내용 소개]
Ajax를 활용하여 강남구 도서관 정보(json)을 불러오고 표로 출력하는 예제입니다.

<!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(){ // btnOk 버튼에 리스너 장착 . onclick하면 function 동작
          startXhr(); //function명은 startXhr
     }
}
var xhr;
function startXhr(){
     xhr = new XMLHttpRequest(); // xhr은 XMLHttpRequest 객체(http를 통해 데이터를 받음)
     xhr.open("get", "http://openapi.seoul.go.kr:8088/sample/json/SeoulLibraryTime/1/5/", true); // 강남구 json 데이터를 을 비동기 방식  / get 방식으로 읽어들임
     xhr.onreadystatechange = function(){
          if(xhr.readyState == 4){ // 통신 상태가 4 = 양호 확인
              if(xhr.status ==200){ //status 가 200일 경우 아래 process; 로 진행
                   process(); // 프로세스를 부르겠다는 의미 >> 아래 function process로 진행
              }else{
                   alert("요청 실패:" + xhr.status); // if의 내용이 실패시 요청 실패 : 오류 메시지 출력
              }
          }
     }
     xhr.send(null);
}
function process(){ // 프로세스를 부름
     var data = xhr.responseText; // get은 Text 방식으로
     var parseData = JSON.parse(data); //객체화 : 배열 처리
     document.getElementById("libTb").style.display="";//libTb 테이블 숨김 해제
     
     var outputData = parseData.SeoulLibraryTime.row;//코드 간소화를 위한 변수('행')
     //테이블 생성
     for(var i = 0; i < outputData.length ; i++){
          var createTr = document.createElement("tr"); //createTr은 표 행 생성
          document.getElementById("disp").appendChild(createTr); //disp에 appendChild로 createTr 호출
          //번호 출력
          var noTd = document.createElement("td"); //cell 생성
          var textNo = document.createTextNode(i+1); // 1씩 추가해서 번호 생성
          noTd.appendChild(textNo); //textNo으로 noTd에 appendChild
          createTr.appendChild(noTd); // createTr에 noTd(cell 생성)을 appendChild
          //도서관명 출력
          var libNameTd = document.createElement("td"); // libNameTd cell 생성
          var textAr = document.createTextNode(outputData[i].LBRRY_NAME); // LBRRY_NAME(도서관명)을 textAr로 불러오기
          libNameTd.appendChild(textAr); // textAr에 libNameTd를 appendChild
          createTr.appendChild(libNameTd); //createTr에 libNameTd(도서관명 cell)을 appendChild
          //주소 출력
          var addrTd = document.createElement("td"); // addTd cell 생성
          var textAr = document.createTextNode(outputData[i].ADRES); // ADRES(주소)를 textAr로 불러오기
          addrTd.appendChild(textAr); // textAr을 addrTd에 appencChild
          createTr.appendChild(addrTd); //createTr에 addrTd(주소명 cell)을 appendChild
          //전화번호 출력
          var phoneTd = document.createElement("td");  // phoneTd cell 생성
          var textAr = document.createTextNode(outputData[i].TEL_NO); // TEL_NO(전화번호)를 textAr로 불러오기
          phoneTd.appendChild(textAr); // textAr을 addrTd에 appencChild
          createTr.appendChild(phoneTd); //createTr에 phoneTd(전화번호  cell)을 appendChild
     }
}
</script>
</head>
<body>
<button id = "btnOk">JSON</button>
<table class="table table-bordered" style="display:none" id="libTb">   <!-- 평소엔 숨김 / 버튼 클릭시 보임 -->
     <th>
          <td> 도서관</td> <td> 주소</td> <td> 전화</td>
     </th>
     <tbody id="disp">  <!-- 도서관 정보 출력 공간 -->
     </tbody>
</table>
</body>
</html>
[결과 Console ]




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


[ 예제 파일 ]



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




댓글(0)

Designed by CMSFactory.NET