欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

JSONP基礎(chǔ)知識(shí)詳解

前面的話

創(chuàng)新互聯(lián)技術(shù)團(tuán)隊(duì)十年來致力于為客戶提供成都網(wǎng)站制作、成都做網(wǎng)站、成都品牌網(wǎng)站建設(shè)網(wǎng)絡(luò)營(yíng)銷推廣、搜索引擎SEO優(yōu)化等服務(wù)。經(jīng)過多年發(fā)展,公司擁有經(jīng)驗(yàn)豐富的技術(shù)團(tuán)隊(duì),先后服務(wù)、推廣了成百上千網(wǎng)站,包括各類中小企業(yè)、企事單位、高校等機(jī)構(gòu)單位。

JSONP是JSON with padding(填充式JSON或參數(shù)式JSON)的簡(jiǎn)寫,是應(yīng)用JSON的一種新方法,常用于務(wù)器與客戶端跨源通信,在后來的Web服務(wù)中非常流行。本文將詳細(xì)介紹JSONP

基礎(chǔ)

JSONP的基本思想是,網(wǎng)頁通過添加一個(gè)<script>元素,向服務(wù)器請(qǐng)求JSON數(shù)據(jù),這種做法不受同源政策限制;服務(wù)器收到請(qǐng)求后,將數(shù)據(jù)放在一個(gè)指定名字的回調(diào)函數(shù)里傳回來

當(dāng)通過<script>元素調(diào)用數(shù)據(jù)時(shí),響應(yīng)內(nèi)容必須用javascript函數(shù)名和圓括號(hào)包裹起來。而不是發(fā)送這樣一段JSON數(shù)據(jù),這就是JSONP中P的意義所在

[1, 2, {"buckle": "my shoe"}]

JSONP看起來與JSON差不多,只不過是被包含在函數(shù)調(diào)用中的JSON,它會(huì)發(fā)送這樣一個(gè)包裹后的JSON響應(yīng):

handleResponse([l, 2, {"buckle": "my shoe"}])

包裹后的響應(yīng)會(huì)成為<script>元素的內(nèi)容,它先判斷JSON編碼后的數(shù)據(jù),然后把它傳遞給handleResponse()函數(shù)

在實(shí)踐中,支持JSONP的服務(wù)不會(huì)強(qiáng)制指定客戶端必須實(shí)現(xiàn)的回調(diào)函數(shù)名稱,比如handleResponse。相反,它們使用査詢參數(shù)的值,允許客戶端指定一個(gè)函數(shù)名,然后使用函數(shù)名去填充響應(yīng)。許多支持JSONP的服務(wù)都能分辨出這個(gè)參數(shù)名。另一個(gè)常見的參數(shù)名稱是callback,為了讓使用到的服務(wù)支持類似特殊的需求,就需要在代碼上做一些修改了

JSONP由兩部分組成:回調(diào)函數(shù)和數(shù)據(jù)?;卣{(diào)函數(shù)是當(dāng)響應(yīng)到來時(shí)應(yīng)該在頁面中調(diào)用的函數(shù)?;卣{(diào)函數(shù)的名字一般是在請(qǐng)求中指定的。而數(shù)據(jù)就是傳入回調(diào)函數(shù)中的JSON數(shù)據(jù)

http://freegeoip.net/json/?callback=handleResponse

這個(gè)URL是在請(qǐng)求一個(gè)JSONP地理定位服務(wù)。通過査詢字符串來指定JSONP服務(wù)的回調(diào)參數(shù)是很常見的,就像上面的URL所示,這里指定的回調(diào)函數(shù)的名字叫handleResponse()

JSONP是通過動(dòng)態(tài)<script>元素來使用的,使用時(shí)可以為src屬性指定一個(gè)跨域URL。這里的<script>元素與<img>元素類似,都有能力不受限制地從其他域加載資源。因?yàn)镴SONP是有效的javascript代碼,所以在請(qǐng)求完成后,即在JSONP響應(yīng)加載到頁面中以后,就會(huì)立即執(zhí)行

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之所以在開發(fā)人員中極為流行,主要原因是它非常簡(jiǎn)單易用,老式瀏覽器全部支持,服務(wù)器改造非常小。與圖像Ping相比,它的優(yōu)點(diǎn)在于能夠直接訪問響應(yīng)文本,支持在瀏覽器與服務(wù)器之間雙向通信

使用<script>元素進(jìn)行Ajax傳輸,不受同源策略的影響,因此可以使用它們從其他的服務(wù)器請(qǐng)求數(shù)據(jù);而且,包含JSON編碼數(shù)據(jù)的響應(yīng)體會(huì)自動(dòng)解碼(即執(zhí)行)

不過,JSONP也有兩點(diǎn)不足:首先,JSONP是從其他域中加載代碼執(zhí)行。如果其他域不安全,很可能會(huì)在響應(yīng)中夾帶一些惡意代碼,而此時(shí)除了完全放棄JSONP調(diào)用之外,沒有辦法追究。因此在使用不是自己運(yùn)維的Web服務(wù)時(shí),一定得保證它安全可靠;其次,要確定JSONP請(qǐng)求是否失敗并不容易。雖然HTML5給<script>元素新增了一個(gè)onerror事件處理程序,但目前還沒有得到任何瀏覽器支持。為此,開發(fā)人員不得不使用計(jì)時(shí)器檢測(cè)指定時(shí)間內(nèi)是否接收到了響應(yīng)。但就算這樣也不能盡如人意,畢竟不是每個(gè)用戶上網(wǎng)的速度和帶寬都一樣

簡(jiǎn)易示例

【前端】

<button id="btn">獲取信息</button>
<img id="img" height="16"  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的技術(shù),在百度搜索的URL中,有用的查詢?nèi)缦?/p>

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=123&&cb=a

結(jié)果為:

a({q:"123",p:false,s:["12306","12306鐵路客戶服務(wù)中心","12308汽車訂票官網(wǎng)","12306火車票網(wǎng)上訂票官網(wǎng)","12333","12315","12345","12333社保查詢網(wǎng)","123網(wǎng)址之家","12366"]});

所以,wd為關(guān)鍵詞,cb用來JSONP的函數(shù)名。在獲取的數(shù)據(jù)中,s為以關(guān)鍵詞開始的數(shù)據(jù)組成的數(shù)據(jù)

百度搜索的關(guān)鍵URL如下

https://www.baidu.com/s?wd=a

wd為關(guān)鍵詞,當(dāng)wd=a時(shí),將打開關(guān)鍵詞為a的網(wǎng)頁

<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('/upload/otherpic52/76021.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:;" rel="external nofollow" 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 + 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>

以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持創(chuàng)新互聯(lián)!

網(wǎng)站標(biāo)題:JSONP基礎(chǔ)知識(shí)詳解
文章來源:http://chinadenli.net/article36/gsggpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版網(wǎng)站營(yíng)銷、、標(biāo)簽優(yōu)化、網(wǎng)站排名企業(yè)建站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計(jì)