Ajaxのデータの送受信のXMLHttpRequestオブジェクトについて

いつもお世話になっております。
Ajaxのデータの送受信のXMLHttpRequestオブジェクトについて質問があります。
XMLHttpRequestオブジェクトを用いて、デスクトップのメモを表示させたいと考えていますが、
結果がundefinedが出てしまいます。
下記がソースになっています。

Javascript
1//Ajaxでimgファイル取得
2window.onload=function(){
3	//XMLHttpRequestオブジェクトを生成
4	var req =new XMLHttpRequest();
5	//サーバとの通信時の処理方法を登録
6	req.onreadystatechange =function(){
7		if(req.readyState ==4){
8			console.log("req.readyStateの値"+req.readyState);
9		if(req.status==200){
10			console.log("req.statusの値"+req.status);
11		document.getElementById("view").innerHTML =req.respomseText;
12		}	
13		}
14	    };
15	    //リクエストを送信して、通信を開始
16	    req.open("GET","test.txt");
17	    req.send(null);
18	    
19        };

html
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4<title>top page</title>
5<meta http-equiv="Content-Type"
6content="text/html" charset="UTF-8"/>
7
8<!-- css -->
9
10<style>
11    html { height: 100% }
12    body { height: 100%; margin: 0; padding: 0 }
13</style>
14</head>
15<body>
16<table>
17<tr>
18<td><input type="button" value="1"></input></td>
19<td><input type="button" value="2"></input></td>
20<td><input type="button" value="3"></input></td>
21</tr>
22<tr>
23<td><input type="button" value="4"></input></td>
24<td><input type="button" value="5"></input></td>
25<td><input type="button" value="6"></input></td>
26</tr>
27<td><input type="button" value="7"></input></td>
28<td><input type="button" value="8"></input></td>
29<td><input type="button" value="9"></input></td>
30</table>
31<p id="view"></p>
32<script type="text/javascript" src="js/open_img.js" th:src="@{/js/open_img.js}"></script>
33</body>
34</html>

req.open("GET","test.txt")の箇所で上手く処理ができていません。
Ajaxのデータの送受信のXMLHttpRequestオブジェクトを用いて
デスクトップのメモを表示させたい場合、どのようにしてパスを設定すればいいでしょうか？
以上、宜しくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

javascriptが利用できるローカルファイルは、<input type='file'>で選択する、またはドラッグ&ドロップしたような、ユーザが能動的に選択したファイルだけです。
セキュリティ的な理由により、スクリプトが指定したローカルファイルの自動的な読み込みは不可能になっています。

もしスクリプトで指定されたローカルファイルが読み込み可能なら、どうなってしまうのか。
「悪意のあるサイトを訪問したら、デスクトップ上にあるuser.txt,password.txtのような個人情報が入ってそうなファイルが自動的に読み込まれサーバ内に保存されて悪用された」ということが起きるでしょう。

サーバ上のスクリプトがローカルファイルを読めるのはNGだとしても、ローカルで動くスクリプトなら、ローカルファイルにアクセスできてもいいじゃん、と思いましたか？
その場合はこうなります。
悪意のあるサイトを訪問したらいつのまにか「あの伝説のロリ動画が….html」というファイルをDLしていた。なんだこれ？とダブルクリックしたら後の祭り。ローカルスクリプトはローカルファイルにアクセスできるからデスクトップ上にあるuser.txt(以下同文)...ということが起きるわけです。

そういうわけで、ローカルファイルはユーザが能動的に選んだものしか扱えないというのが、javascriptにおけるセキュリティの線引になっているわけです。

投稿2017/07/17 04:42