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

Question

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

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

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

Answer 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 находится в одном домене. Если он находится в другом домене, политики безопасности того же источника не позволят вам прочитать результат.

Answer 2

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

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

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

Строка, загруженная из файла, становится доступной для JavaScript после загрузки. Символ `(backtick) начинается и заканчивается литералом шаблона , что позволяет использовать как символы", так и "в вашем текстовом блоке.

Этот подход хорошо работает, когда вы пытаетесь загрузить файл локально, поскольку Chrome не разрешит AJAX для URL-адресов со схемой file://.

Answer 4

Обновление 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

Answer 5

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

    client.onreadystatechange = function() {

и в случае Данба это

 function(data) {

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

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

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

Answer 8

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

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