206

I have a text file in the root of my web app http://localhost/foo.txt and I'd like to load it into a variable in javascript.. in groovy I would do this:

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

How can I get a similar result in javascript?

9 Answers 9

165

XMLHttpRequest, i.e. AJAX, without the XML.

The precise manner you do this is dependent on what JavaScript framework you're using, but if we disregard interoperability issues, your code will look something like:

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

Normally speaking, though, XMLHttpRequest isn't available on all platforms, so some fudgery is done. Once again, your best bet is to use an AJAX framework like jQuery.

One extra consideration: this will only work as long as foo.txt is on the same domain. If it's on a different domain, same-origin security policies will prevent you from reading the result.

9
  • 1
    A workaround for the same-origin policy is using JSONP that also is supported by jQuery (for the client side part)
    – OneWorld
    Jul 29, 2012 at 17:19
  • 6
    it might be usefull to add that, inside onreadystatechange, you can access the readystate property of the XMLHttpRequest Object (in the example : client.readystate ) to know what is the status, since the onreadystatechange event is raised for loading, loaded, .... so you must wait for client.readystate == 4 inside onreadystatechange before you can use client.responseText. Oct 19, 2012 at 21:52
  • 3
    @GameAlchemist: stumbled upon your great answer. I just wanted to note that in most browsers readyState is camel cased, so the code should be something like this: if (client.readyState === 4){ }
    – snorpey
    Nov 23, 2013 at 16:55
  • 9
    Additionally you can do client.onloadend and just get the completed data
    – worbel
    Jun 30, 2014 at 4:53
  • 3
    The answer should be redacted to include checking for the client.readyState property value. I am downvoting it until it is, people are not going to read the comments to discover the answer is only partially right. Feb 1, 2015 at 20:51
89

here is how I did it in jquery:

jQuery.get('http://localhost/foo.txt', function(data) {
    alert(data);
});
8
  • that doesn't seem to work with plain tabular text data (docs.jquery.com/Specifying_the_Data_Type_for_AJAX_Requests)
    – pufferfish
    Jan 9, 2012 at 14:49
  • 9
    Notice that this does not work if you're testing it locally using file:// i.e.: file:///example.com/foo.html. Firefox complains of a syntax error and Chrome blocks because it considers it as a Cross-Origin request.
    – Akronix
    Aug 28, 2015 at 17:26
  • @pufferfish it'll work with plain data if you specify the dataType parameter, see api.jquery.com/jQuery.get/
    – yvesonline
    Dec 27, 2015 at 3:06
  • 3
    @Akronix if you leave out the http://... part, because it lives on the same domain, it'll work, e.g. jQuery.get("foo.txt", ...).
    – yvesonline
    Dec 27, 2015 at 3:09
  • @Akronix Is there an easy way to test it locally? I keep getting Cross-origin request errors
    – ahuff44
    Feb 5, 2016 at 22:54
88

Update 2019: Using 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

7
  • 4
    Yes Fetch is a (recent) standard, not a proprietary extension. Feb 4, 2019 at 10:18
  • 2
    It's 2019, and fetch is a thing of beauty. This is THE way for all modern browsers, including Samsung Internet, which just caught up… Apr 18, 2019 at 15:21
  • A compact and working code, Vic, thanks you. In order to achieve error handling, would it be possible to put some response.ok (or equivalent) somewhere in your code? I am not very experienced on fetch, so I don't know the exact place to set it. Dec 2, 2019 at 19:05
  • Great solution. This was super easy even for a complete beginner. Stored in variable instead of console.log in last step, now can use anywhere. May 1, 2020 at 21:53
  • 1
    Inside an async function, you can do const text = await fetch(url).then($ => $.text()) to flatten out the callback.
    – Carl Smith
    Aug 10, 2020 at 2:02
43

If you only want a constant string from the text file, you could include it as 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>

The string loaded from the file becomes accessible to JavaScript after being loaded. The `(backtick) character begins and ends a template literal, allowing for both " and ' characters in your text block.

This approach works well when you're attempting to load a file locally, as Chrome will not allow AJAX on URLs with the file:// scheme.

2
  • 1
    This would be a really slick solution. But template literal is not supported in IE11 and the "let" variable would be out of scope when inside a function block, so this implementation is fraught with peril - beware.
    – Neville
    Jan 26, 2018 at 16:59
  • 1
    At this point even Microsoft is about to retire IE, and scope can be simplified by making it a function that returns the string instead of setting a variable using 'let' Jan 14, 2021 at 17:45
22

Update 2020: Using Fetch with async/await

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

Note that await can only be used in an async function. A longer example might be

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

4
  • 1
    Well, its all fine except the fact that the origin requires to have cors, which isn't necessarily enabled or suitable for a lot of them. Aug 21, 2021 at 10:00
  • 1
    That's like saying Q: "how do you take money out of a bank" A: "Go into the bank and write a check for cash". You: "That's all fine except if I want to take money from someone else's account that requires a power of attorney but I don't have one for most accounts". CORS is there for a reason. It's up to the server to decide if you have permission to read the resource or not.
    – gman
    Aug 21, 2021 at 10:14
  • Yup. However AJAX is better for the sake of non-cors origins. Aug 21, 2021 at 10:53
  • 1
    XMLHttpRequest has the same restrictions
    – gman
    Aug 22, 2021 at 18:55
8

This should work in almost all browsers:

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

Additionally, there's the new Fetch API:

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

One thing to keep in mind is that Javascript runs on the client, and not on the server. You can't really "load a file" from the server in Javascript. What happens is that Javascript sends a request to the server, and the server sends back the contents of the requested file. How does Javascript receive the contents? That's what the callback function is for. In Edward's case, that is

    client.onreadystatechange = function() {

and in danb's case, it is

 function(data) {

This function is called whenever the data happen to arrive. The jQuery version implicitly uses Ajax, it just makes the coding easier by encapsulating that code in the library.

2

When working with jQuery, instead of using jQuery.get, e.g.

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

you could use .load which gives you a much more condensed form:

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

.load gives you also the option to load partial pages which can come in handy, see api.jquery.com/load/.

1
<!DOCTYPE html> <html> <body id="ibody">
<script>

fetch('http://localhost/myFolder/myFile.txt')
.then(response => response.text())
.then((data) => {ibody.innerHTML= data})

// data is the variable you want

</script> </body>  </html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.