제 결론!!! Ajax를 Cross-domain상에서 동기식으로 전송하는 것을 피해야 할 것 같습니다!!!
요즘 진행중인 프로젝트는 Cross-domain을 많이 사용하게 됩니다.
이거 하다보니, 보안문제 등 여러 문제가 많이 거슬리게 됩니다. JSON과 JSONP에 대한 공부를 하게 된 것도 이 때문이죠~
그런데 최근에 작성한 코드에서 이상한 문제가 발생한 것입니다.
Ajax의 장점인 동기식 전송을 버리고 비동기식으로 전송해야 하는 상황이 생겼는데~
크로스 도메인에서 제대로 작동하지 않는 것입니다. 이 문제 찾느라고 또 반나절을 훌쩍~
문제가 되는 코딩
http://www.sitea.com/index.html
<script type="text/javascript" src="./jquery-1.5.1.min.js"></script>
<script language="javascript">
var temp_bool = false;
$.ajax({
url: 'http://www.siteb.com/test.json.php',
async: false,
dataType: 'jsonp',
success: function(data) {
temp_bool = data.result;
console.log('received');
console.log(temp_bool);
}
})
console.log('data');
console.log(temp_bool);
</script>
test.json.php
<?
$arr[result] = true;
echo $_GET['callback'].'('. json_encode($arr).');';
?>
문제가 심각했습니다. 이럴순 없다!!! 근데 왜 이렇게 작동하는거지??? 란 생각을 하게 됐습니다.
http://api.jquery.com/jQuery.ajax/<- 이 문서를 보니..
이렇게 적혀 있습니다. 역시 문서를 잘 봐야한다는 건 이전 포스트에도 적었던 얘긴데...
크로스 도메인에서는 원래 지원 안된답니다~ 허허~
Loop를 돌려서 응답이 올 때까지 대기를 하도록 해 볼까???
계속 루프를 돌려 봤습니다. 근데 대체 이건 무슨 일인지...
Firefox에서만 테스트 해봤는데, loop가 도는 동안 브라우저가 먹통이 됩니다.
더욱이 비동기식 전송 자체도 딜레이가 됩니다. 큰일이네요~
Loop가 너무 빨리 돌아서 문제가 생기나 싶어서 javascript 자체에 sleep(); 기능이 있는가 확인해 봤는데, 그런 함수는 없네요~
sleep 기능을 구현하기 위해서 시도된 방법 역시 loop 입니다. 브라우저에 부하가 생기는, 비효율 적인 방법이죠~
마지막으로 택한 방법!
결국 Ajax를 동기식으로 전송시키는 것은 힘들고, 부하가 많이 생긴다는 결론에 다다랐습니다.
그래서~ Callback 함수를 적극 활용해 보려고 합니다.
이 글을 보신 분들 중에 Ajax를 Cross-domain으로 전송할 때 동기식으로 하는 방법을 알고계신 분 있나요? ㅎ
