-
[Web Building] 7. Web Http - 웹 페이지 제작 강좌Web/Web Building 2015. 6. 12. 14:38
Web Building - Fetching Data with Http
1. What We Will Do
이번 장에서:- Http를 이용한 서버로부터의 데이터 인출(fetch)을 해보겠습니다.2. The Data
아래 주소에서 PHP server에 의한 데이터가 제공됩니다.* 파일은 JSON 형식입니다.3. Change the Customers Page to use Http
demoweb 폴더에서, customers.html을 수정합니다.123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354<!DOCTYPE html><html><head><meta charset="utf-8"/><title>Customers</title><link href="site.css" rel="stylesheet"></head><body><nav id="nav01"></nav><div id="main"><h1>Customers</h1><div id="id01"></div><footer id="foot01"></footer></div><script src="script.js"></script><script>var xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function() {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {myFunction(xmlhttp.responseText);}}xmlhttp.open("GET", url, true);xmlhttp.send();function myFunction(response) {var obj = JSON.parse(response);var arr = obj.records;var i;var out = "<table><tr><th>Name</th><th>City</th><th>Country</th></tr>";for(i = 0; i < arr.length; i++) {out += "<tr><td>" +arr[i].Name +"</td><td>" +arr[i].City +"</td><td>" +arr[i].Country +"</td></tr>";}out += "</table>"document.getElementById("id01").innerHTML = out;}</script></body></html>cs 위 예제는 데이터가 포함된 주소에서 데이터를 Http 형식으로 받아와 가공하여 이전의 데이터 페이지와 같이 출력해주는 예제입니다.* W3School을 통해 제작된 강좌입니다.'Web > Web Building' 카테고리의 다른 글
[Web Building] 한국 웹 브라우저 점유율 (0) 2015.11.24 [Web Building] 9. Web DaaS - 웹 페이지 제작 강좌 (0) 2015.06.12 [Web Building] 8. Web AppML - 웹 페이지 제작 강좌 (0) 2015.06.12 [Web Building] 6. Web Navigation - 웹 페이지 제작 강좌 (0) 2015.06.12 [Web Building] 5. Web Data Page - 웹 페이지 제작 강좌 (0) 2015.06.12 [Web Building] 4. Web JavaScript - 웹 페이지 제작 강좌 (0) 2015.06.12
