Geek Answers Handbook

Reading a server-side file using JavaScript

I have on my web server a JS script that I want to read files. My file system looks like this:

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

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

With JavaScript, I want 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 after that you can call it with:

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

And then when I do

 alert(file)

The / alert message appears with "Hello", the contents of file.txt.

Is there any way I could do this?

+5
source share
5 answers

What are you looking for, XMLHttpRequest .

+2
source

Here is an example web page:

http://sealevel.info/test_file_read.html

Here is 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 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; }
+2
source

It is not as simple as it seems, and you will have to do some research on the server and on the client.

You cannot read server-side data through Javascript unless you have a connection to the server. Whatever Javascript code that runs in the client browser will remain only in the browser, even if both of them run on the same computer. You need the client (in this case, the html + javascript website) to communicate with the server.

There are endless ways to do this, but the simplest is through a GET request to the server serving this text file.

Try using static files with NGINX or perhaps something like NodeJS, depending on what suits your needs. From there, create a GET endpoint from which your Javascript will connect via XMLHttpRequest (e.g. @MattW.).

0
source

This is a very simple task if you are using jQuery. In the example below, an HTTP GET request will be executed (using XMLHttpRequest.as, the link to which is given above) and will place the content in the HTML DOM object with the identifier "result". It also displays a warning window after the download is complete.

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

You want to use XMLHttpRequest , as Gabriel suggested.

You really need to read it, as it is very customizable, and you need to understand the workflow in order to implement it. You will run into problems first if you use scripts with a cross name.

Here is an example that I mocked 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>
0
source

More articles:


All Articles