web 11
Obtaining the JSON:
1.首先，我們將把要檢索的JSON的URL存儲在變量中。
2.要創建請求，我們需要使用new關鍵字從XMLHttpRequest構造函數創建一個新的請求對象實例。
3.現在我們需要使用open ( )方法(XMLHttpRequest.open():初始化請求。此方法將從JavaScript代碼中使用；要從本機代碼初始化請求，請改用OpenRequest ( )。)打開一個新的請求。添加以下行:
這至少需要兩個參數——還有其他可選參數。對于這個簡單的例子，我們只需要兩個強制性的例子:
發出網絡請求時使用的HTTP方法。在這種情況下，GET很好，因為我們只是檢索一些簡單的數據。
向其發出請求的URL——這是我們之前存儲的JSON文件的URL。
4 .接下來，添加以下兩行——在這里，我們將responsetType設置為JSON，這樣XHR就知道服務器將返回JSON，并且這應該在幕后轉換為JavaScript對象。
5 .本節的最后一部分涉及等待服務器返回響應，然后處理它。
代碼如下：
<script>
2 var header = document.querySelector('header');
3 var section = document.querySelector('section');
4 var requestURL = 'https://raw.githubusercontent.com/Bulalalala-Ly/package/master/yinshi-json/1.json';
5 var request = new XMLHttpRequest();
6 request.open('GET', requestURL);
7 request.responseType = 'text';
8 request.send();
9 request.onload = function() {
10 var ownText = request.response;
11 var own = JSON.parse(ownText);
12 populateHeader(own);
13 showHeroes(own);
14 }
15 function populateHeader(jsonObj) {
16 var myH1 = document.createElement('h1');
17 myH1.textContent = jsonObj['Name'];
18 header.appendChild(myH1);
19 var myPara = document.createElement('p');
20 myPara.textContent = '導演 : ' + jsonObj['Director'] + ' / 首播時間: ' + jsonObj['formed'];
21 header.appendChild(myPara);
22 }
23 function showHeroes(jsonObj) {
24 var heroes = jsonObj['members'];
25
26 for (var i = 0; i < heroes.length; i++) {
27 var myArticle = document.createElement('article');
28 var myH2 = document.createElement('h2');
29 var myPara1 = document.createElement('p');
30 var myPara2 = document.createElement('p');
31 var myPara3 = document.createElement('p');
32 var myList = document.createElement('ul');
33
34 myH2.textContent = heroes[i].name;
35 myPara1.textContent = '簡介 : ' + heroes[i].introduction;
36 myPara2.textContent = '出生日期: ' + heroes[i].birth;
37 myPara3.textContent = '代表作品 :';
38
39 var superPowers = heroes[i].masterworks;
40 for (var j = 0; j < superPowers.length; j++) {
41 var listItem = document.createElement('li');
42 listItem.textContent = superPowers[j];
43 myList.appendChild(listItem);
44 }
45
46 myArticle.appendChild(myH2);
47 myArticle.appendChild(myPara1);
48 myArticle.appendChild(myPara2);
49 myArticle.appendChild(myPara3);
50 myArticle.appendChild(myList);
51
52 section.appendChild(myArticle);
53 }
54 }
55 </script>
a JSON file base on own website：
代碼如下：
{
"Name" : "劇名",
"Director" : "導演名",
"formed" : 播出年份,
"introduction" : "簡介",
"active" : true,
"members" : [
{
"name" : "演員名",
"birth" : "出生年月",
"introduction" : "個人簡介",
"masterworks" : [
"“代表作品名”",
"“代表作品名”",
"“代表作品名”"
]
},
{
"name" : "演員名",
"birth" : "出生年月",
"introduction" : "個人簡介",
"masterworks" : [
"“代表作品名”",
"“代表作品名”",
"“代表作品名”"
]
},
{
"name" : "演員名",
"birth" : "出生年月",
"introduction" : "個人簡介",
"masterworks" : [
"“代表作品名”",
"“代表作品名”",
"“代表作品名”"
]
}
]
}
浙公網安備 33010602011771號