Ich habe eine Textdatei im Stammverzeichnis meiner Web-App http: //localhost/foo.txt und möchte sie in eine Variable in Javascript laden. In groovy würde ich dies tun:

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

Wie kann ich ein ähnliches Ergebnis in Javascript erzielen?

XMLHttpRequest, dh AJAX, ohne XML.

Die genaue Art und Weise, wie Sie dies tun, hängt davon ab, welches JavaScript-Framework Sie verwenden. Wenn wir jedoch Interoperabilitätsprobleme außer Acht lassen, sieht Ihr Code folgendermaßen aus:

var client = new XMLHttpRequest ();
client.open ('GET', '/foo.txt');
client.onreadystatechange = function () {
  alert (client.responseText);
}}
client.send ();

Normalerweise ist XMLHttpRequest jedoch nicht auf allen Plattformen verfügbar, sodass einige Fudgery-Vorgänge durchgeführt werden. Wieder einmal ist es am besten, ein AJAX-Framework wie jQuery zu verwenden.

Eine zusätzliche Überlegung: Dies funktioniert nur, solange sich foo.txt in derselben Domain befindet. Wenn es sich in einer anderen Domäne befindet, verhindern Sicherheitsrichtlinien mit demselben Ursprung, dass Sie das Ergebnis lesen können.

Hier ist, wie ich es in jquery gemacht habe:

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

Update 2019: Verwenden von 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

Wenn Sie nur eine konstante Zeichenfolge aus der Textdatei möchten, können Sie diese als JavaScript einfügen:

// 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>

Die aus der Datei geladene Zeichenfolge wird nach dem Laden für JavaScript zugänglich. Das Zeichen "(Backtick) beginnt und endet ein Vorlagenliteral , wobei sowohl" als auch "Zeichen in Ihrem Textblock berücksichtigt werden .

Dieser Ansatz funktioniert gut, wenn Sie versuchen, eine Datei lokal zu laden, da Chrome AJAX für URLs mit dem file://Schema nicht zulässt .

Beachten Sie, dass Javascript auf dem Client und nicht auf dem Server ausgeführt wird. Sie können in Javascript nicht wirklich eine Datei vom Server laden. Was passiert ist, dass Javascript eine Anfrage an den Server sendet und der Server den Inhalt der angeforderten Datei zurücksendet. Wie erhält Javascript den Inhalt? Dafür ist die Rückruffunktion gedacht. In Edwards Fall also

    client.onreadystatechange = function() {

und in danbs Fall ist es

 function(data) {

Diese Funktion wird immer dann aufgerufen, wenn die Daten eintreffen. Die jQuery-Version verwendet implizit Ajax. Sie erleichtert lediglich die Codierung, indem dieser Code in die Bibliothek eingekapselt wird.

Update 2020: Verwenden von Fetch mit async / await

const response = await fetch('http://localhost/foo.txt');
const data = await response.text();
console.log(data);

Beachten Sie, dass awaitdies nur in einer asyncFunktion verwendet werden kann. Ein längeres Beispiel könnte sein

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

Dies sollte in fast allen Browsern funktionieren:

var xhr=new XMLHttpRequest();
xhr.open("GET","https://12Me21.github.io/test.txt");
xhr.onload=function(){
    console.log(xhr.responseText);
}
xhr.send();

Zusätzlich gibt es die neue FetchAPI:

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

Wenn Sie mit jQuery arbeiten, anstatt jQuery.getz

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");
});

Sie könnten verwenden .load, was Ihnen eine viel kondensiertere Form gibt:

$("#myelement").load("foo.txt");

.loadbietet Ihnen auch die Möglichkeit, Teilseiten zu laden, die nützlich sein können, siehe api.jquery.com/load/ .

Wenn Ihre Eingabe als XML strukturiert war, können Sie die importXMLFunktion verwenden. (Mehr Infos hier bei quirksmode ).

Wenn es sich nicht um XML handelt und es keine äquivalente Funktion zum Importieren von einfachem Text gibt, können Sie es in einem versteckten Iframe öffnen und dann den Inhalt von dort lesen.