本文共 1771 字，大约阅读时间需要 5 分钟。

JavaScript 或者 AJAX 请求基础知识示例

本文将介绍如何利用 vanilla JavaScript 实现从客户端到服务器端的数据请求，并将返回结果展示在网页中。

客户端操作

我们将创建一个简单的单页应用 (spa)，通过 JavaScript 发起 AJAX 请求，与服务器通信。具体步骤如下：

const resultDiv = document.getElementById('result');

2. 绑定事件：为目标 <div> 元素绑定鼠标悬停事件。每当鼠标悬停进入该区域时，触发 AJAX 请求。

resultDiv.addEventListener('mouseover', function() {
    // 进行 AJAX 请求
});

3. 创建 XDR 对象：使用 XMLHttpRequest 实例来进行请求。

const xhr = new XMLHttpRequest();
// 指定请求 URL 和 提交类型
xhr.open('POST', '/server', false);  // 注意这里的 URL 和方法

4. 发送请求：提交请求，通常是空的 (null 或 ''字符串）。如果需要传递 data，可以将其放在 send 方法中。

xhr.send();

5. 处理响应：一旦服务器返回响应，定义回调函数来处理。通常，我们会检查请求状态以及读取返回的数据。

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
            // 显示服务器返回的数据
            resultDiv.textContent = xhr.response;
        }
    }
};

服务器端操作

为了实现上述功能，服务器需要提供一个处理 AJAX 请求的路由。以下是一个常见的 Node.js 服务器实现：

6. 导入 Express 模块：为了简化服务器配置，建议使用 Express框架。

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

2. 配置路由：为请求路径设置处理函数。

app.get('/server', function(req, res) {
    res.setHeader('Access-Control-Allow-Origin', '*');  //允许任何来源访问
    res.send('此时返回的数据内容');  // 可以根据需求传递不同的数据
});
app.post('/server', function(req, res) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.send('通过 POST 方法提交的数据处理结果');
});

3. 启动服务器：将服务器设置为在指定端口上监听请求。

app.listen(8000, function() {
    console.log('现在在 8000 端口上监听中...');
});

结果展示

当用户在页面中悬停目标 <div> 元素时，通过上述配置，客户端将自动向服务器发送 AJAX 请求。服务器返回数据后，会连同响应头和数据一起发送回客户端，最终显示在指定的 <div> 区域。

注意事项

4. 跨域问题：如果服务器设置的回应头中没有正确设置 Access-Control-Allow-Origin 标记，可能会导致跨站请求被禁止。
5. 状态码处理：确保服务器返回的状态码在客户端处理时得到正确判断，避免因为 HTTP 状态码错误而导致处理逻辑异常。
6. 数据格式：注意服务器返回的数据格式，确保客户端按期处理。

通过上述步骤，可以实现一个简单的数据动态展示功能。根据实际需求，可对服务器端接口进行扩展，如增加参数传递、状态管理等功能，以提升应用的灵活性和实用性。