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

Question

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

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

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

println fileContents;

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

636 8

javascript

8 ответов:

Comments

Ничего не найдено.

Edward Z. Yang · Accepted Answer · 2008-10-13 05:10:22

XMLHttpRequest, т. е. AJAX, без XML.

точный способ, которым вы это делаете, зависит от того, какую структуру JavaScript вы используете, но если мы игнорируем проблемы совместимости, ваш код будет выглядеть примерно так:
var client = new XMLHttpRequest();
client.open('GET', '/foo.txt');
client.onreadystatechange = function() {
  alert(client.responseText);
}
client.send();
Обычно говоря, однако, XMLHttpRequest не доступен на всех платформах, поэтому некоторые выдумки сделаны. Еще раз, лучше всего использовать фреймворк AJAX, такой как jQuery.

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

danb · Accepted Answer · 2008-10-13 05:25:39

вот как я это сделал в jquery:
jQuery.get('http://localhost/foo.txt', function(data) {
    alert(data);
});

Erik Uggeldahl · Accepted Answer · 2016-10-13 17:57:58

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

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

atmelino · Accepted Answer · 2013-12-22 02:13:00

одна вещь, чтобы иметь в виду, что Javascript работает на клиенте, а не на сервере. Вы не можете действительно "загрузить файл" с сервера в JavaScript. Что происходит, так это то, что Javascript отправляет запрос на сервер, и сервер отправляет обратно содержимое запрошенного файла. Как Javascript получает содержимое? Для этого и существует функция обратного вызова. В случае Эдварда это
    client.onreadystatechange = function() {
и в случае danb, это
 function(data) {
эта функция вызывается всякий раз, когда данные приходят. Версия jQuery неявно использует Ajax, она просто упрощает кодирование, инкапсулируя этот код в библиотеке.

yvesonline · Accepted Answer · 2015-12-27 05:14:38

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

Vic · Accepted Answer · 2018-04-05 22:31:42

С Помощью 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

12Me21 · Accepted Answer · 2018-08-18 20:29:10

Это должно работать почти во всех браузерах:
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) )

nickf · Accepted Answer · 2017-03-26 19:22:27

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

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