Direction

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에 나와있는 내용인것 같더군요.
흠...책을 사야되려나....

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.