7

私は、ユーザーが自分のPCから自分のテキストファイルを読んで使用するオプションを提供するjavascriptを使用したhtmlページを持っています。しかし、ユーザーがボタンをクリックして開くことができるサンプルファイルをサーバー上に置きたいと思います。サーバーファイルを開くための最良の方法がわかりません。少しググった。（私はhtmlとjavascriptに慣れていないので、次のことについての私の理解は間違っているかもしれません！）javascriptはクライアントベースであり、サーバーファイルを開くのはそれほど簡単ではないことがわかりました。iframe（？）を使用するのが最も簡単なようです。だから私は次のことを試みています（最初のテストは単にウェブページのロード時にそれを開くことです）。サーバー上の私のhtmlページと同じディレクトリにkgr.bssがある場合：

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

および（file_inhoudを使用して、他の場所で定義された行）

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

デバッグ機能は次のことを示しています。

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

したがって、プログラムを停止するステートメントは次のとおりです。

var file_inhoud=doc.document.body;

なにが問題ですか？このファイルを読み取る正しい（または最良の）方法は何ですか？

注：ファイルが読み取られ、フレームに表示されていることがわかります。

ありがとう！

4

2 に答える 2

18

ファイルはサーバー上にあるため、「ajax」を介して取得することをお勧めします。これは Asynchronous JavaScript And XML の略ですが、XML 部分は完全にオプションであり、あらゆる種類のコンテンツ タイプ (プレーン テキストを含む) で使用できます。(さらに言えば、非同期部分もオプションですが、それに固執するのが最善です。)

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

次のように呼び出します。

getFileFromServer("path/to/file", function(text) {
    if (text === null) {
        // An error occurred
    }
    else {
        // `text` is the file text
    }
});

ただし、上記はやや単純化されています。最新のブラウザーでは機能しますが、いくつかの問題を回避する必要がある古いブラウザーでは機能しません。

更新: 以下のコメントで、jQuery を使用していると述べました。その場合は、そのajax機能を使用して、ブラウザーの不一致に対する jQuery の回避策の利点を得ることができます。

$.ajax({
    type:    "GET",
    url:     "path/to/file",
    success: function(text) {
        // `text` is the file text
    },
    error:   function() {
        // An error occurred
    }
});

サイドノート：

JavaScriptはクライアントベースであることがわかりました...

いいえ、これは神話です。JavaScript は単なるプログラミング言語です。ブラウザ、サーバー、ワークステーションなどで使用できます。実際、JavaScript はもともとサーバー側で使用するために開発されました。

最近では、最も一般的な使用 (およびあなたのユースケース) は実際には Web ブラウザーのクライアント側ですが、JavaScript は一般的なケースではクライアントに限定されません。実際、サーバーやその他の場所で大きな復活を遂げています。

于 2012-11-11T09:21:54.230 に答える
6

テキスト ファイル (またはその他のサーバー側リソース) を取得する通常の方法は、AJAXを使用することです。テキスト ファイルの内容を警告する方法の例を次に示します。

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

ただし、最終的な目標の問題は、これまで javascript を使用してクライアント ファイル システムにアクセスすることができなかったことです。ただし、新しい HTML5 ファイル API はこれを変更しています。ここで読むことができます。

于 2012-11-11T09:21:10.257 に答える