利用form表單跨域post
? ? ? 現在ajax應用這么廣泛,一般的應用都是直接通過異步調用就可以了,但是有些東西必須要使用post,而且是跨域的時候,ajax異步調用的方式就無能為力了。當然現在也有很多種辦法,比如通過flash中轉去post,可以post到任何域中,或者是通過嵌入iframe來實現,flash的方式雖然好,但是用戶還得下載個swf文件,而且as開發我也就略知皮毛,所以這里我就是要使用嵌入iframe的方式來實現。
? ? ? 我的需求是將部分內容post到server中,因為服務器是c++寫的cgi,所以沒辦法通過代理頁的方式來實現,只好在本頁面來實現。
?
在這里,我通過將需要post的內容寫入content的input中,然后點擊提交,將form的action設置為目標服務器的url,target設置為iframe的名稱,這樣就可以實現無刷新的跨域post了,但是由于瀏覽器防止重復提交的功能,所以如果直接提交到iframe的話,后面你刷新頁面的話,瀏覽器就會提示是否要重復提交,所以這里我們監聽iframe的onload事件,當iframe成功load之后,就將iframe的src指向空白頁,從而瀏覽器認為已經跳轉到新頁面了,刷新也就不會提示重復提交的彈出框了。
這里我們還可以在iframe?load成功的時候,通過contenWindow屬性來獲取服務器的響應,從而可以判斷post是否成功。因為這里要先判斷post是否成功,所以在取得了服務器返回的數據之后再設置iframe的src為空白頁面,并且將iframe的onload事件取消,否則iframe每次src設置為about:blank都會觸發onload事件。
?
這里看到有人說ie6中會有iframe的onload事件調用時頁面仍未載入完成,或是不觸發onload事件,則需要通過監聽iframe的readyState來實現得到服務器響應完成的功能。我貌似還沒碰到,等碰到了的話再來解決。最近做的東西還要改as代碼,恩,可以學學as了
?
<html>
<head>
<title>ddd</title>
</head>
<body>
<script type="text/javascript">
function check()
{var btn = document.getElementById("test_submit");var frm = document.forms["test_form"];var ifm = document.getElementById("test_iframe");frm.action = "http://xxx.xxx.xxx/post.php";frm.target = "test_iframe";frm.submit();btn.disabled = "disabled";ifm.onload = function(){btn.disabled = "";var str = ifm.contentWindow;alert(str.document.body.innerHTML);ifm.src = "about:blank"; ifm.onload = null; } return false; }</script>
<form id="test_form" name="test_form" ><input type="hidden" name="content" value="xxx" /><input type="submit" name="test_submit" id="test_submit" />
</form>
<iframe id="test_iframe" name="test_iframe" width="1" height="1" style="display:none"></iframe>
</body>
</html>
?
好吧,果然在ie下iframe不會觸發onload事件,于是改為了?Nicholas C.Zakas提供的方法,通過attachEvent來添加onload事件。
ifm.onload = function(){ btn.disabled = ""; var str = ifm.contentWindow; alert(str.document.body.innerHTML); ifm.src = "about:blank"; ifm.onload = null; }//改為if(ifm.attachEvent){ifm.attachEvent("onload", function(){ btn.disabled = ""; var str = ifm.contentWindow; alert(str.document.body.innerHTML); ifm.src = "about:blank"; ifm.detachEvent("onload", arguments.callee); }}else{ifm.onload = function(){ btn.disabled = ""; var str = ifm.contentWindow; alert(str.document.body.innerHTML); ifm.src = "about:blank"; ifm.onload = null; }}