reading server file with javascript

Question

I have a html page using javascript that gives the user the option to read and use his own text files from his PC. But I want to have an example file on the server that the user can open via a click on a button. I have no idea what is the best way to open a server file. I googled a bit. (I'm new to html and javascript, so maybe my understanding of the following is incorrect!). I found that javascript is client based and it is not very straightforward to open a server file. It looks like it is easiest to use an iframe (?). So I'm trying (first test is simply to open it onload of the webpage) the following. With kgr.bss on the same directory on the server as my html page:

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

and (with file_inhoud, 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");
}

Debug function shows:

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

So statement that stops the program is:

var file_inhoud=doc.document.body;

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

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

Thanks!

Answer 1

Your best bet, since the file is on your server is to retrieve it via "ajax". This stands for Asynchronous JavaScript And XML, but the XML part is completely optional, it can be used with all sorts of content types (including plain text). (For that matter, the asynchronous part is optional as well, but it's best to stick with that.)

Here's a basic example of requesting 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'd call that 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 would work with modern browsers, but not some older ones, where you have to work around some issues.

Update: You said in a comment below that you're using jQuery. If so, you can use its ajax function and get the benefit of jQuery's 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...

No. This 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 developed for server-side use.

These days, the most common use (and your use-case) is indeed in web browsers, client-side, but JavaScript is not limited to the client in the general case. And it's having a major resurgence on the server and elsewhere, in fact.

Answer 2

The usual way to retrieve 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 however is that it has traditionally not been possible to use javascript to access the client file system. However, the new HTML5 file API is changing this. You can read up on it here.