angularJS_http
[AngularJS] 非同期で外部データを受け取る
AngularJSの「$http」を使用することで、外部テキストを取得できます。このデータ自身はサーバー上のPHPから出力するものでもいいですし、サーバーに配置したテキストファイルでもOKです。
外部テキストファイルを「test.txt」、htmlファイル自身を「index.html」とします。
注意事項 (IEのみ)
本件検証していたところ、IEでローカルでのブラウザ実行時のみ、$httpのアクセスは失敗するようでした。
IEでのサーバー（http）での実行、FireFox/Chrome/Safariでのサーバー/ローカル実行時は正常に動作することを確認。
例
外部データ（ファイル）test.txtの内容
Hello External Text!!
index.html
<html ng-app>
<head>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>
<title>データ渡しのテスト</title>
<script type="text/javascript">
<!--
function myController($scope, $http) {
$scope.info_message = "";
$scope.dataSend = function() {
$scope.info_message = "";
$http({method: 'GET', url: './test.txt'}).
success(function(data, status, headers, config) { // データの取得が成功した場合
$scope.info_message = data;
}).
error(function(data, status, headers, config) { // データの取得が失敗した場合
$scope.info_message = "error : status = " + status;
});
}
}
//-->
</script>
</head>
<body>
<h3>データ渡しのテスト</h3>
<hr/>
<div ng-controller="myController">
info : {{info_message}}<br>
<form>
<input type="button" value="データ受信" ng-click="dataSend()" />
</form>
</div>
<hr>
</body>
</html>
index.htmlをWebブラウザで読み込んで「データ受信」ボタンを押すと、Hello External Text!! と表示されます。
JavaScriptの「myController」関数内の$scope.dataSendに、ボタンが押された場合の処理を記述。
$http({method: 'GET', url: './test.txt'}).
success(function(data, status, headers, config) { // データの取得が成功した場合
$scope.info_message = data;
}).
error(function(data, status, headers, config) { // データの取得が失敗した場合
$scope.info_message = "error : status = " + status;
});
が非同期でファイル読み込みを行う箇所になります。
途中。。。
最終更新時間：2014年07月13日 13時25分32秒
Future's Laboratory 技術格納庫 2004-2013 Yutaka Yoshisaka.