!!![AngularJS] [JavaScript] 外部テキストファイルの読み込み 非同期で外部テキストを読み込む処理は、 「[[$httpを使った非同期読み込み|angularJS_http]]」を行うほうがスマートかもしれません。 ここでは、外部で用意したテキストファイルをJavaScriptで読み込む例を記載します。 fileReadTest.html <== ここでJavaScriptを記述するとする hello.txt <== 「Hello!!」とだけ記載されているテキストファイル のようにした場合、fileReadTest.htmlのJavaScript部では // ブラウザがIEか判定. function checkBrowserIE() { var userAgent = window.navigator.userAgent.toLowerCase(); if (userAgent.indexOf('msie') != -1) { return true; } else if (userAgent.indexOf('trident/7') != -1) { return true; } return false; } function readFileToString(fileName) { // ファイル読み込み用. var xmlHttp; if (checkBrowserIE()) { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else { xmlHttp = null; } if (xmlHttp == null) return ""; // fileNameのテキストファイルを読み込み(同期). var str = ""; try { xmlHttp.open("GET", fileName, false); xmlHttp.send(null); str = xmlHttp.responseText; } catch(e) { window.alert(e); } return str; } IEとその他のブラウザで取得方向が少し異なります。 ブラウザの判定は「[[ブラウザの種類を判定|angularJS_javascript_browser]]」を参照。 IEの場合は「xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");」で取得したものよりファイル読み込みをしないと「xmlHttp.open」で「アクセスが拒否されました」となりました。 それ以外では「XMLHttpRequest」でOK。 であるので、IEとその他のブラウザで処理を変えてます。 xmlHttp.open("GET", fileName, false); xmlHttp.send(null); str = xmlHttp.responseText; で、fileNameに指定されたテキストファイルを読み込みます。 openの第二引数がファイル名、第三引数がfalseの場合は同期での取得(ファイルが読み込まれるまで待つ)。 sendを呼ぶとファイル読み込みを開始。xmlHttp.responseTextに結果のテキストが返されます。 var str = readFileToString('./hello.txt'); のようにしてファイルのテキストを取得できます。 非同期での読み込みは、 xmlHttp.onreadystatechange = function() { // xmlHttp.readyStateが4の場合は読み込み完了. // http以外の場合は、xmlHttp.statusが0になる. if (xmlHttp.readyState == 4 && (xmlHttp.status == 200 || xmlHttp.status == 0)) { window.alert(xmlHttp.responseText); } } のような記述をopenよりも前で記載し、openの第三引数はtrueにします。 xmlHttp.open("GET", fileName, true); xmlHttp.send(null); send後はすぐに次の処理に移行します。onreadystatechangeで指定した関数内にて、ファイルの読み込みが完了次第情報が返ります。 ---- {{lastmodified}}