js如何引入json

JavaScript 中引入 JSON 数据的几种常用方法**

在 Web 开发中，JSON（JavaScript Object Notation）因其轻量级、易读、易解析的特性，成为了数据交换的主流格式之一，JavaScript 作为前端开发的核心语言，经常需要处理和引入 JSON 数据，本文将详细介绍在 JavaScript 中引入 JSON 数据的几种常用方法，并分析其适用场景。

直接内联 JSON 数据

最简单直接的方式是在 JavaScript 代码中直接内联 JSON 数据，这种方式适用于数据量较小、固定不变，且不需要频繁修改的场景。

方法： 将 JSON 对象直接赋值给一个 JavaScript 变量。

示例：

// 直接定义一个 JSON 对象
const user = {
  "id": 1,
  "name": "张三",
  "email": "zhangsan@example.com",
  "isActive": true
};
// 直接使用
console.log(user.name); // 输出: 张三
console.log(user.email); // 输出: zhangsan@example.com

优点：

• 简单直观,无需额外请求。
• 适合小型、静态数据。

缺点：

• 数据硬编码在 JavaScript 中，难以动态更新。
• 如果数据量较大,会影响代码的可读性。
• 不适合需要从服务器获取的数据。

从外部 JSON 文件引入

当数据量较大,或者需要与后端分离、方便管理时，通常会使用外部 JSON 文件，然后通过 JavaScript 的网络请求能力来获取并解析这些数据。

步骤：

1. 创建一个 .json 文件（data.json）。
2. 在 JavaScript 中使用 fetch API（现代浏览器推荐）或 XMLHttpRequest（传统方式）来请求该文件。
3. 解析响应数据（fetch 返回的 JSON 数据需要调用 .json() 方法进一步解析）。

示例 1：使用 fetch API (推荐)

假设有一个 data.json 文件，内容如下：

{
  "city": "北京",
  "weather": "晴",
  "temperature": 25
}

JavaScript 代码：

// 使用 fetch API 获取 JSON 文件
fetch('data.json')
  .then(response => {
    // 检查响应是否成功
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    // 将响应体解析为 JSON
    return response.json();
  })
  .then(data => {
    // 在这里处理获取到的 JSON 数据
    console.log('城市:', data.city);
    console.log('天气:', data.weather);
    console.log('温度:', data.temperature);
  })
  .catch(error => {
    // 处理请求过程中可能出现的错误
    console.error('There was a problem with the fetch operation:', error);
  });

示例 2：使用 XMLHttpRequest (传统方式)

const xhr = new XMLHttpRequest();
// 设置请求方法和URL
xhr.open('GET', 'data.json', true);
// 设置响应类型为 JSON
xhr.responseType = 'json';
// 监听加载完成事件
xhr.onload = function() {
  if (xhr.status === 200) {
    // response 属性已经自动解析为 JavaScript 对象
    const data = xhr.response;
    console.log('城市:', data.city);
    console.log('天气:', data.weather);
    console.log('温度:', data.temperature);
  } else {
    console.error('Error fetching JSON data:', xhr.status);
  }
};
// 监听错误事件
xhr.onerror = function() {
  console.error('Request failed');
};
// 发送请求
xhr.send();

优点：

• 数据与代码分离,便于维护和更新。
• 可以动态获取服务器端的最新数据。
• 适合各种规模的数据,尤其是需要从后端获取的场景。

缺点：

• 涉及异步操作,需要处理回调或 Promise。
• JSON 文件与 JavaScript 文件同源且不受 CORS 限制，直接请求通常没问题；但如果涉及跨域，可能需要服务器配置 CORS。

通过 API 接口引入 JSON

在现代 Web 应用中，更常见的是通过 RESTful API 从服务器获取 JSON 数据，这与从外部 JSON 文件引入类似，但 API 通常提供更动态、更复杂的数据交互，可能涉及请求参数、认证等。

方法： 使用 fetch 或 axios 等 HTTP 客户端库发送请求到 API 端点，获取返回的 JSON 数据。

示例：使用 fetch 调用公共 API

以获取 GitHub 用户信息为例（无需认证的公共 API）：

const username = 'octocat'; // GitHub 用户名
const apiUrl = `https://api.github.com/users/${username}`;
fetch(apiUrl)
  .then(response => {
    if (!response.ok) {
      throw new Error('User not found');
    }
    return response.json();
  })
  .then(data => {
    console.log('用户名:', data.login);
    console.log('公开仓库数:', data.public_repos);
    console.log('粉丝数:', data.followers);
  })
  .catch(error => {
    console.error('Error fetching API data:', error);
  });

使用 axios 库（更简洁，自动处理 JSON 解析）

首先需要安装 axios（npm install axios 或通过 CDN 引入）：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

然后使用：

const username = 'octocat';
const apiUrl = `https://api.github.com/users/${username}`;
axios.get(apiUrl)
  .then(response => {
    // axios 会自动解析 JSON 数据
    const data = response.data;
    console.log('用户名:', data.login);
    console.log('公开仓库数:', data.public_repos);
    console.log('粉丝数:', data.followers);
  })
  .catch(error => {
    console.error('Error fetching API data with axios:', error);
  });

优点：

• 可以获取实时、动态更新的数据。
• 支持复杂的交互逻辑（如认证、请求头、参数等）。
• axios 等库提供了更友好的 API 和错误处理机制。

缺点：

• 依赖网络请求,存在跨域问题（需服务器配置）。
• 需要处理异步逻辑。
• API 可能有限制（如速率限制）。

通过 <script> 标签引入 JSONP (JSON with Padding)

JSONP 是一种较老的跨域数据交互方式，它利用了 <script> 标签可以跨域加载资源的特性。注意：JSONP 只支持 GET 请求，且存在安全隐患（如 XSS 攻击），在现代开发中已较少使用，推荐使用 CORS 方式。

方法：

1. 服务器端支持 JSONP，并返回一个回调函数包裹的 JSON 数据。
2. 前端定义一个回调函数,并通过 <script> 标签的 src 属性指向服务器端 JSONP 接口，接口 URL 中需要包含回调函数名。

示例：

假设服务器 JSONP 接口为 https://example.com/data?callback=handleResponse，返回数据为 handleResponse({"name": "JSONP示例", "value": 123})。

前端代码：

// 定义回调函数
function handleResponse(data) {
  console.log('通过 JSONP 获取的数据:', data);
  console.log('名称:', data.name);
  console.log('值:', data.value);
}
// 创建 script 标签
const script = document.createElement('script');
script.src = 'https://example.com/data?callback=handleResponse';
document.body.appendChild(script);
// 加载完成后移除 script 标签（可选）
script.onload = function() {
  document.body.removeChild(script);
};

优点：

• 解决了跨域问题（在不支持 CORS 的旧环境中）。

缺点：

• 只支持 GET 请求。
• 安全性较低,容易受到 XSS 攻击，需要确保数据源可信。
• 服务器端需要专门支持 JSONP 格式。
• 现代浏览器和服务器通常优先使用 CORS。