站內搜尋

Friday, October 30, 2015

[JavaScript][好文] Cross Domain Ajax 跨網域抓取資料(JSONP) - Javascript篇

Cross Domain Ajax 跨網域抓取資料(JSONP)

W3 JSONP (含範例程式)

原理:
因為同源政策並不限制<script>,所以可以利用這一點,先在本地端JS定義好函式,再透過<script src="{別網域程式的網址}"></script> 來執行本地端的函式,以 W3 的範例程式來說,先在本地端的 2.php 定義好 myFunc 這個 JS 函式,然後引入不同網域的 1.php,echo 出的內容就是一段寫好的 JS 碼,其中即包含 myFunc({"name":"John"....}) 【函式名稱(參數){}】,就可以來執行本地端的 myFunc 函式。

範例程式:
Server端 PHP 程式碼 (網址: https://www.myweb1.com/1.php)
$myJSON = '{"name":"John", "age":30, "city":"New York"}';
echo "myFunc(".$myJSON.");";

Client端 JS 程式碼 (網址: https://www.myweb2.com/2.php)
function myFunc(myObj) {
  console.log(myObj.name);
}
<script src="https://www.myweb1.com/1.php"></script>

備註:
請注意 JSON 需使用"雙引號"

No comments:

Post a Comment