什么是jsonp？

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

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

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

JSON的優(yōu)點：

　　1、基于純文本，跨平臺傳遞極其簡單；

　　2、Javascript原生支持，后臺語言幾乎全部支持；

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

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

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

　　JSON的缺點當(dāng)然也有，但在作者看來實在是無關(guān)緊要的東西，所以不再單獨說明。

有這么一個故事：

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

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

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

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

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

跨域交互一：jQuery.getScript

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

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

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

網(wǎng)頁中的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對象； 
function fncallback(data){ 
$(document.body).append("<hr />getScript ok!" + data.reqUrl); 
} 
//注冊頁面加載完成回調(diào)函數(shù)（匿名） 
$(document).ready(function(){ 
//使用getScript方法調(diào)用跨域腳本； 
$.getScript("http://localhost/test2.php"); 

}); 
</script> 

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

getScript ok!/test2.php?_=1467261287339 

后面為什么會多了個“?_=1467261287339”呢？

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

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

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

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

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

瀏覽器訪問：

通過瀏覽器訪問，自然沒有后面的參數(shù)，除非你自己手動加上；

跨域交互二：jQuery.getJSON

調(diào)用端：

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

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

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

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

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

服務(wù)端

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

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

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

跨域交互三：jQuery.ajax

調(diào)用端：

<script type="text/javascript"> 
//注冊頁面加載完成回調(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> 

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

服務(wù)端

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

使用總結(jié)

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

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

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

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

最新評論