使用JavaScript實現跨域資料提交的原理與實現

來源:互聯網
上載者:User

出於安全性的考慮,在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);

?>
 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.