[펌]Cross domain JSON 원리

출처 : http://greatkim91.tistory.com/109

현재 페이지의 스크립트에서 다른 서버로 Ajax 호출을 시도하는 것은 허용되지 않습니다. 이것을 cross domain JSON을 이용하여 해결할 수 있는데 다음 URL에서 cross domain JSON을 이용한 원격 호출 방법과 간단한 JavaScript 유틸리티를 제시합니다.

http://www.xml.com/pub/a/2005/12/21/json-dynamic-script-tag.html

그럼 어떻게 JSON을 이용하여 다른 서버의 서비스를 호출할 수 있는지 살펴보겠습니다. 원리를 알면 쉽게 나에게 적합한 유틸리티를 만들수 있을 겁니다.

스크립트 태그

다음은 스크립트 태그입니다. 보통 아래와 같이 사용합니다.

test.js

alert('OK');

그럼 js 디렉토리에 아래와 같은 JavaScript를 생성하는 jsp를 만들고 스크립트 태그에 다음과 같이 수정해봅니다.

test.jsp

alert('<%=System.getProperty("os.name")%>');

test.html

...

<script type="text/javascript" src="http://userhost:port/js/test.jsp"></script>
...

System.getProperty("os.name")은 Host의 OS 이름을 가져오는 Java 코드이고 서버에서 실행되는 코드입니다.

위와 같이 하면 해당 서버의 OS 이름이 나타날 겁니다.

스크립트 src의 URL에 제약이 없다

위의 test.jsp가 이 서버말고 다른 서버(도메인)에 있더라도 동작합니다.

그럼 test.jsp를 다른 서버에 올려놓고 다음과 같이 스크립트 태그를 수정해 봅니다.

test.html

<script type="text/javascript" src="http://remote:port/js/test.jsp">

원격 서버의 OS 이름이 나타날 겁니다.

그럼 test.jsp를 다음과 같은 스크립트를 생성하도록 바꾸고, test.html에는 getHostOs라는 JavaScript 함수를 만들어 놓습니다.

(내서버) test.html

...

<script type="text/javascript">
function getHostOs(response) {
	alert(response.osName);
}
</script>
<script type="text/javascript" src="http://remote:port/js/test.jsp"></script>
...

(원격서버) test.jsp

getHostOs({osName:'<%=System.getProperty("os.name")%>'});

7번째 줄 javascript 태그에서 원격에서 생성된 스크립트를 실행합니다. 원격 서버에서 생성된 스크립트를 보니 JSON 데이터를 만들고 그걸 파라메터로 getHostOs 라는 함수를 호출하는군요. 이 함수는 이미 페이지에 준비되어 있습니다. (callback 함수라고 합니다.) 즉 아래와 동일한 결과죠.

...

<script type="text/javascript">
function getHostOs(response) {
	alert(response.osName);
}
</script>

<script type="text/javascript">
getHostOs({osName:'Linux'});
</script>
...

여기서 관심있게 볼 부분은 8번째 줄 {osName:'Linux'}이 원격에서 생성한 JSON 데이터라는 것입니다.

실전

원격의 JSON 데이터를 가지고 오기 위해서는 <script type... src="..."></script> 부분이 필요합니다.

원격 서비스 호출을 하는 JavaScript 유틸리티를 만들려면 원격 호출할 때마다 위 방식의 스크립트 태그가 필요하니 동적으로 생성하면 됩니다.

...
scriptObj = document.createElement("script");
scriptObj.setAttribute("type", "text/javascript");
scriptObj.setAttribute("charset", "utf-8");
scriptObj.setAttribute("src", remoteUrl); 

...

원격 서비스마다 응답 JSON을 처리하는 방법이 다르므로 callback 함수 이름은 요청마다 다르게 해주어야 하며 원격 서버는 callback 이름을 파라메터로 받아 그 함수이름으로 JSON을 파라메터로 넘기는 스크립트를 생성해주어야 합니다. 즉 callback 함수로 감싸면 됩니다.

http://www.xml.com/pub/a/2005/12/21/json-dynamic-script-tag.html  기사에 있는 예제http://www.xml.com/2005/12/21/examples/jsr_class.zip 소스를 참고하시면 JSON을 이용한 자신만의 cross domain 호출 유틸리티를 만들 수 있을 겁니다.

다른 Cross domain Ajax 방법도 참조하세요.