JavaScript读取JS文件的JSON
在使用JavaScript进行开发时，经常会遇到需要读取外部的JSON文件的情况。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端数据的传递。本文将介绍如何使用JavaScript读取JS文件中的JSON数据，并提供相应的代码示例。
什么是JSON？
JSON是一种用于保存和传输数据的格式，它基于JavaScript的一个子集。JSON使用键值对的方式组织数据，其中键是唯一的，并且必须是字符串类型，值可以是任意的有效的JSON类型，例如字符串、数字、布尔值、数组、对象等。
JSON的优点是简洁易读，而且可以被多种编程语言解析和生成。在JavaScript中，可以使用JSON.parse()方法将JSON字符串解析为JavaScript对象，使用JSON.stringify()方法将JavaScript对象转换为JSON字符串。
读取JS文件中的JSON数据
假设我们有一个名为data.js的JavaScript文件，其中包含一个JSON对象：
// data.js
var data = {
"name": "John",
"age": 30,
"city": "New York"
};
要读取这个JSON对象，可以在HTML文件中使用<script>标签将data.js引入，然后在JavaScript代码中访问data变量：
<!DOCTYPE html>
<html>
<body>
<script src="data.js"></script>
<script>
console.log(data.name); // 输出 "John"
console.log(data.age); // 输出 30
console.log(data.city); // 输出 "New York"
</script>
</body>
</html>
上述代码片段中，我们通过<script src="data.js"></script>将data.js文件引入到HTML页面中。这样一来，变量data就可以在后续的JavaScript代码中被访问到了。通过data.name、data.age和data.city，我们可以分别获取到JSON对象中的姓名、年龄和城市属性。
读取外部的JSON文件
如果JSON数据存储在一个外部的文件中，我们可以使用XMLHttpRequest对象来读取该文件。通过发送一个GET请求，我们可以获取到JSON文件的内容，并将其解析为JavaScript对象。
下面是一个使用XMLHttpRequest读取JSON文件的代码示例：
var xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log(data.name); // 输出 "John"
console.log(data.age); // 输出 30
console.log(data.city); // 输出 "New York"
}
};
xhr.send();
在上述代码中，我们使用XMLHttpRequest()构造函数创建了一个XMLHttpRequest对象，并通过open()方法指定了请求的类型、URL和异步标志。然后，我们设置了onreadystatechange事件处理程序，当请求状态发生改变时，该处理程序将被触发。
在onreadystatechange事件处理程序中，我们首先检查请求的状态是否为4（即请求已完成），并且HTTP状态码是否为200（即成功）。如果满足这两个条件，我们使用JSON.parse()方法将响应的文本内容解析为JavaScript对象，并可以在console.log()中输出获取到的JSON数据。
总结
本文介绍了如何使用JavaScript读取JS文件中的JSON数据。我们可以通过引入JS文件或使用XMLHttpRequest来获取JSON数据，并将其解析为JavaScript对象。这样一来，我们可以在JavaScript代码中方便地访问和操作JSON数据。
使用JavaScript读取JS文件的JSON数据是Web开发中的常见需求，特别是在与后端进行数据交互时。通过掌握这一技巧，我们可以更加灵活地处理JSON数据，提高开发效率。
| 词汇表 | 释义 |
|---|---|
| JSON | 一种用于保存和传输数据的格式，基于JavaScript的一个子集 |
| 键值对 | JSON中数据的基本组织方式，由键和值组成，键是唯一的，值可以是任意的JSON类型 |
| JSON.parse() | 将JSON字符串解析为JavaScript对象的 |
