加载'服务器端'本地html文件中带有XMLHttpRequest的文件

我想用javascript加载一个json字符串文件。javascript位于我从本地文件系统加载的html文件中。

我尝试了以下代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', fileName, true);
xhr.responseType = 'blob';  
xhr.onload = function(e) {
  if (this.status == 200) {
    // get binary data as a response
    var blob = this.response;
    alert("Yo");
  }
};

但是onload事件只触发一次，状态为0，然后不再发生。

我尝试使用文件的完整路径和本地文件路径，如"/files/the_file.txt"。

这个问题似乎与我试图在本地运行html文件有关。我不想像我在类似的帖子中看到的那样设置本地服务器

有人能解决这个问题吗？

编辑：

这不是我想要的，但这可能是我几乎想要的一个例子。这个例子让用户选择一个文件，我的脚本现在可以访问所选文件的内容。

HTML:

<input type="file" id="FancyInputField" onchange="doIt();">

Javascript：

function doIt(){
    var selectedFile = document.getElementById('FancyInputField').files[0];
    reader = new FileReader();
    reader.onload = function (e) {
        var output = reader.result;     
        var daObject = JSON.parse(output);
    }
    reader.readAsText(selectedFile);
}

这也适用于本地html文件。（无本地服务器）

我的问题站得住脚；如何在没有用户交互的情况下读取文件？这些文件位于html文件所在的子文件夹中。我可以毫无问题地加载并显示来自同一子文件夹的图像，带有<img>标签。。那么，为什么加载文本文件如此困难呢？