给网站写一个JSON，并远程请求。

news/2024/5/10 0:49:45/文章来源:https://blog.csdn.net/weixin_30781775/article/details/96669294

在使用json之前我们应该先了解一下什么是json？

json全称JavaScript Object Notation，即js对象简谱，是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。。

JSON可以作为一个对象或者字符串存在，前者用于解读 JSON 中的数据，后者用于通过网络传输 JSON 数据。这不是一个大事件——JavaScript 提供一个全局的可访问的 JSON 对象来对这两种数据进行转换。

这一点也让人注意到json并不仅限于js环境。

为了加载对象进入js程序，这个对象应包括属性名和数组索引，

先看mdn上的一个对于访问json对象的ex;

superHeroes["members"][1]["powers"][2]

首先我们有变量名 superHeroes，储存对象。
在对象中我们想访问 members 属性，所以我们使用 ["members"]。
members 包含有对象数组，我们想要访问第二个元素，所以我们使用[1]。
在对象内，我们想访问 powers 属性，所以我们使用 ["powers"]。
powers 属性是一个包含英雄技能的数组。我们想要第三个，所以我们使用[2]。

注意：

JSON 是一种纯数据格式，它只包含属性，没有方法。
JSON 要求有两头的 { } 来使其合法。最安全的写法是有两边的括号，而不是一边。
甚至一个错位的逗号或分号就可以导致 JSON 文件出错。您应该小心的检查您想使用的数据(虽然计算机生成的 JSON 很少出错，只要生成程序正常工作)。您可以通过像 JSONLint 的应用程序来检验 JSON。
JSON 可以将任何标准合法的 JSON 数据格式化保存，不只是数组和对象。比如，一个单一的字符串或者数字可以是合法的 JSON 对象。虽然不是特别有用处……
不像 JavaScript 标识符可以用作属性，在 JSON 中，只有字符串才能用作属性。

做一个自己网页的json demo：

1.首先在html中添加一个标签

</div>

用于之后添加数据。

2.此时你应该想好这个标签里应该添加什么数据，把数据写入json中，我这儿就把写好的json对象写好，为方便之后的远程请求

就把它上传到github托管上，带服务器的也可以放在服务器上面。https://ceneasy.github.io/test/test.json

将文件传上github的教程，我之后我会写一篇博客详细解说。

{"squadName" : "2018年加密货币展望：将再疯狂一年","homeTown" : "各种空气币横出，币市动荡，政府严加查管代币非法集资，加密货币的未来何去何从？","third": "试试你能认出下面哪些虚拟币(滑稽.jpg)"
}

2.js程序

var header = document.getElementById("say");

定义一个变量获取id名为"say"的标签

加载json

这里使用这个名为XMLHTTPRequest的api用于远程请求

定义一个变量为即将访问的url

var requestURL = 'https://ceneasy.github.io/test/test.json';

再定义一个http请求对象

var request = new XMLHttpRequest();

现在我们需要使用 open() 函数打开一个新的请求

request.open('GET', requestURL);

这个函数至少含有两个参数，其它的是可选参数。对于示例我们只需要两个强制参数

HTTP 方法，网络连接时使用。这个示例中 GET 就可以了，因为我们只要获得简单的数据。
URL，用于指向请求的地址。我们使用之前保存的变量。

接下来，添加，两行代码，我们设定 responseType 为 JSON，所以服务器将知道我们想要返回一个 JSON 对象，然后发送请求 :

request.responseType = 'json';
request.send();


最后一点内容涉及相应来自服务器的返回数据，然后处理它，添加如下代码在您先前的代码下方：

request.onload = function() { var superHeroes = request.response; populateHeader(superHeroes); //调用填充数据的方法 }
接下来就是填充数据

function populateHeader(jsonObj) {
var myH1 = document.createElement('h2'); //定义创建标签的变量
myH1.setAttribute("class","as")
myH1.textContent = jsonObj['squadName']; //填充内容进新标签中
header.appendChild(myH1); //将新标签填入老标签中
var myH2 = document.createElement('p');
myH2.setAttribute("class","as")
myH2.textContent = jsonObj['homeTown'];
header.appendChild(myH2);
var myH3 = document.createElement('p');
myH3.setAttribute("class","as")
myH3.textContent = jsonObj['third'];
header.appendChild(myH3);

}

这也就是我们json渲染出来的效果，另外注意一点，你可以用css定义数据标签的样式。