. http로 가져 오는 데이터 :에서 처음 부 VI 웹 사이트를 구축.
우리는 무엇을 할 것 인
우리는 것이 장의 내용 :
- 사용하여 서버의 HTTP에서 데이터를 가져 오기
자료
다음의 데이터는 PHP 서버에 의해 제공 될 수있다 :
http://www.w3ii.com/website/customers.html
{
"records": [
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbkop",
"City"
: "Lulea",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial
Moctezuma",
"City" : "Mexico D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galeria del gastronomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island
Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "Koniglich
Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" :
"North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris specialites",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "Kobenhavn",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" :
"Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "Denmark"
},
{
"Name" : "Wolski
Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]
} | 이 파일은 상술 JSON 형식이다. |
|---|
HTTP를 사용하는 고객 페이지 변경
demoweb 폴더에서 파일 customers.html 사용을 변경합니다.
파일 내부에 다음 코드를 입력 :
customers.html 사용
<!DOCTYPE html>
<html>
<head>
<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();
var url = "http://www.w3ii.com/website/customers.html";
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>
»그것을 자신을 시도자세히보기
우리의 JSON에 대해 자세히 알아보기 JSON 자습서 .