代码如下-----xmlhttprequest.responseJSON：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>星座</title> 6 <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet"> 7 <link rel="stylesheet" type="text/css" href="css/cons.css"> 8 </head> 9 <body> 10 11 <header > 12 </header><!-- /header --> 13 <section> 14 </section> 15 <script src="js/cons.js" > 16 </script> 17 </body> 18 </html>
1 var header = document.querySelector('header'); 2 var section = document.querySelector('section'); 3 4 var requestURL = 'https://raw.githubusercontent.com/KylinBio-healthTechnology/-constellations/master/constellations.json'; 5 var request = new XMLHttpRequest(); 6 request.open('GET', requestURL); 7 request.responseType = 'json'; 8 request.send(); 9 10 request.onload = function() { 11 var constellations = request.response; 12 //var constellations = JSON.parse(constellationsText); 13 populateHeader(constellations); 14 showcon(constellations); 15 } 16 17 18 function populateHeader(jsonObj) { 19 var myH1 = document.createElement('h1'); 20 myH1.textContent = jsonObj['mainname']; 21 header.appendChild(myH1); 22 23 var myPara = document.createElement('p'); 24 myPara.textContent = '//Year: ' + jsonObj['formed']; 25 header.appendChild(myPara); 26 } 27 28 function showcon(jsonObj) { 29 var con = jsonObj['members']; 30 31 for (var i = 0; i < con.length; i++) 32 { var myArticle = document.createElement('article'); 33 var myH2 = document.createElement('h2'); 34 var myPara1 = document.createElement('p'); 35 var myPara2 = document.createElement('p'); 36 var myPara3 = document.createElement('p'); 37 var myPara4 = document.createElement('p'); 38 var myPara5 = document.createElement('p'); 39 var myPara6 = document.createElement('p'); 40 var myList = document.createElement('ul'); 41 42 myH2.textContent = con[i].name; 43 myPara1.textContent = 'English: ' + con[i].English; 44 myPara2.textContent = 'time: ' + con[i].time; 45 myPara3.textContent = 'alias: ' + con[i].alias; 46 myPara4.textContent = 'symble: ' + con[i].symble; 47 myPara5.textContent = 'planet: ' + con[i].planet; 48 myPara6.textContent = 'flower:'; 49 50 51 var cons = con[i].flower; 52 for (var j = 0; j < cons.length; j++) { 53 var listItem = document.createElement('li'); 54 listItem.textContent = cons[j]; 55 myList.appendChild(listItem); 56 } 57 58 myArticle.appendChild(myH2); 59 myArticle.appendChild(myPara1); 60 myArticle.appendChild(myPara2); 61 myArticle.appendChild(myPara3); 62 myArticle.appendChild(myPara4); 63 myArticle.appendChild(myPara5); 64 myArticle.appendChild(myPara6); 65 myArticle.appendChild(myList); 66 67 section.appendChild(myArticle); 68 } 69 }
json文件：
https://raw.githubusercontent.com/KylinBio-healthTechnology/-constellations/master/constellations.json