Как загрузить содержимое текстового файла в переменную javascript?

У меня есть текстовый файл в корне моего веб-приложения http://localhost/foo.txt, и я хотел бы загрузить его в переменную в javascript.. в groovy Я бы сделал это:

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

Как я могу получить аналогичный результат в javascript?

ОТВЕТЫ

Ответ 1

XMLHttpRequest, то есть AJAX, без XML.

Точный способ, которым вы это выполняете, зависит от того, какую структуру JavaScript вы используете, но если мы не будем учитывать проблемы совместимости, ваш код будет выглядеть примерно так:

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

Как правило, XMLHttpRequest не доступен на всех платформах, поэтому некоторые исправления выполняются. Еще раз, ваш лучший выбор - использовать структуру AJAX, такую ​​как jQuery.

Одно дополнительное соображение: это будет работать только до тех пор, пока foo.txt находится в одном домене. Если это в другом домене, политики безопасности одного и того же происхождения будут препятствовать чтению результата.

Ответ 2

вот как я это сделал в jquery:

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

Ответ 3

Если вам нужна только постоянная строка из текстового файла, вы можете включить ее как 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>

Ответ 4

Следует иметь в виду, что Javascript работает на клиенте, а не на сервере. Вы не можете "загрузить файл" с сервера в Javascript. Что происходит, так это то, что Javascript отправляет запрос на сервер, а сервер отправляет содержимое запрошенного файла. Как Javascript получает содержимое? Это функция обратного вызова. В случае Эдварда это

    client.onreadystatechange = function() {

и в случае danb, это

 function(data) {

Эта функция вызывается всякий раз, когда данные поступают. Версия jQuery неявно использует Ajax, она просто упрощает кодирование, инкапсулируя этот код в библиотеку.

Ответ 6

Это должно работать почти во всех браузерах:

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

Ответ 7

При работе с 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/.

Ответ 8

Если ваш вход был структурирован как XML, вы можете использовать функцию importXML. (Подробнее здесь, в quirksmode).

Если это не XML, и нет эквивалентной функции для импорта простого текста, вы можете открыть его в скрытом iframe, а затем прочитать содержимое оттуда.