Read A Server Side File Using JavaScript

Question

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

> Root
index.html
read.js
> files
    file.txt


        

Answer 1

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

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>
<script>
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById('placeholder').innerHTML = xhr.responseText;
        }
    }
    xhr.open('GET', 'test.html');
    xhr.send();
</script>

Answer 2

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.

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).

Answer 3

This is a very simple task if you are using JQuery - The below example will perform an HTTP GET request (using XMLHttpRequest.as 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." );
});

Answer 4

What you're looking for is XMLHttpRequest.

Answer 5

Here's a sample web page for you:

http://sealevel.info/test_file_read.html

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 http://sealevel.info/Chuuk1_data.json, 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 "xyz.com" & "www.xyz.com" don't match).
// Otherwise Chrome reports an error:
//
//   No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://sealevel.info' 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
// http://www.webconfs.com/http-header-check.php to check it). I think it's a Chrome bug.
function loadFile(filePath) {
  var result = null;
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", filePath, false);
  xmlhttp.send();
  if (xmlhttp.status==200) {
    result = xmlhttp.responseText;
  }
  return result;
}