Step10_jsonp.html
만들어
실행시키면
서버로 부터 특정 컨텐츠를 응답받은 웹브라우저야
서브라임에서
이거 찾아봐
우클릭해서 오픈인 브라우저
실행시켜보면
주소가 좀 달라
서버 입장에서 저 두 주소를 완전 다르게 취급해
위에껀 서버입장에서 클라이언트가 맞아
밑에껀 우리가 돌려놓은 서버와 아무런 연관이 없어 그냥 만들어놓은 하나의 html 페이지인것
위에껀 서버에 ajax 요청을 하면 응답을 하는데 밑에껀 응답을 안해
보안이슈 때문에 구분해서 응답해
밑에서 위로 요청을 하는 걸 cross domain 이라고해
크로스 도메인 요청을 서버에서 편법으로 제공을 해줘야 할때가 있어
서버에서 jsonp 방식으로 응답할 준비를 해놓으면 응답을 해
크로스도메인 요청이라
풀 url 주소 써준 것
그리고 여기에 추가로 뭔가 넘겨줄게 있어
callback 이라는 파라미터 명으로 약속된 파라미터 value(JSON_CALLBACK) 를 넘겨줘
이거 만들고
서버 스타트만 시켜두고
서브라임에서
오픈인 브라우저
버튼을 눌렀을때
서버에 반응이 있어
callback이 null 이 아닌 경우에
전달된 문자열 + () 이게 출력이야
자바스크립트로 해석을 하면 전달된 문자열의 함수를 호출하는게 돼
callback 이라는 파라미터 명으로 뭔가 넘어오면 자바스크립트를 호출하는 형식으로 뭔가 전달하고
넘어오지 않으면 그냥 배열
콘솔에 찍어볼거야
배열이 들어와
주소창에 이렇게 쳐보고
http://localhost:8888/HelloAngular/jsonpTest.jsp
http://localhost:8888/HelloAngular/jsonpTest.jsp?callback=gura
전달 한 것대로
전달한 함수를 호출하는 문자열로 응답을 해
전달하지 않으면 그냥 배열을 출력하고
jsonp는 어떤원리냐면
동적으로 만들어서 갖다 붙이면
웹브라우저는 자바스크립트로 간주를 해서 해석을 해줘
해석이 되면 gura라는 함수를 호출하는 문자열이야
미리 특정함수를 만들어 놓고
script를 동적으로 갖다 붙이면 arg에 데이터가 들어가
이런 원리야
요청할떄마다 함수명을 다르게 만들어서 callback 라는 파라미터명을 넘겨
서버에선 callback 라는 문자열로 함수를 호출해
jsonp는 이런 작업을 지가 알아서 해주는 거야
이런 원리로써 cross domain 을 해결을 하는 거야
서버에서 해석하는 문자열을 자바스크립트로 간주를 해서 해석을 해주는 거야
이게 저 작업을 알아서 해주는 거야
이런 문자열을 호출하는 함수로 간주를 하는거야
파일 url 에서
서버에서 받아올수 있어
서버에서 이렇게 준비가 되어 있어야 되는 것임
앱 만들때 jsonp 요청을 많이 써
하이브리드앱이란게 있어
html,css,javascript 를 구성해서 ui를 만들면
안드로이드앱, 아이폰 앱 다 만들수 있어
그럴때 서버에서 데이터 목록을 받아오고 싶을때 jsonp 요청을 할수밖에 없어
jsonp2 만들어서
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Step10_jsonp2.html</title> <script src="js/angular.min.js"></script> <script> var myApp=angular.module("myApp", []); myApp.controller("one", function($scope, $http){ $scope.formData={}; $scope.send=function($event){ //폼 전송 이벤트 막기 $event.preventDefault(); var url="http://localhost:8888/HelloAngular/jsonpTest2.jsp?callback=JSON_CALLBACK"; $http .jsonp(url, {params:$scope.formData}) .success(function(data){ console.log(data); $scope.response=data; }); }; }); </script> </head> <body ng-controller="one"> <h3>jsonp 테스트2</h3> <form action="testAction" ng-submit="send($event)"> 이름 <input type="text" ng-model="formData.name"/> 주소 <input type="text" ng-model="formData.addr"/> <button type="submit">전송</button> </form> <p>{{formData}}</p> <p>{{response}}</p> </body> </html> | cs |
서브라임에서 열어봐
전송 눌렀을때 이렇게 출력되면 되는 것임
파일 url 에서 마치 ajax 비슷하게 jsonp 요청을 해서 사용할수 있어
'FrameWork > AngularJS' 카테고리의 다른 글
| AngularJS include (0) | 2017.08.30 |
|---|---|
| AngularJS http (0) | 2017.08.29 |
| AngularJS switch (0) | 2017.08.29 |
| AngularJS event (0) | 2017.08.29 |
| AngularJS Anmation (0) | 2017.08.28 |
