我的网络应用程序的根目录中有一个文本文件http://localhost/foo.txt，我想将它加载到 javascript 中的一个变量中。在 groovy 中我会这样做：
def fileContents = 'http://localhost/foo.txt'.toURL().text;
println fileContents;
如何在 javascript 中获得类似的结果？
【问题讨论】：
标签： javascript
XMLHttpRequest，即 AJAX，没有 XML。
您执行此操作的确切方式取决于您使用的 JavaScript 框架，但如果我们忽略互操作性问题，您的代码将类似于：
var client = new XMLHttpRequest();
client.open('GET', '/foo.txt');
client.onreadystatechange = function() {
警报（client.responseText）；
}
client.send();
不过，通常来说，XMLHttpRequest 并非在所有平台上都可用，所以有些捏造。再次强调，最好的选择是使用像 jQuery 这样的 AJAX 框架。
一个额外的注意事项：这仅在 foo.txt 位于同一域中时才有效。如果它位于不同的域中，同源安全策略将阻止您读取结果。
【讨论】：
if (client.readyState === 4){ }
client.onloadend 获取完整的数据
client.readyState 属性值。我不赞成它，直到人们不会阅读 cmets 来发现答案只是部分正确。
这是我在 jquery 中的做法：
jQuery.get('http://localhost/foo.txt', function(data) {
alert(data);
});
【讨论】：
file:// 进行测试，这将不起作用，即：file:///example.com/foo.html。 Firefox 抱怨语法错误和 Chrome 阻止，因为它认为它是一个跨域请求。
dataType 参数，它将使用纯数据，请参阅 api.jquery.com/jQuery.get/
http://... 部分，因为它位于同一个域中，它会起作用，例如jQuery.get("foo.txt", ...).
fetch('http://localhost/foo.txt')
.then(response => response.text())
.then((data) => {
console.log(data)
})
【讨论】：
response.ok（或等效项）？我对fetch不是很有经验，所以不知道具体的设置位置。
async 函数中，您可以使用const text = await fetch(url).then($ => $.text()) 来平展回调。
如果您只想要文本文件中的常量字符串，您可以将其包含为 JavaScript：
// This becomes the content of your foo.txt file
let text = `
My test text goes here!
`;<script src="foo.txt"></script>
<script>
console.log(text);
</script>从文件加载的字符串在加载后可以被 JavaScript 访问。 `（反引号）字符开始和结束 template literal，允许在文本块中同时使用 " 和 ' 字符。
当您尝试在本地加载文件时，此方法效果很好，因为 Chrome 将不允许使用 file:// 方案的 URL 上的 AJAX。
【讨论】：
const response = await fetch('http://localhost/foo.txt');
const data = await response.text();
console.log(data);
请注意，await 只能在 async 函数中使用。一个更长的例子可能是
async function loadFileAndPrintToConsole(url) {
try {
const response = await fetch(url);
const data = await response.text();
console.log(data);
} catch (err) {
console.error(err);
}
}
loadFileAndPrintToConsole('https://threejsfundamentals.org/LICENSE');【讨论】：
这应该适用于几乎所有浏览器：
var xhr=new XMLHttpRequest();
xhr.open("GET","https://12Me21.github.io/test.txt");
xhr.onload=function(){
console.log(xhr.responseText);
}
xhr.send();
此外，还有新的Fetch API：
fetch("https://12Me21.github.io/test.txt")
.then( response => response.text() )
.then( text => console.log(text) )
【讨论】：
要记住的一点是，Javascript 在客户端上运行，而不是在服务器上。您不能真正从 Javascript 中的服务器“加载文件”。发生的情况是 Javascript 向服务器发送请求，服务器将请求文件的内容发回。 Javascript 如何接收内容？这就是回调函数的用途。在爱德华的情况下，那是
client.onreadystatechange = function() {
在 danb 的情况下，它是
function(data) {
只要数据碰巧到达，就会调用这个函数。 jQuery 版本隐式使用 Ajax，它只是通过将代码封装在库中来简化编码。
【讨论】：
使用 jQuery 时，而不是使用 jQuery.get，例如
jQuery.get("foo.txt", undefined, function(data) {
alert(data);
}, "html").done(function() {
alert("second success");
}).fail(function(jqXHR, textStatus) {
alert(textStatus);
}).always(function() {
alert("finished");
});
你可以使用.load，它给你一个更简洁的形式：
$("#myelement").load("foo.txt");
.load 还为您提供了加载部分页面的选项，这可以派上用场，请参阅api.jquery.com/load/。
【讨论】：