使用 AJAX 读取本地文件答案

【问题标题】：Using AJAX to read local files使用 AJAX 读取本地文件
【发布时间】：2011-08-03 08:36:24
【问题描述】：

我是 AJAX 的新手，我只想确认一下：如果我的所有代码都在桌面上的文件夹中，并且我正在使用 AJAX 在 HTML 中的 div 中输出文件内容，是否可以访问本地文件通过 AJAX 或文件必须在服务器上？

我只是第一次测试 AJAX 功能，我遇到了问题，因为它在 .js 文件中显示错误“访问被拒绝”

【问题讨论】：

本地文件？ ajax 请求用于通过 HTTP 检索资源
尝试请求相对路径。否则，内容访问政策将阻止您。
AJAX 的全部意义在于将请求从 client 发送到 server
我的猜测是 abhinav 试图简化他的开发环境，这不是一个难以置信的概念，但也不是最好的方法。
如果您的页面是本地的，您可以加载本地文件。

标签： javascript ajax

【解决方案1】：

出于安全原因，JavaScript 对客户端文件系统的访问受到限制 - 考虑您是否希望（其他人的）JavaScript 读取您的敏感文档。

即使在试验时，最好使用真实的拓扑结构，从服务器提供的东西将在真实系统中提供。

设置一个像Apache这样的Web服务器指向你的开发目录真的很容易，所以“服务器”只是你伪装的桌面。因此编辑/测试周期非常快。

【讨论】：

我的离线项目位于文件夹“my_project”中。所以，现在我需要从我的 index.html 中从文件夹“my_project”请求一个 xml 文件。我不明白为什么这是安全漏洞。如果我将我的项目上传到服务器并从我的 index.html 请求服务器的 xml 文件，为什么不是？只是好奇。
@Chameleon：区别在于谁从该文件夹中读取。在在线情况下，web 服务器软件 直接读取，而客户端间接读取。如果 Web 服务器缺少适当的权限，它也会失败。

【解决方案2】：

在任何浏览器的 javascript 实现中，从一开始就禁止文件访问。有人可以在他的浏览器中手动禁用该“安全功能”。例如，对于 Google Chrome，您必须使用 --disabled-web-security 作为命令行参数来启动可执行文件。 Firefox 可以在 about:config 中禁用它。

无论如何，如果您正在为公众编写代码，您当然不能完全依赖它。但隧道尽头有光。 “新”Javascript File API 已经在 Chrome 中可用，我猜/希望其他供应商很快就会跟进。该 API“正式”允许您的脚本读取本地计算机上的文件。

【讨论】：

【解决方案3】：

Javascript 在客户端工作，但访问权限有限，因此无法从客户端访问本地文件。

因此，您需要将内容放在服务器上，而不是使用 ajax 并获取 div 中的数据以显示客户端。

【讨论】：

【解决方案4】：

如果您只是想要它进行测试，您可以尝试在 chrome 上禁用网络安全，然后它应该可以工作。

【讨论】：

【解决方案5】：

我希望它可以使用 Ajax 在本地访问文件，我使用 mozilla firefox 进行了尝试，并且运行良好。我创建了 2 个文本文件并在同一个文件夹中进行了调整。这是代码。如有错误请见谅。

function getXmlHttpRequestObject() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest(); //Not IE
    } 
    else if(window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP"); //IE
    } 
    else {
        alert("Your browser doesn't support the XmlHttpRequest object.  Better upgrade to Firefox.");
    }
}           
var receiveReq = getXmlHttpRequestObject();     
function sayHello(fname) {
    if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
        receiveReq.open("GET", fname, true);
        receiveReq.onreadystatechange = handleSayHello; 
        receiveReq.send(null);
    }           
}
function handleSayHello() {
    if (receiveReq.readyState == 4) {
        document.getElementById('span_result').innerHTML = receiveReq.responseText;
    }
}

Here is the html code
<select name="files" onchange="sayHello(this.value)">
<option value="">Select a file</option>
<option value="file.txt">file.txt</option>
<option value="file2.txt">file2.txt</option>
<option value="ajax.html">Ajax.html</option>
</select><br>
<p>Contents of the file will be displayed below</p>
<div id="span_result"></div>

【讨论】：