크로스도메인 문제(다른 사이트의 ajax를 호출할 수 없는 브라우저의 보안정책)를 피하기 위해 JSONP라는 대안이 있는데
angular를 이용해 간단하게 목록을 가져오는 외부 호출을 만들어보자.
http://docs.angularjs.org/api/ng.$http#jsonp
내용을 보고 참조하였다.
index.html
<!DOCTYPE html>
<html ng-app>
<head>
<title></title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script>
<script type="text/javascript" src="todo.js"></script>
</head>
<body>
<div>
<div ng-controller="listController">
<ul>
<li ng-repeat="list in lists">
{{list.author}}
</li>
</ul>
</div>
</div>
</body>
</html>
ng-app 을 설정하고 listController 에 lists 객체로부터 author 목록을 가져오게 하자.
todo.js
listController = function($scope,$http) {
angular.extend($scope,{
query:function() {
$http.jsonp('http://jsbin.com/uqamef/1?callback=JSON_CALLBACK&a=bbb').success(function(data){
$scope.lists=data;
})
}
});
$scope.query();
}
listController 에 데이터 바인딩을 위한 $scope와 ajax 호출을 위한 $http를 각각 인자로 두고
jsonp 호출 후 성공시 $scope.lists 에 결과값을 넣도록 한다.
URL은 해당 JSONP를 구현한 API URL과 "?callback=JSON_CALLBACK" 부분(중요!)
그리고 파라메터 값인 "&key=value..." 형태로 구성하여 $http.jsonp 메서드로 호출한다.
서버쪽은 오히려 간단한데
jsbin.com 같은 걸 이용해서 구현하면
html 쪽은 지우고 javascript 쪽에만 jsonp 형태의 데이터를 기술하여
http://jsbin.com/uqamef/1 처럼 테스트 데이터를 만들어 볼 수 있으며
실제 구현은 단지 res.json으로 결과를 던지면 된다.
... 전략 ...
app.get("/jsonp", function(req,res) {
console.log(req.query.callback);
console.dir(req.param("parameter name"));
var result = [
{"author":"spectrum"},
{"author":"singajong"}
];
res.json(result);
});
... 후략 ...
근데 요즘은 JSONP 잘 쓰나? 크록포드옹이 'Bad thing' 이라고도 말하기도 했고
실제로 펑션이 와리가리 하는 형태라서 보안문제도 있는데 말이지.
* 사족: 만일 express 3.0 이전버전을 사용한다면 JSONP형식이 아니라 JSON형식으로 나올 수 있다. 아래와 같이 app.configure 블록에 jsonp callback 을 사용한다고 명시하자
app.configure(function(){
app.set("jsonp callback", true);
...
});
angular를 이용해 간단하게 목록을 가져오는 외부 호출을 만들어보자.
http://docs.angularjs.org/api/ng.$http#jsonp
내용을 보고 참조하였다.
index.html
<!DOCTYPE html>
<html ng-app>
<head>
<title></title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script>
<script type="text/javascript" src="todo.js"></script>
</head>
<body>
<div>
<div ng-controller="listController">
<ul>
<li ng-repeat="list in lists">
{{list.author}}
</li>
</ul>
</div>
</div>
</body>
</html>
ng-app 을 설정하고 listController 에 lists 객체로부터 author 목록을 가져오게 하자.
todo.js
listController = function($scope,$http) {
angular.extend($scope,{
query:function() {
$http.jsonp('http://jsbin.com/uqamef/1?callback=JSON_CALLBACK&a=bbb').success(function(data){
$scope.lists=data;
})
}
});
$scope.query();
}
listController 에 데이터 바인딩을 위한 $scope와 ajax 호출을 위한 $http를 각각 인자로 두고
jsonp 호출 후 성공시 $scope.lists 에 결과값을 넣도록 한다.
URL은 해당 JSONP를 구현한 API URL과 "?callback=JSON_CALLBACK" 부분(중요!)
그리고 파라메터 값인 "&key=value..." 형태로 구성하여 $http.jsonp 메서드로 호출한다.
서버쪽은 오히려 간단한데
jsbin.com 같은 걸 이용해서 구현하면
html 쪽은 지우고 javascript 쪽에만 jsonp 형태의 데이터를 기술하여
http://jsbin.com/uqamef/1 처럼 테스트 데이터를 만들어 볼 수 있으며
실제 구현은 단지 res.json으로 결과를 던지면 된다.
... 전략 ...
app.get("/jsonp", function(req,res) {
console.log(req.query.callback);
console.dir(req.param("parameter name"));
var result = [
{"author":"spectrum"},
{"author":"singajong"}
];
res.json(result);
});
... 후략 ...
근데 요즘은 JSONP 잘 쓰나? 크록포드옹이 'Bad thing' 이라고도 말하기도 했고
실제로 펑션이 와리가리 하는 형태라서 보안문제도 있는데 말이지.
* 사족: 만일 express 3.0 이전버전을 사용한다면 JSONP형식이 아니라 JSON형식으로 나올 수 있다. 아래와 같이 app.configure 블록에 jsonp callback 을 사용한다고 명시하자
app.configure(function(){
app.set("jsonp callback", true);
...
});
댓글
댓글 쓰기