JavaScript 从 URL 获取 JSON 文件

在前端开发中，经常需要从服务器中获取JSON文件来处理数据。本文将介绍如何使用JavaScript从URL获取JSON文件。

1. XMLHttpRequest

XMLHttpRequest是一个可以在JavaScript中创建HTTP请求的API。它可以用于获取服务器上的JSON文件。以下是一个示例代码片段：

let xhr = new XMLHttpRequest();
xhr.open("GET", "path/to/json/file.json", true);
xhr.onload = function() {
  if (xhr.status === 200) {
    let data = JSON.parse(xhr.responseText);
    // 处理获取的JSON数据
  }
};
xhr.send();

在上述代码片段中，我们创建了一个XMLHttpRequest实例，使用open()方法打开了一个GET请求。接着设置了onload()方法来处理响应，如果请求的状态码为200，则将响应的JSON数据传入JSON.parse()方法来转换为JavaScript对象。

注意：在使用XMLHttpRequest时，需要确保JSON文件和请求代码在同一个域中，否则会触发跨域请求，导致请求失败。

2. Fetch API

Fetch API是一个现代的API，它可以用于在JavaScript中获取资源，包括JSON文件。以下是一个示例代码片段：

fetch("path/to/json/file.json")
  .then(response => response.json())
  .then(data => {
    // 处理获取的JSON数据
  });

在上述代码片段中，我们使用fetch()函数来发送GET请求获取JSON文件。接着使用response.json()方法来将响应转换为JSON对象。最后，我们将获取的JSON对象传入一个then()方法中来处理数据。

Fetch API的一个优点是支持Promise，可以更方便地进行异步处理。

3. jQuery

如果你已经在项目中使用了jQuery，可以使用其中的$.getJSON()方法来获取JSON文件。以下是一个示例代码片段：

$.getJSON("path/to/json/file.json", function(data) {
  // 处理获取的JSON数据
});

在上述代码片段中，我们使用了jQuery的$.getJSON()方法来获取JSON文件。接着将获取的JSON对象传递给一个回调函数来处理数据。

结论

以上是三种获取JSON文件的方法。XMLHttpRequest和Fetch API比较适合更复杂的场景，可以手动处理响应和调整请求参数。但是如果你的项目中已经使用了jQuery，那么直接使用它的API会更加方便。

参考文献

• MDN Web Docs: XMLHttpRequest
• MDN Web Docs: Fetch API
• jQuery: $.getJSON()