使用JavaScript读取服务器端文件

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

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

在本例中，文件“file.txt”将包含简单的单词“Hello”

使用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)

它将弹出/提醒您“Hello”，即file.txt的内容

---

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

您正在寻找的是。

这并不像听起来那么简单，您需要对服务器与客户端进行一些研究

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

有无数种方法可以做到这一点，但最简单的方法是通过向为该文本文件提供服务的服务器发出GET请求

---

尝试使用NGINX或类似NodeJS的东西来提供静态文件，这取决于满足您的需求的内容。在此基础上，创建一个GET端点，Javascript将通过XMLHttpRequest（如@MattW.said）连接到该端点

如果使用JQuery，这是一项非常简单的任务-下面的示例将执行HTTP GET请求（使用上面提到的XMLHttpRequest.com），并将内容放入ID为“result”的HTML DOM对象中。加载完成后，它还会弹出一个警报框

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

---

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

XMLHttpRequest

您需要认真阅读它，因为它是非常可配置的，您需要了解工作流才能实现它。如果您是跨源脚本编写，那么一开始就会遇到问题

下面是我为您模拟的一个示例：

var xhr=new XMLHttpRequest（）；
xhr.onreadystatechange=函数（）{
如果（xhr.readyState==4&&xhr.status==200）{
document.getElementById（“占位符”）.innerHTML=xhr.responseText；
}
}
open（'GET'，'test.html'）；
xhr.send（）；

以下是一个示例网页：

下面是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;
}

---

您能告诉/演示如何使用XMLHttpRequest来实现这一点吗？从字面上讲，第一个代码示例几乎就是您想要的。只需将URL替换为您的URL。我是否能够像设置#占位符的innterHTML一样为内容设置变量？是的，将其附加到

窗口

对象

window.myVar=xhr.responseText

这是假设文件'file.txt'实际上是由某个东西提供的。如果文件还没有向“外部世界”开放，那么XHR无法访问该文件。谢谢。对于由此引起的警告，有什么建议吗？“[Deprection]主线程上的同步XMLHttpRequest已被弃用，因为它会对最终用户的体验产生有害影响。有关更多帮助，请查看。”如何将其移动到工作线程？不要担心。它的加载速度并不比任何其他同步加载的页面元素（如img标记）慢。