出於安全性的考慮,在AJAX應用中,瀏覽器通常都會限制跨域提交資料,但這又恰恰是非常常用的需求。比如在a.com的頁面上中提交一些請求資料到b.com的伺服器上,b.com伺服器處理請求完畢後返迴響應內容到a.com的頁面上。如何解決呢,使用js是比較簡單易實現的方案,缺點是代碼跟應用相關,無法抽象出模板機制進行重用。
具體的原理和實現是這樣的,在a.com的頁面上,假設叫a.html, 提交資料的javascript事件中動態添加一個類型為javascript的節點,這個節點指向接收資料的b.com的動態網頁面,以php為例,假設叫b.php頁面。
但是在瀏覽器(包括IE系和Mozilla系以及Opera等)看來就像是包含一個真正的js指令碼一樣,因此它會去請求這個
b.php,在b.php中處理相應邏輯之後,返回一小段列印結果的javascript代碼即可。返回到a.html後瀏覽器負責解析這一小段javascript代碼,列印或顯示出請求結果。正是通過這種‘欺騙’瀏覽器的方式,實現了資料跨域的功能。
a.html的相關Javascript代碼如下:
這個PostData()是資料提交的函數,ShowPrompt()是負責回調的列印結果的小函數
function PostData()
{
//.......
var requestURL =
'http://www.b.com/b.php?data1=' + data1+ '&data2=' + data2 ;
var objHead = document.getElementsByTagName('head');
var objScript = document.createElement('script');
objScript.type = 'text/javascript';
objScript.src = requestURL;
objHead[0].appendChild(objScript);
//......
}
function ShowPrompt(promptText)
{
alert(promptText);
}
b.php的相關代碼如下:
<?php
/**
*@exitalert 輸出javascript代碼並退出
*/
function exitalert($alerttext)
{
echo("ShowPrompt('{$alerttext}');");
exit();
}
//read the request data...
$alerttext .= "資料已收到,謝謝";
exitalert($alerttext);
?>