Webアプリhttp：//localhost/foo.txtのルートにテキストファイルがあり、それをjavascriptの変数にロードしたいのですが、groovyでは次のようにします。

def fileContents = 'http://localhost/foo.txt'.toURL().text;
println fileContents;

JavaScriptで同様の結果を得るにはどうすればよいですか？

XMLなしのXMLHttpRequest、つまりAJAX。

これを行う正確な方法は、使用しているJavaScriptフレームワークによって異なりますが、相互運用性の問題を無視すると、コードは次のようになります。

var client = new XMLHttpRequest（）;
client.open（ 'GET'、 '/foo.txt'）;
client.onreadystatechange = function（）{
  alert（client.responseText）;
}
client.send（）;

ただし、通常、XMLHttpRequestはすべてのプラットフォームで使用できるわけではないため、多少の手間がかかります。ここでも、jQueryのようなAJAXフレームワークを使用するのが最善の策です。

もう1つの考慮事項：これは、foo.txtが同じドメイン上にある場合にのみ機能します。別のドメインにある場合、同じ生成元のセキュリティポリシーにより、結果を読み取ることができません。

ここに私がjqueryでそれをした方法があります：

jQuery.get('http://localhost/foo.txt', function(data) {
    alert(data);
});

2019年更新：Fetchの使用：

fetch('http://localhost/foo.txt')
  .then(response => response.text())
  .then((data) => {
    console.log(data)
  })

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

テキストファイルの定数文字列のみが必要な場合は、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からアクセス可能になります。`（backtick）文字は、テンプレートリテラルの開始と終了を表し、テキストブロックで"と "の両方の文字を使用できます。

Chromeはfile://スキームを使用したURLでAJAXを許可しないため、ファイルをローカルにロードしようとする場合、このアプローチはうまく機能します。

Javascriptはサーバー上ではなくクライアント上で実行されることを覚えておいてください。JavaScriptでサーバーから実際に「ファイルをロード」することはできません。何が起こるかは、Javascriptがサーバーにリクエストを送信し、サーバーがリクエストされたファイルのコンテンツを返信することです。JavaScriptはどのようにコンテンツを受け取りますか？これがコールバック関数の目的です。エドワードの場合、それは

    client.onreadystatechange = function() {

danbの場合、それは

 function(data) {

この関数は、データがたまたま到着したときに呼び出されます。jQueryバージョンは暗黙的にAjaxを使用し、そのコードをライブラリーにカプセル化することでコーディングを容易にします。

Update 2020：Fetchを非同期/ 待機で使用する

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();

さらに、新しいFetchAPI があります。

fetch("https://12Me21.github.io/test.txt")
.then( response => response.text() )
.then( text => console.log(text) )

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 /を参照してください。

入力がXMLとして構造化されている場合は、importXML関数を使用できます。（詳細はこちらのquirksmodeで）。

XMLでなく、プレーンテキストをインポートするための同等の機能がない場合は、非表示のiframeで開き、そこからコンテンツを読み取ることができます。