Saya memiliki file teks di root aplikasi web saya http: //localhost/foo.txt dan saya ingin memuatnya ke dalam variabel di javascript .. di groovy saya akan melakukan ini:

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

Bagaimana saya bisa mendapatkan hasil yang serupa dalam javascript?

XMLHttpRequest, yaitu AJAX, tanpa XML.

Cara tepat Anda melakukan ini tergantung pada kerangka JavaScript apa yang Anda gunakan, tetapi jika kami mengabaikan masalah interoperabilitas, kode Anda akan terlihat seperti:

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

Namun secara normal, XMLHttpRequest tidak tersedia di semua platform, jadi beberapa fudgery dilakukan. Sekali lagi, taruhan terbaik Anda adalah menggunakan kerangka kerja AJAX seperti jQuery.

Satu pertimbangan tambahan: ini hanya akan berfungsi selama foo.txt ada di domain yang sama. Jika berada di domain yang berbeda, kebijakan keamanan asal-sama akan mencegah Anda membaca hasilnya.

di sini adalah bagaimana saya melakukannya di jquery:

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

Pembaruan 2019: Menggunakan Ambil:

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

Jika Anda hanya menginginkan string konstan dari file teks, Anda dapat memasukkannya sebagai 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>

String yang dimuat dari file menjadi dapat diakses oleh JavaScript setelah dimuat. Karakter `(backtick) memulai dan mengakhiri literal templat , memungkinkan karakter" dan 'di blok teks Anda.

Pendekatan ini berfungsi dengan baik ketika Anda mencoba memuat file secara lokal, karena Chrome tidak akan mengizinkan AJAX pada URL dengan file://skema tersebut.

Satu hal yang perlu diingat adalah bahwa Javascript berjalan pada klien, dan bukan pada server. Anda tidak dapat "memuat file" dari server dalam Javascript. Apa yang terjadi adalah Javascript mengirimkan permintaan ke server, dan server mengirim kembali konten file yang diminta. Bagaimana Javascript menerima konten? Itulah gunanya fungsi callback. Dalam kasus Edward, itu

    client.onreadystatechange = function() {

dan dalam kasus danb, itu

 function(data) {

Fungsi ini dipanggil setiap kali data tiba. Versi jQuery secara implisit menggunakan Ajax, itu hanya membuat pengkodean lebih mudah dengan merangkum kode itu di perpustakaan.

Pembaruan 2020: Menggunakan Ambil dengan async / tunggu

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

Perhatikan bahwa awaithanya dapat digunakan dalam suatu asyncfungsi. Contoh yang lebih panjang mungkin

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

Ini seharusnya bekerja di hampir semua browser:

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

Selain itu, ada FetchAPI baru :

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

Saat bekerja dengan jQuery, alih-alih menggunakan jQuery.get, mis

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

Anda bisa menggunakan .loadyang memberi Anda bentuk yang jauh lebih kental:

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

.loadmemberi Anda juga opsi untuk memuat sebagian halaman yang dapat berguna, lihat api.jquery.com/load/ .

Jika input Anda terstruktur sebagai XML, Anda dapat menggunakan importXMLfungsi ini. (Info lebih lanjut di sini di quirksmode ).

Jika bukan XML, dan tidak ada fungsi yang setara untuk mengimpor teks biasa, maka Anda bisa membukanya dalam iframe tersembunyi dan kemudian membaca konten dari sana.