Express.js应用中HTML页面无法响应AJAX请求求助

我来帮你梳理下问题所在，这里有几个关键错误导致AJAX代码无法正常工作，咱们一步步修正：

1. Express静态文件中间件配置错误 #

你在app.js里用了app.set(express.static('./a'))，这是不对的——app.set是用来设置应用配置项的，而静态文件中间件需要用app.use来挂载到应用中。正确的写法应该是：

app.use(express.static('./a'));

这个修正后，Express才能正确托管a文件夹下的静态资源（比如ajax.js、blah.txt）。

2. XMLHttpRequest实例化错误 #

在ajax.js里，你创建XHR对象时漏掉了new关键字，这会导致语法错误，浏览器无法正确创建请求对象。修正后的代码：

var xhr = new XMLHttpRequest();

3. 确保静态资源路径正确 #

要确认blah.txt文件确实放在a文件夹下，这样静态中间件才能找到并返回它。如果文件不存在，AJAX请求会返回404错误。

修正后的完整代码 #

app.js

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

// 正确挂载静态文件中间件
app.use(express.static('./a'));

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/a/a.html');
});

app.listen(3000, '127.0.0.1');

ajax.js

document.getElementById('button').addEventListener('click', trigger);

function trigger() {
  // 正确实例化XHR对象
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'blah.txt', true);
  
  xhr.onload = function() {
    if (xhr.status == 200) {
      console.log(xhr.responseText);
    } else {
      // 增加错误状态提示，方便调试
      console.log('请求失败，状态码：', xhr.status);
    }
  };

  // 监听网络错误，捕获请求异常
  xhr.onerror = function() {
    console.log('网络请求发生错误');
  };

  xhr.send();
}

调试小技巧 #

• 打开浏览器开发者工具的Network标签，查看AJAX请求的状态码和响应内容，确认blah.txt是否被正确加载；
• 查看Console标签，检查是否有语法错误或其他报错信息，这能帮你快速定位问题。

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