如何在JavaScript中引用本地文件？

Question

我正在WebStorm中工作，并且尝试使用JavaScript读取文本文件（file.txt）。我曾尝试使用Ajax，XMLHttpRequest和fetch进行此操作，但它们都返回了404错误消息。

这是我的目录层次结构：

注意：：我正在使用以下代码引用artikels.js中的文件：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'data/file.txt', false);
xhr.onload = function() {
  if (this.status == 0) {
      const resp = this.response;
      console.log(resp);
  } else {
      console.log("fail");
}};
xhr.send();

我一直试图将链接更改为以下形式：

assets/js/own/data/file.txt
/assets/js/own/data/file.txt
./data/file.txt

我应该如何编写链接才能使其正常工作？

已解决：

我犯的错误是我尝试使用file.txt方法（感谢ibrahim tanyalcin的建议）后，从artikels.js文件开始构建了Location.pathname的路径。得知当前位置是HTML页面的位置，该页面具有指向artikels.js文件的“链接”，而不是artikels.js位置...

例如：

Answer 1

XMLHttpRequest()已知的唯一绝对URL是运行此脚本的文档的URL。

因此，如果您要使用相对URL，则它们应相对于文档的URL 。

因此：

xhr.open('GET', 'assets/js/own/data/file.txt', false); 

或者如果 assets 文件夹始终位于站点的根目录，则可以使用根目录相对URL：

xhr.open('GET', '/assets/js/own/data/file.txt', false);