Read A Server Side File Using JavaScript

I have on my web server a JS script that I want to be able to read files.
My filesystem is like this:

> Root
> files

In this example, the file “file.txt” will contain the simple word “Hello”

With JavaScript, I wish to be able to make a function, for example:

function read (path) {
    //Stuff to read the file with specified path
    var content = //whatever the content is
    return content;

And then be able to call it with:

var file = read("/files/file.txt")

And then when I do


It will pop up with/alert you with “Hello”, the content of file.txt.

Is there any way that I would be able to do this?

Here’s a sample web page for you:

Here’s the javascript code:

// Synchronously read a text file from the web server with Ajax
// The filePath is relative to the web page folder.
// Example:   myStuff = loadFile("Chuuk_data.txt");
// You can also pass a full URL, like, but there
// might be Access-Control-Allow-Origin issues. I found it works okay in Firefox, Edge,
// or Opera, and works in IE 11 if the server is configured properly, but in Chrome it only
// works if the domains exactly match (and note that "" & "" don't match).
// Otherwise Chrome reports an error:
//   No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access.
// That happens even when "Access-Control-Allow-Origin *" is configured in .htaccess,
// and even though I verified the headers returned (you can use a header-checker site like
// to check it). I think it's a Chrome bug.
function loadFile(filePath) {
  var result = null;
  var xmlhttp = new XMLHttpRequest();"GET", filePath, false);
  if (xmlhttp.status==200) {
    result = xmlhttp.responseText;
  return result;

You want to be using XMLHttpRequest, like Gabriel has suggested.

Read More:   How to check for an undefined or null variable in JavaScript?

You seriously need to read up on it, since it is very configurable and you need to understand the workflow in order to implement it. You will run into problems initially, if you are cross origin scripting.

Here is an example I mocked up for you:

<span id="placeholder"></span>
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById('placeholder').innerHTML = xhr.responseText;
    }'GET', 'test.html');

This is a very simple task if you are using JQuery – The below example will perform an HTTP GET request (using referenced above) and will put the contents into an HTML DOM object with the ID of “result”. It will also throw an alert box up once the load is completed.

$( "#result" ).load( "files/file.txt", function() {
  alert( "Load was performed." );

What you’re looking for is XMLHttpRequest.

It’s not as simple as it sounds and you are going to have to do some research on server vs client.

You cannot read server side data through Javascript unless you have a connection to the server. Whatever Javascript code that runs on the client’s browser will remain on their browser only, even if both are ran on the same computer. What you need is a way to make the client (in this case, the html+javascript website) communicate with the server.

There are endless ways to do this but the most simple is through a GET request to a server that is serving that text file.

Read More:   jQuery or JavaScript: get MIME type of client file

Try looking into serving static files with NGINX or maybe something like NodeJS, depending on what meets your needs. From there, create a GET endpoint that your Javascript is going to connect to through an XMLHttpRequest (like @MattW. said).

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts