下面是详细的攻略：

JS读取JSON的两种常用方法示例介绍

简介

JSON(JavaScript Object Notation)是一种数据交换格式，它具有轻量、易读、易写等特点，并且在前后端分离的开发模式中得到了广泛应用。本篇文章主要介绍JS读取JSON的两种常用方法，以及实际代码示例。

方法一：XMLHttpRequest

XMLHttpRequest对象是AJAX开发中不可或缺的重要组成部分。它能够异步地从服务器请求数据，也可以像同步请求那样通过JavaScript获取数据。下面是XMLHttpRequest读取JSON数据的代码示例：

function loadJSON(callback) {   
  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.open('GET', 'example.json', true); 
  xobj.onreadystatechange = function () {
    if (xobj.readyState == 4 && xobj.status == "200") {
      callback(JSON.parse(xobj.responseText));
    }
  };
  xobj.send(null);
}

这段代码定义了一个名为loadJSON的函数，该函数通过XMLHttpRequest对象的open方法发送一个GET请求，获取example.json文件中的JSON数据。当XMLHttpRequest的readyState为4，且状态码为200时，将执行callback函数并将JSON数据作为参数传递进去。最后，调用send方法将请求发送到服务器。

方法二：fetch

fetch是一种新的web API，旨在代替XMLHttpRequest。它提供了一种简单、清晰的方式来发送和接收网络请求。下面是fetch读取JSON数据的代码示例：

fetch('example.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(json) {
    console.log('JSON数据读取成功：' + JSON.stringify(json));
  })
  .catch(function(error) {
    console.log('读取JSON数据时发生错误：' + error);
  });

这段代码使用fetch函数发起一个GET请求。使用response.json()方法解析响应的JSON数据。如果读取成功，将在回调函数中输出解析后的JSON数据；如果读取失败，将在catch方法中输出错误信息。

实例说明

假设我们有一个example.json文件，包含以下JSON数据：

{
  "name": "Tom",
  "age": "22",
  "height": "180cm"
}

我们可以使用上述两种方法读取example.json文件中的JSON数据，并将数据输出到控制台中，代码示例如下：

// 通过XMLHttpRequest读取JSON数据
loadJSON(function(json) {
  console.log('JSON数据读取成功：' + JSON.stringify(json));
});

// 通过fetch读取JSON数据
fetch('example.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(json) {
    console.log('JSON数据读取成功：' + JSON.stringify(json));
  })
  .catch(function(error) {
    console.log('读取JSON数据时发生错误：' + error);
  });

在上述代码中，我们分别使用了loadJSON函数和fetch方法读取example.json文件中的JSON数据，并在控制台中输出了读取结果。可以通过浏览器的开发者工具查看输出结果。

以上是JS读取JSON的两种常用方法示例介绍的完整攻略，希望可以帮助您更好地了解如何读取JSON数据。

本文链接：http://task.lmcjl.com/news/12002.html