現在有非常多的 Open API 可以拿來玩, 但是 JavaScript 無法跨網域的問題還蠻麻煩的, 下面就把抓跨網域資料的方法整理一下.
抓自己網域的資料
先假設目錄下有 data.txt, 內容如下:
hello world
JavaScript 抓取資料的方式如下: (下述範例程式是 jQuery 的 AJAX 寫法)
$.get("data.txt", function(data) {
alert("Data Loaded: " + data); // 執行會跳出 Data Loaded: hello word 的視窗
});
或
$.get("http://SAME-DOMAIN/data.txt", function(data) {
alert("Data Loaded: " + data); // 執行會跳出 Data Loaded: hello word 的視窗
});
但是此方法在遇到不同 DOMAIN(Cross Domain) 的狀況就抓不到資料, 因為 Javascript 本身對安全性的限制, 無法抓取本身網域以外的資料, 就算是 www.same-domain 也不行, 一定要完全一樣的 Domain 才行.
抓跨網域的資料
通常都是在 同樣的 DOMAIN 下面寫一隻 proxy.php, 內容大致如下:
<?php
if (isset($_GET['url']) && !empty($_GET['url'])) {
// 記得檢查此 URL 是不是你發出的 request
echo file_get_contents($_GET['url']);
}
?>
使用 Proxy.php 的方法
透過 proxy.php 去抓取跨網域的資料, 範例如下:
$.get("proxy.php?url=http%3A%2F%2FSAME-DOMAIN%2F", function(data) {
alert("Data Loaded: " + data); // Data Loaded: hello world
});
使用 JavaScript src 載入
另外一種做法是透過 script 的 src 直接將資料塞進去, 這種方法就可以由多個不同網域直接取得資料, 不過寫法會有點不同, 格式要是 JSON 或 Javascript code 的格式, 例如:
data.txt 的內容:
var data = "hello world";
使用 src 抓取資料的範例:
<script type="text/javascript" src="http://OTHER-DOMAIN/data.txt"></script>
<script>
alert(data); // hello world
</script>
使用 src 直接抓取的方法, 少掉 PHP 那一層, 可以再想想有什麼地方可以拿來應用~ 🙂