无法使用 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 无法读取客户端文件系统上的本地文件。这仅在文件存储在服务器上时才有效。

javascript xmlhttprequest xmlhttprequest