11 week blog

時間 2019-11-15

標籤 week blog 简体版

原文原文鏈接

Obtaining the JSON:git

1.首先，咱們將把要檢索的JSON的URL存儲在變量中。github

2.要建立請求，咱們須要使用new關鍵字從XMLHttpRequest構造函數建立一個新的請求對象實例。web

3.如今咱們須要使用open ( )方法(XMLHttpRequest.open():初始化請求。此方法將從JavaScript代碼中使用；要從本機代碼初始化請求，請改用OpenRequest ( )。)打開一個新的請求。添加如下行:json

這至少須要兩個參數——還有其餘可選參數。對於這個簡單的例子，咱們只須要兩個強制性的例子:服務器

發出網絡請求時使用的HTTP方法。在這種狀況下，GET很好，由於咱們只是檢索一些簡單的數據。網絡

向其發出請求的URL——這是咱們以前存儲的JSON文件的URL。app

4 .接下來，添加如下兩行——在這裏，咱們將responsetType設置爲JSON，這樣XHR就知道服務器將返回JSON，而且這應該在幕後轉換爲JavaScript對象。dom

5 .本節的最後一部分涉及等待服務器返回響應，而後處理它。函數

代碼以下：spa

 1     <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>