好的代碼像粥一樣,都是用時間熬出來的!
前面的話
JSONP是JSON with padding(填充式JSON或參數式JSON)的簡寫,是應用JSON的一種新方法,常用於服務器與客戶端跨源通信,在後來的Web服務中非常流行。本文將詳細介紹JSONP
基礎
JSONP的基本思想是,網頁通過添加一個<script>元素,向服務器請求JSON數據,這種做法不受同源政策限制;服務器收到請求後,將數據放在一個指定名字的回調函數裏傳回來
當通過<script>元素調用數據時,響應內容必須用javascript函數名和圓括號包裹起來。而不是發送這樣一段JSON數據,這就是JSONP中P的意義所在
[1, 2, {"buckle": "my shoe"}]
JSONP看起來與JSON差不多,只不過是被包含在函數調用中的JSON,它會發送這樣一個包裹後的JSON響應:
handleResponse([l, 2, {"buckle": "my shoe"}])
包裹後的響應會成爲<script>元素的內容,它先判斷JSON編碼後的數據,然後把它傳遞給handleResponse()函數
在實踐中,支持JSONP的服務不會強制指定客戶端必須實現的回調函數名稱,比如handleResponse。相反,它們使用査詢參數的值,允許客戶端指定一個函數名,然後使用函數名去填充響應。許多支持JSONP的服務都能分辨出這個參數名。另一個常見的參數名稱是callback,爲了讓使用到的服務支持類似特殊的需求,就需要在代碼上做一些修改了
JSONP由兩部分組成:回調函數和數據。回調函數是當響應到來時應該在頁面中調用的函數。回調函數的名字一般是在請求中指定的。而數據就是傳入回調函數中的JSON數據
http://freegeoip.net/json/?callback=handleResponse
這個URL是在請求一個JSONP地理定位服務。通過査詢字符串來指定JSONP服務的回調參數是很常見的,就像上面的URL所示,這裏指定的回調函數的名字叫handleResponse()
JSONP是通過動態<script>元素來使用的,使用時可以爲src屬性指定一個跨域URL。這裏的<script>元素與<img>元素類似,都有能力不受限制地從其他域加載資源。因爲JSONP是有效的javascript代碼,所以在請求完成後,即在JSONP響應加載到頁面中以後,就會立即執行
function handleResponse(response){
alert ("You're at IP address " + response.ip + ", which is in " + response.city + ", "+ response.region_name);
}
var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handLeResponse"; document.body.insertBefore(script, document.body.firstChild);
JSONP之所以在開發人員中極爲流行,主要原因是它非常簡單易用,老式瀏覽器全部支持,服務器改造非常小。與圖像Ping相比,它的優點在於能夠直接訪問響應文本,支持在瀏覽器與服務器之間雙向通信
使用<script>元素進行Ajax傳輸,不受同源策略的影響,因此可以使用它們從其他的服務器請求數據;而且,包含JSON編碼數據的響應體會自動解碼(即執行)
不過,JSONP也有兩點不足:首先,JSONP是從其他域中加載代碼執行。如果其他域不安全,很可能會在響應中夾帶一些惡意代碼,而此時除了完全放棄JSONP調用之外,沒有辦法追究。因此在使用不是自己運維的Web服務時,一定得保證它安全可靠;其次,要確定JSONP請求是否失敗並不容易。雖然HTML5給<script>元素新增了一個onerror事件處理程序,但目前還沒有得到任何瀏覽器支持。爲此,開發人員不得不使用計時器檢測指定時間內是否接收到了響應。但就算這樣也不能盡如人意,畢竟不是每個用戶上網的速度和帶寬都一樣
簡易示例
【前端】
<button id="btn">獲取信息</button>
<img id="img" height="16" style="display:none" src="data:image/gif;base64,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" alt="loading">
<div id="result"></div>
<script>
var add = (function(){
var counter = 0;
return function(){
return ++counter;
}
})();
function loadScript(url){
loadScript.mark = 'load';
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
script.onload = function(){
img.style.display = 'none';
btn.removeAttribute('disabled');
}
document.body.appendChild(script);
}
function test(data){
var sum = add() - 1;
if(sum < data.length ){
result.innerHTML += data[sum];
}
}
btn.onclick = function(){
img.style.display = 'inline-block';
btn.setAttribute('disabled','');
loadScript('https://www.webhuochai.com/test/getData.php?callback=test');
}
</script>
【後端】
<?php
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
$arr = [1,2,3,4,5];
echo test_input($_GET['callback']) ."(" .json_encode($arr) .");";
?>
百度搜索框
百度搜索框就是使用了JSONP的技術,在百度搜索的URL中,有用的查詢如下
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=123&&cb=a
結果爲:
a({q:"123",p:false,s:["12306","12306鐵路客戶服務中心","12308汽車訂票官網","12306火車票網上訂票官網","12333","12315","12345","12333社保查詢網","123網址之家","12366"]});
所以,wd爲關鍵詞,cb用來JSONP的函數名。在獲取的數據中,s爲以關鍵詞開始的數據組成的數據
百度搜索的關鍵URL如下
https://www.baidu.com/s?wd=a
wd爲關鍵詞,當wd=a時,將打開關鍵詞爲a的網頁
<style>
body{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
a{color:inherit;text-decoration: none;}
input{padding: 0;border: 0;}
.box{width: 340px;height: 38px;border: 2px solid gray;}
.con{overflow: hidden;}
.input{float: left;width: 300px;height: 38px;}
.search{width: 38px;height: 38px;float: right;background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/search.png') 0 -38px;}
.list{position: absolute;width: 298px;border: 1px solid #e6e8e9; overflow: hidden;}
.in{line-height: 30px;border-bottom: 1px solid lightblue;cursor:pointer;text-indent: 1em;}
.list .in:last-child{margin-bottom: -1px;}
.in:hover{background-color: #f9f9f9;}
</style>
<div class="box" id="box">
<div class="con">
<input class="input" id="search">
<a target="_blank" id="btn" href="javascript:;" class="search"></a>
</div>
<ul class="list" id="list"></ul>
</div>
<script>
function loadScript(url){
loadScript.mark = 'load';
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
function callback(data){
if(data){
var arr = data.s;
var html = '';
for(var i = 0,len = arr.length; i < len; i++){
html+= "<li class='in'><a href='https://www.baidu.com/s?wd="+ arr[i]+"' target='_blank' style='display:block'>" + arr[i]+ "</a></li>"
}
list.innerHTML = html;
}
}
search.onkeyup = function(e){
e = e || event;
if(e.keyCode == '13'){
window.open('https://www.baidu.com/s?wd=' + this.value);
}
if(this.value){
if(search.data != this.value){
btn.setAttribute('href','https://www.baidu.com/s?wd=' + this.value);
var that = this;
loadScript("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + that.value + "&&cb=callback");
}
}else{
list.innerHTML = '';
}
search.data = this.value;
}
search.onclick = function(e){
e = e || event;
list.style.display = 'block';
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
document.onclick = function(){
list.style.display = 'none';
}
</script>
最後
如果在jQuery中使用jsonp技術,需要使用ajax()方法,將datatype設置爲'jsonp',將jsonp設置爲函數名,如'callback'