JSONP原理詳解以及案例分析

這次帶給大家JSONP原理詳解以及案例分析，JSONP原理詳解以及案例分析的注意事項有哪些，下面就是實戰案例，一起來看一下。

在web2.0時代，熟練的使用ajax是每個前端攻城師必備的技能。然而由於受到瀏覽器的限制，ajax不允許跨域通訊。

JSONP就是目前主流的實現跨域通訊的解決方案。

雖然在jquery中，我們可以透過$.ajax的dataType設定為jsonp來呼叫jsonp，但是jsonp和ajax的實作原理一個關係都木有。 jsonp主要是透過script可以連結遠端url來實現跨域請求的。如：

<script src="http://jsonp.js?callback=xxx"></script>

callback定義了一個函數名，而遠端服務端透過呼叫指定的函數並傳入參數來實現傳遞參數。

搜尋了網路上好多文章，他們實作方法都過於簡單，要實際應用還要多加修改，我在這裡封裝了一個對象，可以直接運用於實際操作。

var JSONP = {
// 获取当前时间戳
now: function() {
return (new Date()).getTime();
},
// 获取16位随机数
rand: function() {
return Math.random().toString().substr(2);
},
// 删除节点元素
removeElem: function(elem) {
var parent = elem.parentNode;
if(parent && parent.nodeType !== 11) {
parent.removeChild(elem);
}
},
// url组装
parseData: function(data) {
var ret = "";
if(typeof data === "string") {
ret = data;
}
else if(typeof data === "object") {
for(var key in data) {
ret += "&" + key + "=" + encodeURIComponent(data[key]);
}
}
// 加个时间戳，防止缓存
ret += "&_time=" + this.now();
ret = ret.substr(1);
return ret;
},
getJSON: function(url, data, func) {
// 函数名称
var name;
// 拼装url
url = url + (url.indexOf("?") === -1 ? "?" : "&") + this.parseData(data);
// 检测callback的函数名是否已经定义
var match = /callback=(\w+)/.exec(url);
if(match && match[1]) {
name = match[1];
} else {
// 如果未定义函数名的话随机成一个函数名
// 随机生成的函数名通过时间戳拼16位随机数的方式，重名的概率基本为0
// 如:jsonp_1355750852040_8260732076596469
name = "jsonp_" + this.now() + '_' + this.rand();
// 把callback中的?替换成函数名
url = url.replace("callback=?", "callback="+name);
// 处理?被encode的情况
url = url.replace("callback=%3F", "callback="+name);
}
// 创建一个script元素
var script = document.createElement("script");
script.type = "text/javascript";
// 设置要远程的url
script.src = url;
// 设置id，为了后面可以删除这个元素
script.id = "id_" + name;
// 把传进来的函数重新组装，并把它设置为全局函数，远程就是调用这个函数
window[name] = function(json) {
// 执行这个函数后，要销毁这个函数
window[name] = undefined;
// 获取这个script的元素
var elem = document.getElementById("id_" + name);
// 删除head里面插入的script，这三步都是为了不影响污染整个DOM啊
JSONP.removeElem(elem);
// 执行传入的的函数
func(json);
};
// 在head里面插入script元素
var head = document.getElementsByTagName("head");
if(head && head[0]) {
head[0].appendChild(script);
}
}
};

實作過程基本上寫在註解裡啦，自己看。呼叫的方法跟jQuery基本上一樣。如：

var data = {
from: "北京",
count: 27,
output: "json",
callback: "?"
}
JSONP.getJSON("http://api.qunar.com/cdnWebservices.jcp", data, function(json) {console.log(json)});

當然要這麼寫也行：

JSONP.getJSON("http://api.qunar.com/cdnWebservices.jcp?from=北京&count=27&output=json&callback=?", null, function(json) {console.log(json)});

至於服務端的實現，那就比較簡單了，以php為例：

$callback = !empty($_GET['callback']) ? $_GET['callback'] : 'callback';
echo $callback.'( .json_encode( $data ).')';

#ajax與jsonp的異同再做一些補充說明：

1、ajax和jsonp 這兩種技術在調用方式上“看起來”很像，目的也一樣，都是請求一個url，然後把伺服器傳回的資料處理，所以jquery和ext等框架都把jsonp當作ajax的一種形式進行了封裝；

2、但ajax和jsonp其實本質上是不同的東西。 ajax的核心是透過XmlHttpRequest取得非本頁內容，而jsonp的核心則是動態新增<script>標籤來呼叫伺服器提供的js腳本。

3、所以說，其實ajax與jsonp的差別不在於是否跨域，ajax透過服務端代理程式一樣可以實現跨域，jsonp本身也不排斥同域的資料的取得。

4、還有就是，jsonp是一種方式或者說非強制性協議，如同ajax一樣，它也不一定非要用json格式來傳遞數據，如果你願意，字符串都行，只不過這樣不利於用jsonp提供公開服務。

總而言之，jsonp不是ajax的一個特例，即使jquery等巨人把jsonp封裝進了ajax，也不能改變這一點！

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

JSON作為函數參數時應該如何使用

實體類別與JSON物件轉換方法總結

以上是JSONP原理詳解以及案例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！