数据共享无难事，XMLHttpRequest + JSON Server 轻松搞定

2023-12-22 14:51:59

简介

XMLHttpRequest（以下简称XHR）是一个在客户端和服务器之间发送 HTTP 请求的 JavaScript API。它可以用来从服务器端获取数据，也可以用来向服务器端发送数据。

JSON Server 是一个轻量级的 Node.js 库，它可以帮助我们快速搭建一个 RESTful API。我们可以使用 JSON Server 来模拟一个服务器端，以便我们进行前端开发。

使用 XHR 和 JSON Server 构建 SPA

搭建 JSON Server

首先，我们需要安装 JSON Server。我们可以使用以下命令进行安装：

npm install -g json-server

安装完成后，我们可以使用以下命令启动 JSON Server：

json-server --port 3000 --watch db.json

这个命令将启动一个 JSON Server 实例，它将在端口 3000 上监听 HTTP 请求。同时，它还会监视 db.json 文件，如果该文件发生变化，JSON Server 将自动重新加载数据。

编写前端代码

接下来，我们需要编写前端代码。首先，我们需要创建一个 HTML 文件，并在其中包含以下代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>数据共享无难事</h1>
  <ul id="data-list"></ul>

  <script src="script.js"></script>
</body>
</html>

然后，我们需要创建一个 script.js 文件，并在其中包含以下代码：

const xhr = new XMLHttpRequest();

xhr.open('GET', 'http://localhost:3000/data');

xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);

    const dataList = document.getElementById('data-list');

    for (const item of data) {
      const li = document.createElement('li');
      li.textContent = item.name;

      dataList.appendChild(li);
    }
  } else {
    console.error('请求失败');
  }
};

xhr.send();