通過 JSONP 實現完美跨域

以前我經常在博客說JSONP，例如我的WordPress天氣插件就是通過JSONP來調用的天氣數據，今天就說說通過JSONP實現跨域的應用~

什么是JSONP
JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允許請求當前源（域名、協議、端口）的資源。如果要進行跨域請求，我們可以通過使用 html的script標記來進行跨域請求，并在響應中返回要執行的script代碼，其中可以直接使用JSON傳遞javascript對象。這種跨域的通訊方式稱為JSONP。

對于上面的解釋，我們可以簡單這樣理解：JSONP就是可以通過JavaScript文件進行跨域通訊的方式，例如：現在各大網站風靡的搜索提示，搜狗云輸入法
注意：JSONP服務器端代碼需要充分做好安全措施。

最簡單的JSONP
var JSONP = document.createElement("script") ;
//FF:onload IE:onreadystatechange
JSONP.onload = JSONP.onreadystatechange = function(){
//onreadystatechange，僅IE
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
alert($("#demo").html());
JSONP.onload = JSONP.onreadystatechange = null//請內存，防止IE memory leaks
}
}
JSONP.type = "text/javascript";
JSONP.src = "http://a.pojaaimg.cn/2010/js/jquery.js";
//在head之后添加js文件
document.getElementsByTagName("head")[0].appendChild(JSONP);
簡單解釋：我們通過創建script，然后指定它的src等屬性，然后插入到head執行
建議：onload、onreadystatechange 寫在src賦值之前，防止載入js太快而沒有給onload、onreadystatechange 賦值（Image對象在IE下具有此類現象）

JSONP實例
我們可以首先定義一個函數來執行JSONP返回的數據，然后通過JSONP的src傳此函數給后臺，進行處理，返回可執行的函數。例如下面代碼：

function jsonpHandle(a){
alert(a);
}
var JSONP = document.createElement("script") ;
JSONP.type = "text/javascript";
JSONP.src = "http://www.js8.in/jsonp.php?callback=jsonpHandle";
//在head之后添加js文件
document.getElementsByTagName("head")[0].appendChild(JSONP);
后臺jsonp.php的代碼：

echo $_GET["callback"]."('hello,world')";

出處：http://www.js8.in/548.html

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈