jquery crossdomain ajax jsonp

참조 : http://seotory.tistory.com/9

일반적인 jquery ajax 호출.

http://samedomain/test.json

{"message":"json test"}

jquery 를 이용한 ajax 호출은 다음과 같이 할 수 있다.

$.ajax({ url : "/test.json", success: function(data) {   alert(data.message); }, error: function(data) { console.log(data); } });

만약 다른 도메인의 url 로 ajax 호출을 할때에는 어떻게 해야 하나??

웹 브라우져에서는 same-origin policy (SOP) 정책에 따라 다른 도메인간의 request을 제한하고 있다.

<script/> 태그는 same-origin-policy (SOP) 정책에 속하지 않는다는 사실을 근거로, 서로 다른 도메인간의 javascript 호출을 위하여 jsonp (또는 json with padding) 이 사용되었다.

jsonp를 사용하기 위해서는 필수적으로 서버단에서 jsonp의 포맷을 따라야한다. 이것은 jsonp를 사용하기 위한 "규칙"이다.

그리고 항상 get 방식으로 호출해야 한다.

http://otherdomain/test.jsonp

myCallback( {"message":"json test"} )

jquery 를 이용한 ajax 호출은 다음과 같이 할 수 있다.

$.ajax({ url : "http://otherdomain/test.jsonp", dataType: 'jsonp', jsonp: 'callback', jsonpCallback: "myCallback", success: function(data) {   alert(data.message); }, error: function(data) { console.log(data); } }); function myCallback(data) { alert("myCallback : " + data.message); console.log('myCallback 성공 - ', data); }

ajax 를 호출하면 실제로 다음과 같이 request 가 된다.

http://otherdomain/test.jsonp?callback=myCallback&_=1446182239995

client - server 간에 미리 협의가 있어야 한다.

- parameter name(callback), parameter value(myCallback)

server 에서 response 할 때 data 를 myCallback 함수로 감싸서 보내면 된다.

client 에서는 myCallback 함수가 호출이 된다.

아래 처럼 사용할 수 도 있다.

<script type="text/javascript" src="http://otherdomain/test.jsonp?callback=myCallback"></script>

혹시 에러날 것을 방지 하기 위해 아래 처럼 try - catch 로 감싸서 내려주면 더 안전하다.

try {      myCallback( {"message":"json test"} )  } catch(e) {}