javascriptでサーバーファイルを読み取る

Question

私は自分のPCから自分のテキストファイルを読み込んで使用するためのjavascriptを使用したhtmlページを用意しています。しかし、ユーザーがボタンをクリックすることで開くことができるサーバー上のサンプルファイルが必要です。 サーバーファイルを開く最も良い方法は何もわかりません。私は少しgoogled。 （私は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; 

どうしたの？このファイルを読む正しい（または最良の）方法は何ですか？

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

ありがとうございます！

Answer 1

通常、テキストファイル（または他のサーバー側のリソース）を取得するには、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がこれを変えています。あなたはそれをhereで読むことができます。

Answer 2

あなたの最善の策は、ファイルがあなたのサーバー上にあるので、 "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 functionを使用して、いくつかのブラウザの不整合のための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は一般的な場合にはクライアントに限定されません。実際には、サーバーやその他の場所で大きな復活を遂げています。