Javascript 无法使用XMLHttpRequest（）检索数据

我的目标是创建一个JavaScript程序，该程序使用XMLHttpRequest对象从HTML文件中检索信息，并在不重新加载页面的情况下向用户显示响应

单击按钮后，应显示数据

问题是我的代码无法访问HTML文件中的数据。JS文件和HTML文件也放在同一个文件夹中，那么我该如何解决这个问题呢

JS代码：

//button to get data
var btnGet = document.querySelector("#btnGetData");
btnGet.addEventListener('click', getData);

//Create getData function
function getData(){
    //Create XMLHttpRequest object
    var xhttp = new XMLHttpRequest();
    
    //onreadystatechange
    xhttp.onreadystatechange = function(){
    if(this.readyState == 4 && this.status == 200){
        document.getElementById("content").innerHTML = this.responseText;
        alert("did it");
    }else{
        alert("error");
    }
};
    //Create the request
    xhttp.open("GET", "data.html", true);
    
    //Send the resuest
    xhttp.send();
}

从浏览器收到错误：

---

JavaScript无法读取客户端文件系统上的本地文件。只有当文件存储在服务器上时，这才起作用。

问题是，XHR不适用于文件协议。在您的计算机上安装一个本地服务器，然后您可以使用http（s）协议。如果您的主要目标是将数据保存在单独的文件中，请将其以表格/数组形式放入单独的脚本中，如

const=data[…]

，这样您就可以像在主脚本上方添加常规脚本一样将其包括在内，只需引用

数据

。