目前跨域請求常見的做法有兩種,在這裡分別用JSONP和CORS來做實現。
- JSONP:利用<script> src可以cross domain獲取資源的特性來做實現,通常會帶一個callback的參數過去供server端呼叫。
這是jQuery的做法,利用$.ajax去動態生成一個<script> tag作實現。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| function jsonpCallback(data) {
console.log(data);
}
function remote() {
$.ajax({
url: "http://demosite2013.herokuapp.com/exercise/crossDomain/jsonp.php",
dataType: "jsonp",
jsonpCallback: "jsonpCallback",
success: function(data) {
console.log("success: " + data);
}
});
}
jQuery(document).ready(function(){
remote();
});
|
也可以利用<script> tag直接呼叫:
1
| <script type="text/javascript" src="http://demosite2013.herokuapp.com/exercise/crossDomain/jsonp.php?callback=jsonpCallback"></script>
|
Server端的寫法:
1
2
3
4
| <?php header('content-type: application/json; charset=utf-8');
$data = "這是Server回傳資料!";
echo $_GET['callback'].'('.json_encode($data).')';
?>
|