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" : [

"“代表作品名”",

"“代表作品名”"

　　]

}

]

}

巴特西

web 11

最新文章

热门文章