У мене є текстовий файл у корені мого веб-додатку http: //localhost/foo.txt, і я хотів би завантажити його в змінну в javascript .. in groovy я би це зробив:

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

Як я можу отримати подібний результат у javascript?

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

Точний спосіб, яким ви це зробите, залежить від того, який фреймворк JavaScript ви використовуєте, але якщо ми нехтуємо питаннями сумісності, ваш код буде виглядати приблизно так:

var client = новий XMLHttpRequest ();
client.open ('GET', '/foo.txt');
client.onreadystatechange = функція () {
  оповіщення (client.responseText);
}
client.send ();

Однак, як правило, XMLHttpRequest доступний не на всіх платформах. Знову ж таки, найкраще скористатися рамкою AJAX на зразок jQuery.

Ще одне додаткове враження: це працюватиме лише до тих пір, поки foo.txt знаходиться в одному домені. Якщо він знаходиться в іншому домені, політика безпеки одного і того ж джерела не дозволить вам прочитати результат.

ось як я це зробив у jquery:

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

Оновлення 2019: Використання витягу:

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

Якщо вам потрібен лише постійний рядок з текстового файлу, ви можете включити його як 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://схемою.

Слід пам’ятати, що Javascript працює на клієнті, а не на сервері. Ви дійсно не можете "завантажити файл" із сервера в Javascript. Що відбувається, це те, що Javascript відправляє запит на сервер, а сервер повертає вміст запитуваного файлу. Як Javascript отримує вміст? Ось для чого і функція зворотного дзвінка. У випадку Едварда, тобто

    client.onreadystatechange = function() {

і у випадку данб, це так

 function(data) {

Ця функція викликається кожного разу, коли дані надходять. Версія jQuery неявно використовує Ajax, вона просто полегшує кодування шляхом інкапсуляції цього коду в бібліотеці.

Оновлення 2020: Використання функції " Виконання" за допомогою асинхронізації / очікування

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

Зверніть увагу, що awaitйого можна використовувати лише у asyncфункції. Більш довгий приклад може бути

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

Це має працювати майже в усіх браузерах:

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

Крім того, є новий FetchAPI:

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

Під час роботи з 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/ .

Якщо ваш вклад був структурований як XML, ви можете використовувати цю importXMLфункцію. (Більше інформації тут на quirksmode ).

Якщо це не XML, і немає еквівалентної функції для імпорту простого тексту, то ви можете відкрити його в прихованому кадрі і потім прочитати вміст звідти.