ajax 의 태생 때문에 크로스 도메인 제약이 걸리게 됩니다.
이를 해결할 수 있는 방법이 있네요.
일단 원문 : http://www.javaworld.com/javaworld/jw-11-2006/jw-1115-json.html
일단... 그 방법부터 한번 알아보겠습니다.
1. Ajax를 콜하는 부분의 스크립트 입니다.
function callServer(){
headElement = document.getElementsByTagName("head").item(0);
var scriptTag = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src","http://server.com/app/?with=params");
headElement.appendChild(scriptTag);
}
보시는 바와 같이 Document의 Head Element를 가져와서 head밑에 script Element를 만듭니다.
이때 src를 Ajax Request를 받을 서블릿이 되겠습니다.
해당 Functon이 실행되고 난 뒤
파폭의 Dom Inspector을 통해서 위 코드가 실행된 것을 보면 Head밑에 Script가 새로 하나 생겨난것을 볼 수 있습니다. ( 귀찮아서 그림은.... ㄷㄷㄷ )
즉, 우리가 보통 Head에 js 파일을 가져오기 위해
<script type="text/javascript" src="server...../common.js"></script>
와 같은 코드를 동적으로 만들어 낸다고 보시면 되겠습니다.
2. Servlet
서버에 해당 리퀘스트를 처리할 서블릿을 만듭니다.
단, Response를 다음과 같이 주면 됩니다.
callFunction( { "count1": 1, "count2": 3, "count3": 3, "count4":4 } )
을 돌려주게 만들면 됩니다.
결과적으로 동적으로 만들어지는 script 태그 안의 내용이 서블릿의 응답 내용이 된다는 거죠.
아마 저것을 초기에 로딩 하는 형태로 했다면 이렇게 될겁니다.
<script type="text/javascript">
callFunction( { "count1": 1, "count2": 3, "count3": 3, "count4":4 } )
</script>
와 같이 되는거겠죠.
그럼 당연하게도 callFunction이 실행이 됩니다.
3. callback Function
원문의 예제게 JSON으로 되어 있어서 여기서도 JSON으로 처리를 하도록 했습니다.
아래와 같은 Callback Function을 만들면 됩니다.
function callFunction( receiveData ) {
alert(receiveData.count1);
alert(receiveData.count2);
alert(receiveData.count3);
alert(receiveData.count4);
}
4. 결과
alert박스가 4번을 뜨게 됩니다.
1, 2, 3, 4 가 각각 차례대로 나오게 됩니다.
------------------------------------------------------------------
XMLHttpRequest 를 이용하는것 같지는 않습니다.
문득 든 생각이... 이거 XMLHttpRequest가 지원이 안되도 이 방법을 사용하면 Ajax를 구현할 수 있겠다는 생각이 드는데.... ( 테스트하기 귀찮아서 ㄷㄷㄷ )
이 방법으로 구현을 하고 나서 좀 더 찾아 보니 Ajax Hack에 나와있는 내용인것 같더군요.
흠...책을 사야되려나....
