什么是jsonp？

說(shuō)到j(luò)sonp，你可能最先想到JSON；它還真和JSON有關(guān)系；

JSONP(JSON with Padding)是JSON的一種“使用模式”，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問(wèn)的問(wèn)題。由于同源策略，一般來(lái)說(shuō)位于 server1.example.com 的網(wǎng)頁(yè)無(wú)法與不是 server1.example.com的服務(wù)器溝通，而 HTML 的<script> 元素是一個(gè)例外。利用 <script> 元素的這個(gè)開(kāi)放策略，網(wǎng)頁(yè)可以得到從其他來(lái)源動(dòng)態(tài)產(chǎn)生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執(zhí)行而不是用 JSON 解析器解析。

JSONP（JSON with Padding），我更傾向于把最后一個(gè)字母P理解為 protocol（協(xié)議，約定）；

JSON的優(yōu)點(diǎn)：

　　1、基于純文本，跨平臺(tái)傳遞極其簡(jiǎn)單；

　　2、Javascript原生支持，后臺(tái)語(yǔ)言幾乎全部支持；

　　3、輕量級(jí)數(shù)據(jù)格式，占用字符數(shù)量極少，特別適合互聯(lián)網(wǎng)傳遞；

　　4、可讀性較強(qiáng)，雖然比不上XML那么一目了然，但在合理的依次縮進(jìn)之后還是很容易識(shí)別的；

　　5、容易編寫和解析，當(dāng)然前提是你要知道數(shù)據(jù)結(jié)構(gòu)；

　　JSON的缺點(diǎn)當(dāng)然也有，但在作者看來(lái)實(shí)在是無(wú)關(guān)緊要的東西，所以不再單獨(dú)說(shuō)明。

有這么一個(gè)故事：

A男和B女居住在不同的國(guó)家A國(guó)和B國(guó)，在一次去C國(guó)旅行的途中相遇了，雙方聊的比較Happy，旅行結(jié)束都回國(guó)了；但A男總是會(huì)想B女，想聯(lián)系上B女，無(wú)奈當(dāng)時(shí)沒(méi)有留下B女的電話、郵箱、微信、QQ號(hào)碼這些可以更加即時(shí)的聯(lián)系方式，只是閑聊間知道B女地址，那就只能寫信吧去C國(guó)也不太現(xiàn)實(shí)；于是就寫信把自己的各種即時(shí)聯(lián)系方式都寫進(jìn)去了，一封信寄出去了過(guò)了一段時(shí)間沒(méi)有回音又寫一封，就是沒(méi)有收到C友的電話等任何回音；對(duì)方收到了沒(méi)有呢，確定是收到了也看了。
這是為什么呢？C女不想搭理他唄（沒(méi)有按A男指定的方式回調(diào)）！

JSONP就是這么一回事，你知道對(duì)方的調(diào)用地址，告訴對(duì)方你的回調(diào)函數(shù)名稱是什么，但對(duì)方如果不配合，就是不調(diào)用你約定的回調(diào)函數(shù)名稱，你調(diào)用多少次也沒(méi)用，所以JSONP的關(guān)鍵還是要對(duì)方配合你才行。

js跨域交互實(shí)現(xiàn)原理

HTML <script> 標(biāo)簽，對(duì)就是它，世界因它而美好！

你可以使用這個(gè)標(biāo)簽加載任何其它可訪問(wèn)到的網(wǎng)站的js文件試試，我就不多說(shuō)了；

跨域交互一：jQuery.getScript

這個(gè)例子比較簡(jiǎn)單易懂，使用固定的回調(diào)函數(shù)名稱：fncallback

調(diào)用端，也可以說(shuō)是客戶端：

我是在本地測(cè)試，跑了多個(gè)Web服務(wù)，本地頁(yè)面訪問(wèn)地址：http://localhost:88/

網(wǎng)頁(yè)中的JS代碼如下：

<script type="text/javascript" src="jquery-1.10.2.min.js"></script> 
<script type="text/javascript"> 
//定義名稱為“fncallback”的回調(diào)函數(shù)，參數(shù)接收J(rèn)SON對(duì)象； 
function fncallback(data){ 
$(document.body).append("<hr />getScript ok!" + data.reqUrl); 
} 
//注冊(cè)頁(yè)面加載完成回調(diào)函數(shù)（匿名） 
$(document).ready(function(){ 
//使用getScript方法調(diào)用跨域腳本； 
$.getScript("http://localhost/test2.php"); 

}); 
</script> 

效果：在頁(yè)面尾部增加一條線，以及：getScript ok! ，后面緊跟被調(diào)用端返回的它接收到的請(qǐng)求地址：

getScript ok!/test2.php?_=1467261287339 

后面為什么會(huì)多了個(gè)“?_=1467261287339”呢？

這是防止瀏覽器從緩存去加載這個(gè)URL地址的內(nèi)容的！由jQuery自動(dòng)添加；

被調(diào)用端，也可以說(shuō)是服務(wù)端

服務(wù)端后臺(tái)語(yǔ)言是PHP，通過(guò)Nginx代理的，端口為：80，所以訪問(wèn)地址是：http://localhost/test2.php

test2.php 文件的內(nèi)容：

<?php 
echo "var reqUrl = \"" . $_SERVER["REQUEST_URI"] . "\";"; 
echo "fncallback({\"reqUrl\": reqUrl });"; 

瀏覽器訪問(wèn)：

通過(guò)瀏覽器訪問(wèn)，自然沒(méi)有后面的參數(shù)，除非你自己手動(dòng)加上；

跨域交互二：jQuery.getJSON

調(diào)用端：

<script type="text/javascript"> 
//注冊(cè)頁(yè)面加載完成回調(diào)函數(shù)（匿名） 
$(document).ready(function(){ 
//使用getJSON方法調(diào)用跨域腳本；注冊(cè)匿名回調(diào)函數(shù) 
$.getJSON("http://localhost/test.php?callback=?", function(data){ 
$(document.body).append("<hr />getJSON ok!" + data.reqUrl); 
}); 
}); 
</script> 

注意：我在請(qǐng)求的地址中添加了“?callback=?”，這是做什么用的呢？

目的是讓jQuery為我自動(dòng)生成一個(gè)回調(diào)函數(shù)的名稱，并將我注冊(cè)的匿名回調(diào)函數(shù)映射到這個(gè)“自動(dòng)生成的回調(diào)函數(shù)名稱”上；
有點(diǎn)繞，我們來(lái)看看服務(wù)端返回的它收到的請(qǐng)求地址就明白了：

getJSON ok!/test.php?callback=jQuery1102031468501139651384_1467262280037&_=1467262280038 

看到callback后面跟了參數(shù)值了吧，這就是jQuery自動(dòng)生成的；再看服務(wù)端代碼；

服務(wù)端

<?php 
echo "var reqUrl = \"" . $_SERVER["REQUEST_URI"] . "\";"; 
echo $_GET["callback"] . "({\"reqUrl\": reqUrl });"; 

通過(guò) $_GET["callback"] 獲取客戶端傳遞過(guò)來(lái)的回調(diào)函數(shù)名稱；看輸出：

var reqUrl = "/test.php?callback=jQuery1102019717387174726153_1467262461959&_=1467262461960"; 
jQuery1102019717387174726153_1467262461959({"reqUrl": reqUrl });

跨域交互三：jQuery.ajax

調(diào)用端：

<script type="text/javascript"> 
//注冊(cè)頁(yè)面加載完成回調(diào)函數(shù)（匿名） 
$(document).ready(function(){ 
//使用ajax方法調(diào)用跨域腳本； 
$.ajax({ 
url:"http://localhost/test.php", 
dataType: 'jsonp', 
success: function(data){ 
$(document.body).append("<hr />ajax ok!" + data.reqUrl); 
} 
}); 
}); 
</script> 

注意：在請(qǐng)求的地址中不需要添加“?callback=?”，但我們使用“dataType: 'jsonp',”；

服務(wù)端

這個(gè)例子的服務(wù)端和上個(gè)是完全一樣的！

使用總結(jié)

使用 getScript 的方式，你可以自己定義一個(gè)回調(diào)函數(shù)的名稱，讓服務(wù)端響應(yīng)的時(shí)候使用你指定的回調(diào)函數(shù)名稱；

使用 getJSON 的方式關(guān)鍵在于URL后面添加的“callback=?”；

使用 ajax 的方式關(guān)鍵在于參數(shù)中的數(shù)據(jù)類型設(shè)置“dataType: 'jsonp',”；

以上所述是小編給大家介紹的JS跨域交互(jQuery+php)之jsonp使用心得，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論