获取 JSON - JavaScript

在 JavaScript 中，获取 JSON 数据是很常见的任务。JSON 格式数据是一个轻量级的数据交换格式，有着良好的可读性和可扩展性，在 Web 开发中被广泛应用。

从服务器获取 JSON

在前端开发中，我们通常需要从服务器中获取 JSON 数据。可以使用 XMLHttpRequest 对象发送 HTTP 请求并接收服务器返回的 JSON 数据。

以下是一个获取 JSON 数据的示例：

const xhr = new XMLHttpRequest();
const url = 'https://example.com/data.json';

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const json = JSON.parse(xhr.responseText);
    console.log(json);
  }
};

xhr.open('GET', url);
xhr.send();

这段代码会向 https://example.com/data.json 发送一个 GET 请求，当返回状态码为 200 时，通过 JSON.parse() 方法将服务器返回的 JSON 字符串转换成 JavaScript 对象。

从本地文件获取 JSON

有时候我们需要从本地文件中获取 JSON 数据。可以使用 fetch() 方法获取本地文件中的 JSON 数据。

以下是一个获取本地 JSON 数据的示例：

fetch('data.json')
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(error => console.error(error));

这段代码会从同级目录下的 data.json 文件中获取 JSON 数据，并将其转换成 JavaScript 对象。

JSONP

JSONP 是一种跨域数据交换方法，允许在不受限制的情况下从两个不同域之间传递 JSON 数据。JSONP 基于动态脚本元素的概念，通过在 script 标签中加载 JSON 数据，在跨域请求时绕过浏览器的同源策略。

以下是一个使用 JSONP 获取 JSON 的示例：

function handleJson(json) {
  console.log(json);
}

const script = document.createElement('script');
script.src = 'https://example.com/data.json?callback=handleJson';
document.body.appendChild(script);

这段代码将在页面中添加一个脚本标签，并将其源文件指向 https://example.com/data.json，通过在 URL 中添加 callback 参数，使用 handleJson() 函数处理 JSON 数据。

以上是获取 JSON 数据的常见方法，根据具体需求选择合适的方法将会提高开发效率和代码性能。