【Ajax】Express 服务端框架

在Node.js中，Express是一个非常流行的后端框架，可以用于创建Web服务器。以下是一个简单的Express服务器示例，它使用Ajax进行数据请求和响应。

首先，确保你已经安装了Node.js和npm。然后，创建一个新的项目并初始化一个新的npm项目：




mkdir express-ajax-example
cd express-ajax-example
npm init -y

接下来，安装Express：




npm install express

创建一个名为server.js的文件，并添加以下代码：




const express = require('express');
const app = express();
const port = 3000;
 
// 解析JSON请求体
app.use(express.json());
 
// 创建一个GET路由用于返回初始页面
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});
 
// 创建一个POST路由用于Ajax请求
app.post('/ajax-response', (req, res) => {
  const data = { message: 'Hello from Express!' };
  res.json(data); // 返回JSON响应
});
 
app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

在同一目录下创建一个index.html文件，并添加以下代码：




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ajax Example</title>
  <script>
    function handleAjaxResponse() {
      const xhr = new XMLHttpRequest();
      xhr.open('POST', '/ajax-response', true);
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          // 请求成功
          alert(xhr.responseText);
        }
      };
      xhr.send(JSON.stringify({ key: 'value' })); // 发送JSON请求体
    }
  </script>
</head>
<body>
  <h1>Ajax Example</h1>
  <button onclick="handleAjaxResponse()">Send Ajax Request</button>
</body>
</html>

运行服务器：




node server.js

在浏览器中打开http://localhost:3000，点击按钮，你将看到一个带有"Hello from Express!"的警告框。这个示例演示了如何使用Express创建一个简单的Web服务器，并使用Ajax与该服务器进行通信。

【Ajax】Express 服务端框架

评论已关闭

推荐阅读