作业疑问：是否需额外创建Node.js服务器处理AJAX请求？

嘿 Connor！你的理解方向是对的，这里分两种情况来判断：

• 如果你的作业里已经给出了现成的Node.js服务器接口地址（比如老师提供了类似 http://localhost:3000/api/top10 的测试地址），那你完全不用自己额外搭建服务器——只需要写前端的原生AJAX代码，请求这个接口拿到数据，再渲染成有序列表就行。

• 如果作业里没有提供任何现成接口，也没说可以调用第三方公开API，那这个要求其实就是让你自己搭建一个简单的Node.js服务器。毕竟AJAX需要有后端接口返回数据，总不能凭空获取TOP10列表对吧？

给你两个简单的示例参考：

前端原生AJAX代码示例 #

// 页面加载完成后执行
window.addEventListener('load', function() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'http://localhost:3000/api/top10', true);
  
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      const top10List = JSON.parse(xhr.responseText);
      const ol = document.createElement('ol');
      
      top10List.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        ol.appendChild(li);
      });
      
      document.body.appendChild(ol);
    } else {
      console.error('请求数据失败');
    }
  };
  
  xhr.onerror = function() {
    console.error('网络请求出错');
  };
  
  xhr.send();
});

简单Node.js服务器示例（用Express框架） #

首先得先初始化项目并安装Express：

npm init -y
npm install express

然后创建server.js文件：

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

// 模拟TOP10列表数据
const top10Data = [
  '第1名：Item A',
  '第2名：Item B',
  '第3名：Item C',
  '第4名：Item D',
  '第5名：Item E',
  '第6名：Item F',
  '第7名：Item G',
  '第8名：Item H',
  '第9名：Item I',
  '第10名：Item J'
];

// 定义接口路由
app.get('/api/top10', (req, res) => {
  res.json(top10Data);
});

// 启动服务器
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

启动服务器后，前端的AJAX就能拿到数据并渲染啦。如果还是拿不准，最好直接问问老师——毕竟作业的具体要求还是出题人最清楚～

内容的提问来源于stack exchange，提问作者Connor D