Express Node.js中XMLHttpRequest发送数据后客户端onLoad未触发问题

核心问题：你创建了XMLHttpRequest实例但没有调用send()方法发送请求，服务端收到的是jQuery $.post发起的请求，和绑定了onLoad5的XHR请求完全无关，所以onLoad5永远不会触发。

具体细节 #

1. 你的客户端代码里，res5对象完成了open()和事件监听配置，但缺少关键的res5.send()调用——这意味着这个XHR请求根本没被发送到服务端。
2. 服务端打印的triggers，来自下面的$.post('/hello', a)请求，这个请求的响应会由jQuery的回调处理，和你写的onLoad5没有关联。

修复方案 #

方案1：补全原生XHR的请求发送逻辑 #

如果要使用你定义的res5对象发送请求，需要补充请求头设置和send()调用：

function onError() {
  console.log('error');
}
console.log('page loaded')
var res5 = new XMLHttpRequest();
var url5 = '/hello';
res5.open('POST',url5,true);
// 发送JSON数据时需要设置请求头
res5.setRequestHeader('Content-Type', 'application/json');
res5.addEventListener('load',onLoad5);
res5.addEventListener('error',onError);
function onLoad5() {
  console.log("SOMETHING")
  console.log('da')
  console.log('hello')
  // 可以在这里获取响应内容
  console.log(JSON.parse(this.responseText));
}
var a = {potato: "blue"};
// 发送请求，将数据转为JSON字符串
res5.send(JSON.stringify(a));

方案2：用jQuery的回调处理响应 #

如果继续使用$.post，直接用它的回调函数处理响应即可：

function onError() {
  console.log('error');
}
console.log('page loaded')
var a = {potato: "blue"};
$.post('/hello', a, function(response) {
  console.log("SOMETHING")
  console.log('da')
  console.log('hello')
  console.log(response);
}).fail(onError);

调试技巧 #

• 打开浏览器开发者工具（F12），切换到Network标签，查看所有发起的HTTP请求：你会发现只有$.post的请求，没有res5的请求，这能快速定位到请求未发送的问题。
• 可以给XHR对象添加更多事件监听（比如progress、abort），或者打印res5.readyState属性，确认请求的状态变化。

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