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

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

스크립트 태그

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

test.js

1. alert('OK');

 test.html

1 ...
2 <script type="text/javascript" src="js/test.js"></script>
3 ...

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

test.jsp

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

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


System.getProperty("os.name")은 Host의 OS 이름을 가져오는 Java 코드이고 서버에서 실행되는 코드입니다.
위와 같이 하면 해당 서버의 OS 이름이 나타날 겁니다.


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

위의 test.jsp가 이 서버말고 다른 서버(도메인)에 있더라도 동작합니다.
그럼 test.jsp를 다른 서버에 올려놓고 다음과 같이 스크립트 태그를 수정해 봅니다.
test.html
1 ...
2 <script type="text/javascript" src="http://remote:port/js/test.jsp"></script>
3 ...

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

그럼 test.jsp를 다음과 같은 스크립트를 생성하도록 바꾸고, test.html에는 getHostOs라는 JavaScript 함수를 만들어 놓습니다.
(내서버) test.html
1 ...
2 <script type="text/javascript">
3 function getHostOs(response) {
4     alert(response.osName);
5 }
6 </script>
7 <script type="text/javascript" src="http://remote:port/js/test.jsp"></script>
8 ...


(원격서버) test.jsp
1 getHostOs({osName:'<%=System.getProperty("os.name")%>'});

7번째 줄 javascript 태그에서 원격에서 생성된 스크립트를 실행합니다. 원격 서버에서 생성된 스크립트를 보니 JSON 데이터를 만들고 그걸 파라메터로 getHostOs 라는 함수를 호출하는군요. 이 함수는 이미 페이지에 준비되어 있습니다. (callback 함수라고 합니다.) 즉 아래와 동일한 결과죠.
1 ...
02 <script type="text/javascript">
03 function getHostOs(response) {
04     alert(response.osName);
05 }
06 </script>
07  
08 <script type="text/javascript">
09 getHostOs({osName:'Linux'});
10 </script>
11 ...

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


실전
원격의 JSON 데이터를 가지고 오기 위해서는 <script type... src="..."></script> 부분이 필요합니다.
원격 서비스 호출을 하는 JavaScript 유틸리티를 만들려면 원격 호출할 때마다 위 방식의 스크립트 태그가 필요하니 동적으로 생성하면 됩니다.
1 ...
2 scriptObj = document.createElement("script");
3 scriptObj.setAttribute("type", "text/javascript");
4 scriptObj.setAttribute("charset", "utf-8");
5 scriptObj.setAttribute("src", remoteUrl);
6 ...


원격 서비스마다 응답 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 방법도 참조하세요.

설정

트랙백

댓글