11 week blog
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 .本节的最后一部分涉及等待服务器返回响应，然后处理它。
代码如下：
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>
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" : [
"“代表作品名”",
"“代表作品名”",
"“代表作品名”"
]
}
]
}
