从 URL C# 获取 JSON - JavaScript

在 Web 开发中，经常需要从后端获取 JSON 数据。以下是如何使用 JavaScript 从 URL 获取 JSON 数据并将其解析的介绍。

使用 XMLHttpRequest 对象获取 JSON 数据

在 JavaScript 中，可以使用 XMLHttpRequest (XHR) 对象向服务器请求数据。XHR 对象允许在后台与服务器交换数据，无需刷新页面。

以下是一个从 URL 获取 JSON 数据并解析的示例：

// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 配置请求类型、URL以及是否异步请求
xhr.open('GET', 'http://example.com/data.json', true);

// 设置响应的数据类型为 JSON
xhr.responseType = 'json';

// 当请求完成时调用的回调函数
xhr.onload = function() {
  // 如果响应状态码在 200-299 之间，表示请求成功
  if (xhr.status >= 200 && xhr.status < 300) {
    // 使用响应的 JSON 数据进行处理
    console.log(xhr.response);
  } else {
    // 请求失败的处理
    console.error(xhr.statusText);
  }
};

// 当请求过程中发生错误时调用的回调函数
xhr.onerror = function() {
  console.error('请求配置错误');
};

// 发送异步请求
xhr.send();

使用 jQuery 获取 JSON 数据

jQuery 是一个流行的 JavaScript 库，提供了更简单的方式来获取 JSON 数据。使用 jQuery 可以免去大量的模板代码和与浏览器的兼容性问题。

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

// 使用 jQuery.getJSON() 获取 JSON 数据
$.getJSON('http://example.com/data.json', function(data) {
  // 在响应被解析为 JSON 之后执行的回调函数
  console.log(data);
});

使用 fetch API 获取 JSON 数据

fetch API 是 JavaScript 原生实现的一个现代的网络请求 API。它提供了一种更简洁、更灵活的方式来获取 JSON 数据。

以下是使用 fetch API 获取 JSON 数据的示例：

// 使用 fetch API 获取 JSON 数据
fetch('http://example.com/data.json')
  .then(function(response) {
    // 将响应的数据解析为 JSON，并返回一个 Promise 对象
    return response.json();
  })
  .then(function(data) {
    // 响应的 JSON 数据处理函数
    console.log(data);
  })
  .catch(function(error) {
    // 错误处理函数
    console.error('请求失败', error);
  });

以上是使用 JavaScript 从 URL 获取 JSON 数据的三种不同方式，可以根据实际情况选择一种适合的方式。