Geek Answers Handbook

Reading server file using javascript

I have a html page using javascript that gives the user the ability to read and use their text files from their PC. But I want to have an example file on the server that the user can open by clicking the button. I do not know how best to open the server file. I ruined a little. (I am new to html and javascript, so maybe my understanding of the following is wrong!). I found that javascript is client based and opening a server file is not so simple. It seems like the easiest way to use iframe (?). So I try (the first test is to just open it when the webpage loads). With kgr.bss in the same directory on the server as my html page:

<IFRAME SRC="kgr.bss" ID="myframe" onLoad="readFile();"> </IFRAME>

and (with inhoud_file, lines defined elsewhere)

 function readFile() { func="readFile="; debug2("0"); var x=document.getElementById("myframe"); debug2("1"); var doc = x.contentDocument ? x.contentDocument : (x.contentWindow.document || x.document); debug2("1a"+doc); var file_inhoud=doc.document.body; debug2("2:"); lines = file_inhoud.split("\n"); debug2("3"); fileloaded(); debug2("4"); }

The debug function shows:

 readFile=0//readFile=1//readFile=1a[object HTMLDocument]//

So the statement that stops the program:

 var file_inhoud=doc.document.body;

What's wrong? What is the correct (or best) way to read this file?

Note. I see that the file is being read and displayed in the frame.

Thanks!

+6
source share
2 answers

The usual way to get a text file (or any other server-side resource) is to use AJAX . Here is an example of how you could alert the contents of a text file:

 var xhr; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.onreadystatechange = function(){alert(xhr.responseText);}; xhr.open("GET","kgr.bss"); //assuming kgr.bss is plaintext xhr.send();

The problem with your ultimate goal is that it was traditionally impossible to use javascript to access the client file system. However, the new HTML5 API changes this. You can read on it here .

+3
source

Best of all, since the file on your server should receive it through "ajax". This means asynchronous JavaScript and XML, but part of XML is completely optional, it can be used with all types of content (including plain text). (In this respect, the asynchronous part is also optional, but it is best to stick with it.)

Here is a basic example of querying text file data using ajax:

 function getFileFromServer(url, doneCallback) { var xhr; xhr = new XMLHttpRequest(); xhr.onreadystatechange = handleStateChange; xhr.open("GET", url, true); xhr.send(); function handleStateChange() { if (xhr.readyState === 4) { doneCallback(xhr.status == 200 ? xhr.responseText : null); } } }

You would call it like this:

 getFileFromServer("path/to/file", function(text) { if (text === null) { // An error occurred } else { // `text` is the file text } });

However, the above is somewhat simplified. It will work with modern browsers, but not with some older ones, where you will have to solve some problems.

Update . You said in a comment below that you are using jQuery. If so, you can use the ajax function and take advantage of jQuery workarounds for some browser inconsistencies:

 $.ajax({ type: "GET", url: "path/to/file", success: function(text) { // `text` is the file text }, error: function() { // An error occurred } });

Side note:

I found that javascript is client based ...

Not. It is a myth. JavaScript is just a programming language. It can be used in browsers, on servers, on your workstation, etc. In fact, JavaScript was originally designed for server-side use.

These days, the most common use (and your use case) is for web browsers, client-side, but JavaScript is not limited to the client in the general case. And actually it has a serious resurgence on the server and elsewhere.

+17
source

More articles:


All Articles