Open a text file from server on the Client-side using Javascript

No matter how much I look this up all I get is the w3C File API which focuses on local files for the client.

无论我看到多少,我得到的是w3C File API,它专注于客户端的本地文件。

What I'm trying to do is I have a server. I'm trying to use client-side javascript to grab the server hosted text file, a.txt, and display it to the innerDOM of an html page. My server directory look like this:

我想要做的是我有一台服务器。我正在尝试使用客户端javascript来获取服务器托管的文本文件a.txt,并将其显示到html页面的innerDOM。我的服务器目录如下所示:

index.html
read.js
text files
- a.txt

文本文件a.txt

All I want to have happen is for, on the client side, the javascript read.js running in the index.html on onload to display the contents of a.txt. I figure that since a.txt will never be large, leaving it to the client is fine. But I can't figure out how to do this and the W3C File API isn't offering me answers.

我想要发生的只是在客户端,在onload上的index.html中运行的javascript read.js来显示a.txt的内容。我认为,因为a.txt永远不会很大,所以把它留给客户端就好了。但我无法弄清楚如何做到这一点,W3C File API没有给我答案。

If I had to guess, somehow making sure index.html loads a.txt and then grabbing that via the file API might be the way to go but I'm not sure how to do that.

如果我不得不猜测,以某种方式确保index.html加载a.txt然后通过文件API获取它可能是要走的路,但我不知道该怎么做。

And I'll admit it, I'm a bit of a noob. If I'm invalidating browser sandbox or doing something impossible, please tell me. I just thought this would be so simple.

我承认,我有点像菜鸟。如果我使浏览器沙箱无效或做不可能的事情,请告诉我。我只是觉得这会很简单。

Also, I'd appreciate that if you were going to suggest AJAX, either don't, or explain it like I'm a baby because I really don't know.

此外,我很感激,如果你要建议AJAX,要么不要,或者解释它,就像我是一个婴儿,因为我真的不知道。

Thank you all so much for your help.

非常感谢你的帮助。

4 个解决方案

#1

Why file API is irrelevant:

为什么文件API无关紧要:

Web applications should have the ability to manipulate as wide as possible a range of user input, including files that a user may wish to upload to a remote server or manipulate inside a rich web application.

Web应用程序应该能够尽可能广泛地操作一系列用户输入,包括用户可能希望上载到远程服务器或在富Web应用程序内操作的文件。

From W3C File API.

来自W3C File API。

So, File API is intended to be used to allow users to upload files from their clients into the server. On the other hand, AJAX is used to allow users to download files and other data from the server into their clients. And this is exactly what you need.

因此,File API旨在用于允许用户将文件从其客户端上载到服务器中。另一方面,AJAX用于允许用户将文件和其他数据从服务器下载到他们的客户端。这正是你所需要的。

Refer to jQuery's ajax documentation.

请参阅jQuery的ajax文档。

#2

I believe this page should help you out with your problem. http://www.htmlgoodies.com/beyond/javascript/read-text-files-using-the-javascript-filereader.html#fbid=YhNukIHynD3

我相信这个页面可以帮助您解决问题。 http://www.htmlgoodies.com/beyond/javascript/read-text-files-using-the-javascript-filereader.html#fbid=YhNukIHynD3

#3

I would suggest using an Ajax call to the file on the server, since the response of the call will typically be the contents of that file. Using Jquery this can be done by a simple

我建议对服务器上的文件使用Ajax调用,因为调用的响应通常是该文件的内容。使用Jquery可以通过简单的方法完成

$.ajax({ 'url':'a.txt',
    'success': function(r){
        //display to innerDOM here, using r as the file
    });
});

#4

You simply want to display a txt file on the web page? Do you know about server side includes? That would be one possibility if you control the server. If you really want to do it in javascript, then AJAX would be the way to go. If it were me at that point I would figure out how to include and use jQuery to help with the ajax bits. You will simply request the text file via its URL (you can get it to load in the browser right?), and then use jQuery to put that text into some DOM element.

您只是想在网页上显示txt文件?你知道服务器端包括吗?如果您控制服务器,那将是一种可能性。如果你真的想用javascript来做,那么AJAX就是你要走的路。如果是我那时我会想出如何包含和使用jQuery来帮助ajax位。您只需通过其URL请求文本文件(您可以在浏览器中加载它吗?),然后使用jQuery将该文本放入某些DOM元素中。

#1