AJAX를 통해 JSON 데이터를 받아온다.
<script> var req = new XMLHttpRequest(); req.onreadystatechange = function(){ if( this.readyState == 4 ){ // ... } } req.open("GET", JSON_DATA_URL); req.send(); </script>
JSON.parse API를 이용해 받아온 JSON 문자열 데이터를 Javascript 객체로 변환
<script> req.onreadystatechange = function(){ if( this.readyState == 4 ){ data = JSON.parse(this.response); //... } </script>
데이터를 처리하는 Javascript 프로그램 실행 (HTML 문서에 반영)
-데이터가 여러개인 경우에 (배열 형태로 값을 받은 경우) 반복문으로 각각의 데이터에 대해 돌면서 처리한다.
<script> for( var i = 0 ; i < data.length ; i++ ){ document.write(data[i].id, data[i].msg); } </script><html> <head> <meta charset="utf-8"> <script> var req = new XMLHttpRequest(); req.onreadystatechange = function a() { console.log(this.readyState, this.status); if (this.readyState == 4) { console.log(this.response); var data = JSON.parse(this.response); //JS코드가 실행되면 해당 JSON_data파일이 파싱되면서 객체로 변환한다. for (var i in data) { // 그 DATA 배열을 FOR문으로 돌면서 id와 msg를 읽는다. var t = document.getElementById("template").cloneNode(true); // 클론 노드에 '트루' 인자를 주어서 자식 요소까지 모두 복사한다. t.removeAttribute("id"); // 자식에 있는 주인공과 명대사를 id와 msg로 변경해준다. t.children[0].innerText = data[i].id; t.children[1].innerText = data[i].msg; document.body.appendChild(t); //변경한 id와 msg를 추가해준다. } } } req.open("GET", "./json_data.txt"); req.send(); </script> </head> <body> <p id="template"> <span lass="chr">주인공</span> : <sapn class="word">명대사</sapn> </p> </body> </html>
자기 신뢰의 힘을 믿고 실천하는 개발자가 되고자합니다.