Node.js Ajax请求接口开发

本次记录Ajax接口是如何通过Node.js，如何发送与接收Ajax的请求，由于前面已经准备好了Node.js的http模块的技术储备，所以在http模块的基础上准备Ajax的网络请求，为后续的项目中会使用到的普通HTTP请求进行前期技术储备

Ajax学习目标

• • 1、Node.js如何接收前端Ajax请求并响应
• • 2、Node.js如何发送Ajax请求链接第三方并响应
• • 3、Ajax实现方式

NodeJS服务制作Ajax请求接收

介绍

使用nodejs创建一个http模块的createServer服务，实际开发可以将Ajax的处理部分，封装至一个单独的文件函数中，只需要在调用函数时传入req/res就行

Ajax本质上就是一次普通HTTP请求，前端发起请求，Node.js服务端接收请求后返回JSON数据

Ajax实现方式

tcp->stream流->buffer缓冲区->http接收并处理->业务处理->响应给前端

示例

const http = require("http");const server = http.createServer((req, res) => {  res.writeHead(200, {"Content-Type": "application/json; charset=utf-8", // 注意这里不要写错奥，与SSE的值要区别开"Access-Control-Allow-Origin": "*",  });if (req.url === "/api/ajax") {console.log("接收到来自客户端的/api/ajax的ajax接口请求")    res.end(JSON.stringify({code: 0,message: "服务端返回Ajax请求成功",data: {time: newDate().toLocaleString(),        },      }),    );return;  }  res.end(JSON.stringify({code: 404,message: "Not Found",    }),  );});server.listen(3000, () => {    console.log("Ajax 服务端已启动：http://localhost:3000/api/ajax");});

NodeJS服务发送Ajax请求

介绍

通过nodejs的服务调用另一个服务的Ajax请求，这里直接使用Node.js内置的fetch发送请求，整体流程和浏览器里的fetch基本一致

Ajax实现方式

fetch->http->buffer缓冲区->stream流->tcp协议传输->发送给后端

示例

const http = require("http");const server = http.createServer((req, res) => {    console.log("ajax客户端启动中...");});server.listen(3001, () => {    console.log("ajax客户端-服务已启动: http://localhost:3001");    // 发起请求-主要代码    fetch("http://localhost:3000/api/ajax")        .then((res) => res.json())        .then((data) => {console.log("客户端发起-请求结果：", data);    })    .catch((err) => {console.error("客户端发起-请求失败：", err.message);    });});server.on("error", (err) => {    console.error("ajax客户端-服务启动失败: ", err.message);});

注意事项

• • 1、Ajax请求是普通HTTP请求，请求结束后本次连接就结束了
• • 2、服务端返回JSON数据时，建议设置'Content-Type': 'application/json; charset=utf-8'
• • 3、如果浏览器跨域请求Node.js接口，需要设置'Access-Control-Allow-Origin': '*'或指定允许访问的域名
• • 4、如果需要持续接收服务端推送消息，应使用SSE或WebSocket

本文代码测试步骤参考

1、初始化node项目服务

• • 1、新建一个文件夹mkdir -p my-node
• • 2、进入目录创建node项目npm init -y
• • 3、修改package.json，参考下方代码

{"name":"my-node",    "version":"1.0.0",    "main":"main.js",    "scripts":{"dev":"node main.js"    },    "keywords":[],    "author":"",    "license":"ISC",    "description":""}

• • 4、新建一个入口文件main.js 复制上方接收代码

2、启动测试node项目

• • 1、执行npm run dev启动

3、调用测试

• • 1、浏览器访问http://localhost:3000/api/ajax查看结果
• • 2、也可以在浏览器控制台或Node.js中执行上方NodeJS服务发送Ajax请求示例代码，查看结果