Чтение бокового файла сервера с помощью Javascript

Кто-нибудь знает о том, как читать данные из файла на стороне сервера с помощью JS? Кажется, я не могу найти какие-либо темы по этому поводу, когда я это сделаю. Я пытался использовать, но он, похоже, не работает. Я просто хочу прочитать некоторые данные из файла для отображения на странице. Возможно ли это?

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

Ответ 1

Для этого вам нужно будет извлечь файл с сервера с помощью метода AJAX.

Я бы рассмотрел библиотеки JavaScript, такие как Mootools и jQuery. Они делают AJAX очень простым.

<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>

Если вы загрузите это в каталог, на котором test.csv находится на вашем веб-сервере и загрузите страницу, вы должны увидеть, что содержимое test.csv отображается в определенном текстовом поле.

Ответ 2

Вам нужно использовать AJAX. С помощью библиотеки jQuery код может выглядеть так:

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

или если вы не хотите использовать библиотеки, используйте необработанный объект XMLHTTPRequest (но у вас есть разные имена в разных браузерах

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 появился новый fetch api, вы можете использовать его следующим образом:

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);
});

поддержка довольно хорошая, если вам нужно поддерживать браузер, который не поддерживает API-интерфейс Fetch, вы можете использовать polyfill, чтобы github создан