- 締切済み
javascriptでサーバー内のファイルの読込
いつもお世話になります。 javascriptでローカルフォルダにあるファイルの読み書きにはFileApiがありますが、サーバーにある、例えばテキストファイルを、FileApiと同じように、サーバー内を参照し、選択して読み込むという方法はあるのでしょうか。 あれば教えてください。よろしくお願いいたします。
- hiderin2jp
- お礼率85% (6/7)
- JavaScript
- 回答数5
- ありがとう数7
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- Gotthold
- ベストアンサー率47% (396/832)
テキストを読みたいのなら 上の方の「テキストファイルの読み込み」を参考にした方が良かったのでは？ まあ、ファイル読み込み処理のところは同じですが。 > onClick="loadHtml('192.168.11.2/path.dat')" /> http:// が抜けてます。 あと、そのURLをブラウザのアドレスバーに直接入力したときに 読み込めることは確認してますよね？ > if ( (httpObj.readyState == 4) && (httpObj.status == 200) ){ 成功したときしか処理がないので デバッグとしては以下のようにelseを入れて失敗していないか確認してみるとかでしょうか。 if ( (httpObj.readyState == 4) && (httpObj.status == 200) ){ alert(httpObj.responseText); }else{ alert("readyState="+httpObj.readyState+", status="+httpObj.status); } > var out = "<html>"; > out += "</html>"; > document.getElementById("out").innerHTML = out; これは参考にしたページで元からそうなっていたようですが、 div要素の中にinnerHTMLでHTML要素を入れるのはおかしいですね。 XMLHttpRequest とか Ajax で検索すれば いろいろ情報が出てくるはずですので、 他のサイトも参考にしてみてください。
- Gotthold
- ベストアンサー率47% (396/832)
> http://home.a00.itscom.net/hatada/js-tips/loadserverfile.html > ただ、ここにあるHTMLファイルの内容を見ても、 > サーバーサイドでどのようなプログラムが動いているのか分かりません。 そのページのサンプルの場合、 サーバーサイドでプログラムは動いていません。 ただテキストファイルが置いてあるだけです。 サーバーが静的にファイルの内容を送ってくる場合でも、 サーバーサイドプログラムの動的な処理結果を送ってくる場合でも、 クライアントから見ればデータが送られてきているのは同じで区別できないので 動的でも静的でもクライアント側でやることは基本同じです。
お礼
ご回答ありがとうございます。 失礼とは思いながらも、上記リンクからloadHtml.js.htmlのコードをコピーさせていただきました。このファイルのみでサーバー内のテキストファイルが参照できるということですね。 私は現在自分のパソコンにXAMPPをインストールし、テスト環境を作っております。 サーバー名のところをいろいろ変えてやってみるのですが、うまく動きません。 <html> <head><title>サーバー上のテキストファイルを読み込む</title> </head> <body> <script type="text/javascript"> function loadHtml(fileName){ httpObj = new XMLHttpRequest(); httpObj.open('GET',fileName+"?"+(new Date()).getTime(),true); // ?以降はキャッシュされたファイルではなく、毎回読み込むためのもの httpObj.send(null); httpObj.onreadystatechange = function(){ if ( (httpObj.readyState == 4) && (httpObj.status == 200) ){ paths = httpObj.responseText.split("\r\n"); var out = "<html>"; for (n = 0; n < paths.length; n++) { out += "<a href='192.168.11.2/" + paths[n] + "'>" + paths[n] + "</a><br>\n"; } out += "</html>"; document.getElementById("out").innerHTML = out; } } } </script> <input type="button" value="ファイル読み込み" onClick="loadHtml('192.168.11.2/path.dat')" /> <input type="button" value="クリア" onClick="document.getElementById('out').innerHTML='';" /> <br> <div id="out"></div> </body> </html> 「'192.168.11.2/」の部分（２カ所あります）には、上記のリンク先ではおそらくそのサーバー名が入っていたので、現在の自分のパソコンのIPアドレスを入れたというわけです。 このサーバー名がおかしいのでしょうか。 初歩的な質問かもしれず、たいへん申し訳ないのですが、ご教授いただけると幸いです。 どうかよろしくお願いいたします。
- sanzero
- ベストアンサー率56% (58/102)
その例をもってして何をしたいのかがわからんですが、 サーバー内のファイルの一覧となるlist.htmlをアップロードします。 list.htmlには選択したい何かをリストアップします。 http://qiita.com/Cside/items/7225c3378c6b9ecbcafe を参考にhttpRequestメソッドを追加します。 id="someButton"のボタンをクリックしたら下記を実行します。 var button = document.getElementById('someButton'); button.addEventListner('click', function(){ httpRequest( 'list.htmlへのURL' , { type: 'get', success: function(htmldata){ // list.htmlの内容がhtmldataで取れるのでhtml内に書き出す } }); }; こんな感じではないでしょうか。
お礼
お礼が遅れて申し訳ありません。現在試行中です。うまくいきましたら改めてお礼させていただきます。
- sanzero
- ベストアンサー率56% (58/102)
具体的に何をされたいのでしょう？ (ajaxを使う場合、サーバの設定をきちんとしないと、同じドメインでないととって来れない)
補足
コメントありがとうございます。 FileApiの場合、「ファイルのアップロード」ウィンドウが開き、ローカルフォルダを参照できますよね。そこで目的のテキストファイルを選び「開く」をクリックすればページにテキストの内容を表示するということができます。それと同様なことを、サーバー内のテキストファイルでもやりたいのです。 私のやりたいことをほぼ実現しているHPのURLは次の通りです。 http://home.a00.itscom.net/hatada/js-tips/loadserverfile.html ただ、ここにあるHTMLファイルの内容を見ても、サーバーサイドでどのようなプログラムが動いているのか分かりません。 そのあたりについてご教授いただけると幸いです。 どうかよろしくお願いいたします。
- sanzero
- ベストアンサー率56% (58/102)
ajaxで取れます。 http://ghweb.info/post-2976.html
お礼
早速のご回答ありがとうございます。 ただ、私の今のレベルでは、ご紹介のサイトを見ても全く意味が理解できません。 jqueryも使用したことがないので、できればjqueryを使わない、もう少し基本的なサイトをご紹介していただけたら幸いです。 よろしくお願いいたします。
お礼
くわしく説明していただき、ありがとうございました。もう一度自分でやってみます。成功しましたらまた改めてお礼させていただきます。