Question

我在我的网络服务器上有一个JS脚本，我希望能够读取文件。我的文件系统是这样的：

> Root
index.html
read.js
> files
    file.txt

在这个例子中，文件＆＃34; file.txt＆＃34;将包含简单的单词＆＃34; Hello＆＃34;

使用JavaScript，我希望能够创建一个函数，例如：

function read (path) {
    //Stuff to read the file with specified path
    var content = //whatever the content is
    return content;
}

然后可以用：

来调用它

var file = read("/files/file.txt")

然后当我做

alert(file)

它会弹出/提醒您＆＃34; Hello＆＃34;，file.txt的内容。

有什么方法可以做到这一点吗？

Answer 1

以下是您的示例网页：

http://sealevel.info/test_file_read.html

这是javascript代码：

// Synchronously read a text file from the web server with Ajax
//
// The filePath is relative to the web page folder.
// Example:   myStuff = loadFile("Chuuk_data.txt");
//
// You can also pass a full URL, like http://sealevel.info/Chuuk1_data.json, but there
// might be Access-Control-Allow-Origin issues. I found it works okay in Firefox, Edge,
// or Opera, and works in IE 11 if the server is configured properly, but in Chrome it only
// works if the domains exactly match (and note that "xyz.com" & "www.xyz.com" don't match).
// Otherwise Chrome reports an error:
//
//   No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://sealevel.info' is therefore not allowed access.
//
// That happens even when "Access-Control-Allow-Origin *" is configured in .htaccess,
// and even though I verified the headers returned (you can use a header-checker site like
// http://www.webconfs.com/http-header-check.php to check it). I think it's a Chrome bug.
function loadFile(filePath) {
  var result = null;
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", filePath, false);
  xmlhttp.send();
  if (xmlhttp.status==200) {
    result = xmlhttp.responseText;
  }
  return result;
}

Answer 2

您正在寻找的是XMLHttpRequest。

Answer 3

如果您使用的是JQuery，这是一个非常简单的任务 - 下面的示例将执行HTTP GET请求（使用上面引用的XMLHttpRequest.as），并将内容放入ID为＆＃34;的HTML DOM对象中。结果＆＃34 ;.一旦加载完成，它也会抛出警报框。

$( "#result" ).load( "files/file.txt", function() {
  alert( "Load was performed." );
});

Answer 4

它并不像听起来那么简单，你将不得不对服务器与客户端进行一些研究。

除非您与服务器建立连接，否则无法通过Javascript读取服务器端数据。无论在客户端浏览器上运行的任何Javascript代码都只保留在他们的浏览器上，即使两者都在同一台计算机上运行。您需要的是一种使客户端（在本例中为html + javascript网站）与服务器通信的方法。

有很多方法可以做到这一点，但最简单的方法是通过GET请求到服务该文本文件的服务器。

尝试使用NGINX或NodeJS等服务静态文件，具体取决于您的需求。从那里，创建一个GET端点，您的Javascript将通过XMLHttpRequest连接到该端点（如@MattW。所述）。

Answer 5

您希望像Gabriel建议的那样使用XMLHttpRequest。

您真的需要阅读它，因为它非常易于配置，您需要了解工作流程才能实现它。如果您是跨源脚本，最初会遇到问题。

这是我为你嘲笑的一个例子：

<span id="placeholder"></span>
<script>
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById('placeholder').innerHTML = xhr.responseText;
        }
    }
    xhr.open('GET', 'test.html');
    xhr.send();
</script>

使用JavaScript

5 个答案: