[jQuery] Ajax로 Cross-domain에서 POST로 전송하기...

엥??? Cross-domain에서 POST 전송이 안되나???
물론 다 그런건 아니구요~ HTML의 FORM을 이용한 전송에서는 POST 전송이 됩니다.
Ajax 를 이용해 전송할 때 POST 전송이 안된다는 거죠...

Ajax를 이용해서 GET 전송을 할 때는 뭐 이것 저것 가능한 기술들이 많이 있습니다.
JSONP 형식으로 전송하면 응답 받은 내용으로 다른 작업도 가능하죠~
아마도 두 사이트 간 검색어 자동완성 기능은 이 기술을 쓰고 있을거라 추측해 봅니다.

아직까진 이런 저런 기술들로 잘 지내 왔었는데, 이런!! 전송할 데이터 양이 많아지니 문제가 되는군요...
GET 으로 전송할 수 있는 데이터양에는 한계가 있습니다.
아마도 2KB 정도였던 것 같은데, 이걸로 만족시키지 못하는 프로젝트... 분명히 있습니다. 제가 그렇거든요~

그럼 어쩌나???
우리에겐 iframe이라는 엄청난!! 기술이 있습니다. 그리고 form으로 전송하면 POST 전송이 된다고 했습니다.
그래서!! iframe을 만들어 낸 후! 그리로 POST 전송을 하고! 응답을 기다립니다.
(jQuery 를 이용한 코드입니다.)
   

var tmp_ifr = $('<iframe />')
                        .attr({'name':'temporary_ifr'})
                        .hide()
                        .load(function() {
                                    $('#temporary_frm').remove();
                                    $(this).remove();

                                    // finished
                                    // console.log('finished....');
                                });
   
    var tmp_frm = $('<form />')
                        .attr({'id':'temporary_frm',
                                'action':'주소',
                                'method':'post',
                                'target':'temporary_ifr'})
                        .append($('<input type="hidden" name="data" value="thisisddd" />'));
    $('body').append(tmp_ifr).append(tmp_frm);
    tmp_frm.submit();

이런 코드를 넣으면 됩니다~ 간단하죠?
보라색으로 표시된 부분은!!
전송할 데이터를 붙여주는 곳입니다. hidden type의 input 태그를 넣어주면 됩니다.
파란색으로 표시된 부분은!!
응답이 완료되면 작업을 수행할 부분입니다.
안타깝게도~ 응답을 받은 iframe의 내용을 가져오는 것은 또 다른 작업이 필요합니다. 자료를 보시고 응용하시면 쉽게...(쉽지만은 않게) 사용 가능하시리라 생각됩니다.
그냥 응답 완료된 시점만 파악하려면 위의 코드만으로도 충분하시리라 생각됩니다.

곧 이걸 함수로 만들 생각입니다.
조만간 관련 코드를 좀 배포해야 겠네요~ 그럼~!!