JavaScript ajax request 跨網域 Ⅰ

2011-05-13

1871
0

摘要:JavaScript ajax request 跨網域 Ⅰ

AJAX受限於瀏覽器限制無法發起跨網域請求，常用的解決辦法是 JSONP（JSON with Padding）。

假設今天有一個 req.js檔案內容是：


alert(1);

那其它網頁，不管是不是相同網域，只要在 html裡加入：


<script src="req.js" type="text/javascript"></script>

該網頁讀到這裡就會把 req.js下載回來，執行，跳出 1這個訊息。很簡單的例子，沒什麼營養…XD

如果 req.js是後端程式動態產生的，例如：req.php, req.aspx，那就可以用這樣的方式讓瀏覽器下載檔案回來執行：


<script src="req.aspx" type="text/javascript"></script>

只要產出的文字內容可以讓瀏覽器 JavaScript引擎解的出來，就可以被執行。所以，這個文字內容就可以隨便塞啦！

舉一個實際的例子，http://developers.facebook.com/docs/reference/api/，Facebook Graph API定義了很多回傳 JSON格式的方法；

再從中隨便挑一個，https://graph.facebook.com/btaylor，會回傳使用者的公開資料：


{
   "id": "220439",
   "name": "Bret Taylor",
   "first_name": "Bret",
   "last_name": "Taylor",
   "link": "http://www.facebook.com/btaylor",
   "username": "btaylor",
   "gender": "male",
   "locale": "en_US"
}

但是自己的網頁跟 Facebook不會在同一個網域，所以沒辦法用 AJAX直接抓資料回來…

解決辦法：


// 先隨便定義一個函數，例如 test
function test(userData){
   alert(userData.id);
}

// 然後把 https://graph.facebook.com/btaylor?callback=test 的內容用 script標籤抓回來執行。
// 註：通常提供 json格式的 API會接 callback參數當作自訂 function name，如果文件沒寫可以試試看！
// https://graph.facebook.com/btaylor?callback=test 回傳的內容：
test({
   "id": "220439",
   "name": "Bret Taylor",
   "first_name": "Bret",
   "last_name": "Taylor",
   "link": "http://www.facebook.com/btaylor",
   "username": "btaylor",
   "gender": "male",
   "locale": "en_US"
}); // ← 會執行 test這個 function，並把使用者公開資料當作第一個參數傳進 test！
// 所以執行之後，會跳出 220439這個訊息…又一個沒營養的例子XD

如果是用 jQuery，有包裝過的 api可以用：http://api.jquery.com/jQuery.getJSON/

JavaScript

回首頁