Reading Server Side file with Javascript_问答_开发者

Reading Server Side file with Javascript

开发者 https://www.devze.com 2023-01-12 21:05 出处：网络

相关专题：javascript

Does anyone know of a tutorial o开发者_运维技巧n 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 work. I just want to read some data from a file to display on the page. Is this even possible?

var CSVfile = new File("test.csv");
var result = CVSfile.open("r");
var test = result.readln();

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>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.min.js"></script>
        <script type="text/javascript">
            //This event is called when the DOM is fully loaded
            window.addEvent("domready",function(){
                //Creating a new AJAX request that will request 'test.csv' from the current directory
                var csvRequest = new Request({
                    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>
        <textarea rows="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.

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