…….續前緣…….
前文講到, 用類似爬蟲的方式抓取數據; 本篇則講解使用jsonp解決同源問題.
jsonp原理如下: 利用script標籤的跨域性, 在地址後面攜帶參數, 被請求方則根據參數來處理請求. 需要後臺和前端一起合作才能完成.
戰前準備工作: 兩個**非同源**webSite(必須).
樓主用的是本機(localhost)模擬非同源網站, 一個是wamp(localhost:80), 一個是HBuilder內置服務器(localhost:8020). 當然還有Tomcat等服務器. HBuilder直接下載就能用, wamp有點複雜, 但網上教程也是一大把.
在此說一個安裝wamp的坑: windows系統下, 如果開啓IIS, wamp無法正常啓動, 因爲IIS佔用了80端口. 所以要停掉IIS服務.
準備工作完成之後, 那就開始擼代碼了. 兩份代碼文件: php和HTML文件.PHP文件寫在wamp之中, HTML寫在HBuilder之中. 最好這樣分配, 因爲在HB中配置PHP環境太過於麻煩.
先看一下jsonp.php
<?php
header('Content-type: application/json');
// 獲取回調函數名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
// json數據
$json_data = ["customername_first","customername_second"];
// 輸出jsonp格式的數據
echo $jsoncallback."(".json_encode($json_data).")";
?>應該很好理解的吧?!
再看下jsonpTest.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="divCustomers"></div>
</body>
<script id="first" type="text/javascript">
function callbackFunction(result, methodName){
console.log(result);
var _html = '<ol>';
for (var i = 0; i < result.length; i++) {
_html += '<li>' + result[i] + '</li>';
}
_html += '</ol>';
document.getElementById('divCustomers').innerHTML = _html;
}
</script>
<script id="second" type="text/javascript" src="http://localhost/cross_domain/php/jsonp.php?jsoncallback=callbackFunction"></script>
</html>主要強調下匹配關係:
id爲second的script標籤, 其src路徑中的攜帶參數名jsoncallback與jsonp.php中的請求參數必須一致; 而參數值callbackFunction與id爲first的函數名必須一致. 否則無法請求到數據.
此外, 對callbackFunction的定義必須放在做請求的前面, 否則會報函數未定義.
在此推薦下博客園和菜鳥教程的兩篇文章. 寫的很好. 本文可以說是照搬的菜鳥教程.
…….postMessage請聽下回分解!…….
