Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript

Reading Server Side File With Javascript

Post a Comment
Does anyone know of a tutorial on how to read data from a server side file with JS? I cant seem to find any topics on this when I google it. I tried to use but it does not seem to

Solution 1:

To achieve this, you would have to retrieve the file from the server using a method called AJAX.

I'd look into JavaScript libraries such as Mootools and jQuery. They make AJAX very simple use.

<html><head><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.min.js"></script><scripttype="text/javascript">//This event is called when the DOM is fully loadedwindow.addEvent("domready",function(){
                //Creating a new AJAX request that will request 'test.csv' from the current directoryvar csvRequest = newRequest({
                    url:"test.csv",
                    onSuccess:function(response){
                        //The response text is available in the 'response' variable//Set the value of the textarea with the id 'csvResponse' to the response
                        $("csvResponse").value = response;
                    }
                }).send(); //Don't forget to send our request!
            });
        </script></head><body><textarearows="5"cols="25"id="csvResponse"></textarea></body></html>

If you upload that to the directory that test.csv resides in on your webserver and load the page, you should see the contents of test.csv appear in the textarea defined.

Solution 2:

You need to use AJAX. With jQuery library the code can look like this:

$.ajax({ url: "test.csv", success: function(file_content) {
    console.log(file_content);
  }
});

or if you don't want to use libraries use raw XMLHTTPRequest object (but you I has different names on different browsers

function xhr(){
  var xmlHttp;
  try{
    xmlHttp=new XMLHttpRequest(); 
  } catch(e) {
    try {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch(e) {
      try {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch(e) {
        alert("Your browser does not support AJAX!"); 
        return false;
      }
    }
  }
  return xmlHttp; 
}
req = xhr();
req.open("GET", "test.cvs");
req.onreadystatechange = function() {
  console.log(req.responseText);
};
req.send(null);

UPDATE 2017 there is new fetch api, you can use it like this:

fetch('test.csv').then(function(response) {
    if (response.status !== 200) {
        throw response.status;
    }
    return response.text();
}).then(function(file_content) {
    console.log(file_content);
}).catch(function(status) {
    console.log('Error ' + status);
});

the support is pretty good if you need to support browser that don't support fetch API you can use polyfill that github created

Post a Comment for "Reading Server Side File With Javascript"