Practice of Programming

プログラム とか Linuxとかの話題

POSTとiframeでAJax

Ajax

SumibiでJSONP使えないかなぁと検討していたんですが、GETだとログに文章が残ってしまうので、
プライバシーがなぁと。kiyokaさんはそのへんに気を遣っているので、僕もあんまりしたくないなぁ...と思ってたんですが。

iframe とPOSTを使ってなんとかなるかなぁとか、思い始めました。
1つでもいいんですが、簡単なんで、iframe を2つ作ります。

<iframe src="sumibi_form.html" id="iframe_sumibi"></iframe>
<iframe src="sumibi_form.html" id="iframe_sumibi_target"></iframe>

前者の方には、例えば、こんなの。

<html>
<head>
<title>hoge</title>
</head>
<body>
<form name="test" id="test">
<input type="hidden" name="query" id="query">
<input type="hidden" name="cnt" id="cnt">
<input type="hidden" name="num" id="num">
<input type="hidden" name="callback" id="callback">
</form>
</body>
</html>

で、このformを JavaScriptでたたく。submitなので、クロスドメイン関係ない。

function postIframe(query, cnt, num){
    var iframe = frames[frames.length - 2].document;
    if(iframe.getElementById("test")){
	iframe.getElementById("test").action = "http://example.com/sumibi/sumibi_jsonp.cgi";
	iframe.getElementById("test").target = 'iframe_sumibi_target';
	iframe.getElementById("query").value = query;
	iframe.getElementById("cnt").value = cnt;
	iframe.getElementById("num").value = num;
	iframe.getElementById("callback").value = "sumibi_callback";
	iframe.test.method = "post";
	iframe.test.submit();
    }
}

これで、targetの方に、リクエストの結果が戻ってくるので、こちらを監視する。

var sumibi_old_jsonp;

function checkIframe(){
    var iframe = frames[frames.length - 1].document;
    if(iframe && ! iframe.getElementById('test') && iframe.body.innerHTML && sumibi_old_jsonp != iframe.body.innerHTML){
	sumibi_old_jsonp = iframe.body.innerHTML;
	var script = iframe.body.innerHTML;
	script = script.replace(/<\/pre>$/, "")
	script = script.replace(/^<pre>/, "");
	eval(script);
	document.getElementById('iframe_sumibi_target').src="sumibi_test.html";
    }
    setTimeout("checkIframe()", 1000);
}

こんな感じ。<pre>がついてるのはなんでか不明。実際は結果が正しいことをなんらかの形で検証しないといけないと思う。
取得したのは、JSONを引数に取った、sumibi_callback関数呼び出しの文字列。
これを、eval して実行することで、終わり、見たいな。


iframeも動的に作ってやれば、うまいこといくんじゃないかと思ってますが、まだ、試行錯誤中。


って、思ってたら、普通に前からあるっぽいので、参考にしよう...


http://www.google.co.jp/search?hl=ja&c2coff=1&q=POST+IFRAME+AJAX&btnG=Google+%E6%A4%9C%E7%B4%A2&lr=lang_ja
http://allabout.co.jp/internet/javascript/closeup/CU20060115A/index3.htm#4
http://www.ark-web.jp/sandbox/wiki/index.php?Ajax%2Fiframe%A4%F2%BB%C8%A4%C3%A4%BFAjax%A4%C7Comet%3F