在特定路由上提供 JSON - Javascript

在 Web 开发中，很常见的一种需求就是在特定的路由上提供 JSON 数据。这个需求可以通过各种编程语言或框架来实现，但是本文将着重介绍如何在 Javascript 中实现。

1. 使用 Node.js

在使用 Node.js 开发 Web 应用时，我们通常会使用 Express 框架来简化开发。使用 Express 提供 JSON 数据很简单，只需要在路由中使用 res.json() 方法即可。示例如下：

const express = require('express');
const app = express();

app.get('/api/data', (req, res) => {
  const data = { name: 'John', age: 30 };
  res.json(data);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

上面的代码通过 Express 在 /api/data 路由上提供了一个 JSON 数据，这里的 res.json(data) 方法会将传入的 data 对象转换成 JSON 字符串，并设置响应头中的 Content-Type 为 application/json。

2. 使用浏览器端 Javascript

在浏览器端 Javascript 中提供 JSON 数据则需要用到 XMLHttpRequest 对象来发起 AJAX 请求，并将响应数据以 JSON 格式解析。示例如下：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.onreadystatechange = () => {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

上面的代码通过发起 GET 请求获取 /api/data 路由上的 JSON 数据，并将响应数据以 JSON 格式解析输出到控制台中。

3. 跨域请求

在前后端分离的项目中，我们常常需要在不同的域名或端口之间进行 AJAX 请求。此时需要处理跨域请求，否则浏览器会阻止跨域请求的发送，导致请求失败。通常处理跨域请求的方式有两种：JSONP 和 CORS。这里以 CORS 方式为例，示例代码如下：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/data');
xhr.withCredentials = true;
xhr.onreadystatechange = () => {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

上面的代码通过设置 withCredentials 属性为 true 来启用 CORS，以解决跨域请求的问题。

总结

在很多应用场景中，我们需要在特定的路由上提供 JSON 数据。在 Node.js 中使用 Express 可以很方便地实现这个需求，而在浏览器端 Javascript 中则需要用到 AJAX 请求和 JSON 解析来向特定的路由获取数据。对于跨域请求，我们可以通过 JSONP 或 CORS 方式解决。