Mam plik tekstowy w katalogu głównym mojej aplikacji internetowej http: //localhost/foo.txt i chciałbym załadować go do zmiennej w javascript .. w groovy zrobiłbym to:

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

Jak mogę uzyskać podobny wynik w javascript?

XMLHttpRequest, czyli AJAX, bez XML.

Dokładny sposób, w jaki to zrobisz, zależy od używanego frameworka JavaScript, ale jeśli pominiemy problemy ze współdziałaniem, Twój kod będzie wyglądał mniej więcej tak:

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

Zwykle jednak XMLHttpRequest nie jest dostępny na wszystkich platformach, więc pewne oszustwa zostały zrobione. Po raz kolejny najlepszym rozwiązaniem jest użycie frameworka AJAX, takiego jak jQuery.

Dodatkowa uwaga: będzie to działać tylko wtedy, gdy plik foo.txt znajduje się w tej samej domenie. Jeśli znajduje się w innej domenie, zasady zabezpieczeń tego samego pochodzenia uniemożliwiają odczytanie wyniku.

oto jak zrobiłem to w jQuery:

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

Aktualizacja 2019: Korzystanie z funkcji 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

Jeśli potrzebujesz tylko stałego ciągu z pliku tekstowego, możesz dołączyć go jako 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>

Ciąg ładowany z pliku staje się dostępny dla JavaScript po załadowaniu. Znak `(backtick) zaczyna i kończy literał szablonu , zezwalając na użycie zarówno znaków", jak i "w bloku tekstowym.

To podejście działa dobrze, gdy próbujesz załadować plik lokalnie, ponieważ Chrome nie zezwala na AJAX w adresach URL ze file://schematem.

Należy pamiętać, że Javascript działa na kliencie, a nie na serwerze. Tak naprawdę nie można „załadować pliku” z serwera w Javascript. Dzieje się tak, że Javascript wysyła żądanie do serwera, a serwer odsyła zawartość żądanego pliku. W jaki sposób Javascript otrzymuje zawartość? Do tego służy funkcja wywołania zwrotnego. To znaczy w przypadku Edwarda

    client.onreadystatechange = function() {

w przypadku Danba tak jest

 function(data) {

Ta funkcja jest wywoływana za każdym razem, gdy nadejdą dane. Wersja jQuery niejawnie używa Ajax, po prostu ułatwia kodowanie poprzez hermetyzację tego kodu w bibliotece.

Aktualizacja 2020: Używanie Fetch z async / await

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

Należy pamiętać, że awaitmożna tego używać tylko w asyncfunkcji. Może to być dłuższy przykład

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

Powinno to działać w prawie wszystkich przeglądarkach:

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

Dodatkowo jest nowe FetchAPI:

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

Pracując z jQuery zamiast używać jQuery.getnp

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

możesz użyć, .loadco daje znacznie bardziej skondensowaną formę:

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

.loaddaje również opcję załadowania częściowych stron, co może się przydać, patrz api.jquery.com/load/ .

Jeśli twoje dane wejściowe miały strukturę XML, możesz użyć importXMLfunkcji. (Więcej informacji tutaj w quirksmode ).

Jeśli to nie jest XML i nie ma równoważnej funkcji do importowania zwykłego tekstu, możesz otworzyć go w ukrytej ramce iframe, a następnie przeczytać zawartość stamtąd.