什麼是jsonp？
說到jsonp，你可能最先想到JSON；它還真和JSON有關系；
JSONP(JSON with Padding)是JSON的一種“使用模式”，可用於解決主流浏覽器的跨域數據訪問的問題。由於同源策略，一般來說位於 server1.example.com 的網頁無法與不是 server1.example.com的服務器溝通，而 HTML 的<script> 元素是一個例外。利用 <script> 元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料並不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。
JSONP（JSON with Padding），我更傾向於把最後一個字母P理解為 protocol（協議，約定）；
JSON的優點：
1、基於純文本，跨平台傳遞極其簡單；
2、Javascript原生支持，後台語言幾乎全部支持；
3、輕量級數據格式，占用字符數量極少，特別適合互聯網傳遞；
4、可讀性較強，雖然比不上XML那麼一目了然，但在合理的依次縮進之後還是很容易識別的；
5、容易編寫和解析，當然前提是你要知道數據結構；
JSON的缺點當然也有，但在作者看來實在是無關緊要的東西，所以不再單獨說明。
有這麼一個故事：
A男和B女居住在不同的國家A國和B國，在一次去C國旅行的途中相遇了，雙方聊的比較Happy，旅行結束都回國了；但A男總是會想B女，想聯系上B女，無奈當時沒有留下B女的電話、郵箱、微信、QQ號碼這些可以更加即時的聯系方式，只是閒聊間知道B女地址，那就只能寫信吧去C國也不太現實；於是就寫信把自己的各種即時聯系方式都寫進去了，一封信寄出去了過了一段時間沒有回音又寫一封，就是沒有收到C友的電話等任何回音；對方收到了沒有呢，確定是收到了也看了。
這是為什麼呢？C女不想搭理他呗（沒有按A男指定的方式回調）！
JSONP就是這麼一回事，你知道對方的調用地址，告訴對方你的回調函數名稱是什麼，但對方如果不配合，就是不調用你約定的回調函數名稱，你調用多少次也沒用，所以JSONP的關鍵還是要對方配合你才行。
js跨域交互實現原理
HTML <script> 標簽，對就是它，世界因它而美好！
你可以使用這個標簽加載任何其它可訪問到的網站的js文件試試，我就不多說了；
跨域交互一：jQuery.getScript
這個例子比較簡單易懂，使用固定的回調函數名稱：fncallback
調用端，也可以說是客戶端：
我是在本地測試，跑了多個Web服務，本地頁面訪問地址：http://localhost:88/
網頁中的JS代碼如下：
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//定義名稱為“fncallback”的回調函數，參數接收JSON對象；
function fncallback(data){
$(document.body).append("<hr />getScript ok!" + data.reqUrl);
}
//注冊頁面加載完成回調函數（匿名）
$(document).ready(function(){
//使用getScript方法調用跨域腳本；
$.getScript("http://localhost/test2.php");
});
</script>
效果：在頁面尾部增加一條線，以及：getScript ok! ，後面緊跟被調用端返回的它接收到的請求地址：
getScript ok!/test2.php?_=1467261287339
後面為什麼會多了個“?_=1467261287339”呢？
這是防止浏覽器從緩存去加載這個URL地址的內容的！由jQuery自動添加；
被調用端，也可以說是服務端
服務端後台語言是PHP，通過Nginx代理的，端口為：80，所以訪問地址是：http://localhost/test2.php
test2.php 文件的內容：
<?php
echo "var reqUrl = \"" . $_SERVER["REQUEST_URI"] . "\";";
echo "fncallback({\"reqUrl\": reqUrl });";
浏覽器訪問：
通過浏覽器訪問，自然沒有後面的參數，除非你自己手動加上；
跨域交互二：jQuery.getJSON
調用端：
<script type="text/javascript">
//注冊頁面加載完成回調函數（匿名）
$(document).ready(function(){
//使用getJSON方法調用跨域腳本；注冊匿名回調函數
$.getJSON("http://localhost/test.php?callback=?", function(data){
$(document.body).append("<hr />getJSON ok!" + data.reqUrl);
});
});
</script>
注意：我在請求的地址中添加了“?callback=?”，這是做什麼用的呢？
目的是讓jQuery為我自動生成一個回調函數的名稱，並將我注冊的匿名回調函數映射到這個“自動生成的回調函數名稱”上；
有點繞，我們來看看服務端返回的它收到的請求地址就明白了：
getJSON ok!/test.php?callback=jQuery1102031468501139651384_1467262280037&_=1467262280038
看到callback後面跟了參數值了吧，這就是jQuery自動生成的；再看服務端代碼；
服務端
<?php
echo "var reqUrl = \"" . $_SERVER["REQUEST_URI"] . "\";";
echo $_GET["callback"] . "({\"reqUrl\": reqUrl });";
通過 $_GET["callback"] 獲取客戶端傳遞過來的回調函數名稱；看輸出：
var reqUrl = "/test.php?callback=jQuery1102019717387174726153_1467262461959&_=1467262461960";
jQuery1102019717387174726153_1467262461959({"reqUrl": reqUrl });
跨域交互三：jQuery.ajax
調用端：
<script type="text/javascript">
//注冊頁面加載完成回調函數（匿名）
$(document).ready(function(){
//使用ajax方法調用跨域腳本；
$.ajax({
url:"http://localhost/test.php",
dataType: 'jsonp',
success: function(data){
$(document.body).append("<hr />ajax ok!" + data.reqUrl);
}
});
});
</script>
注意：在請求的地址中不需要添加“?callback=?”，但我們使用“dataType: 'jsonp',”；
服務端
這個例子的服務端和上個是完全一樣的！
使用總結
使用 getScript 的方式，你可以自己定義一個回調函數的名稱，讓服務端響應的時候使用你指定的回調函數名稱；
使用 getJSON 的方式關鍵在於URL後面添加的“callback=?”；
使用 ajax 的方式關鍵在於參數中的數據類型設置“dataType: 'jsonp',”；
以上所述是小編給大家介紹的JS跨域交互(jQuery+php)之jsonp使用心得，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！