从本地文本文件中读取并更新和更新 html 标记中的内容答案

【问题标题】：read from a local text file and update and updating the content in an html tag从本地文本文件中读取并更新和更新 html 标记中的内容
【发布时间】：2014-02-22 17:43:38
【问题描述】：

我需要读取本地文本文件并使用文本文件的内容更新我的 html 页面。我在嵌入式系统上工作时没有那么多的浏览器支持。

但它给出了以下错误：

XMLHttpRequest cannot load file:///C:/Documents%20and%20Settings/aryas/Desktop/localtoken.txt. Cross origin requests are only supported for HTTP.

代码如下。

   <script>

window.onload = function readTextFile()
{
    console.log("Inside function");
    var file = "localtoken.txt";
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                document.getElementById("token").innerHTML = allText;

            }
        }
    }
    rawFile.send(null);
}
</script>

【问题讨论】：

请提及您希望代码运行的设备/浏览器。
您将无法使用 XMLHttpRequest 来完成此操作，也无法使用 HTML5 文件访问 API，因为它们需要用户手动选择文件。你调查过LocalStorage吗？还是考虑远程存储文件数据？
@Shiva 在使用 Qt 创建的自定义浏览器中工作。它在 xi3 机顶盒上。
@AlexK。您能否进一步解释一下 LocalStorage 的含义？远程存储文件似乎是不可能的。它必须驻留在本地。

标签： javascript localhost local

【解决方案1】：

简答： 你不能做你想做的事，因为你现在正在做。您必须在 Web 服务器中提供文件。试试LightHTTPD、Nginx 或Mongoose

长答案： 根据您收到的错误，您必须打开 index.html 文件（带有脚本的文件）而不从 Web 服务器提供它（为了确认这一点，让我问一下：浏览器中的 URL 是否以 @987654326 开头@?)。

正如类名所述，XMLHttpRequest 仅支持 HTTP/HTTPS 请求（blob URI 正在开发中，如下所述：http://en.wikipedia.org/wiki/XMLHttpRequest）。

事实上，如果没有用户手动选择文件，您将无法从文件系统加载/保存文件，因为这是一个安全威胁（假设您打开一个网站并加载你的C: 并将其发送到服务器，你想要一个网站来做吗？）。

要加载您的localtoken.txt 文件，请在轻巧的网络服务器中提供文件（就像您在嵌入式系统上工作时一样）。我在简短答案中建议的那些满足了这些要求，但从 this SO question 看来，Mongoose 是要走的路。

【讨论】：

【解决方案2】：

您需要将文件 URL 传递给 XMLHttpRequest。

xmlhttp.open('GET', 'http://localhost/file.txt', false);

为此，您需要配置一个可以处理您的请求的网络服务器。例如，您可以安装 Apache 服务器并启动它并将 file.txt 部署到其中。一旦浏览器向 webserver 发送 file.txt 请求，webserver 就会返回文件和响应，您可以使用问题中提到的相同方法来处理。

【讨论】：

【解决方案3】：

将此文本文件放在与 index.html 相同的目录中。在 ajax 请求中，您的路径看起来就像在您的网站上一样 - 'readfile.txt'

【讨论】：