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（協議，約定）；

有這麼一個故事：

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!/test2.php?_=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>

目的是讓jQuery為我自動生成一個回撥函式的名稱，並將我註冊的匿名回撥函式對映到這個“自動生成的回撥函式名稱”上；

有點繞，我們來看看服務端返回的它收到的請求地址就明白了：

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

服務端

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

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>

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

使用總結

使用 getScript 的方式，你可以自己定義一個回撥函式的名稱，讓服務端響應的時候使用你指定的回撥函式名稱；

使用 getJSON 的方式關鍵在於URL後面新增的“callback=?”；

使用 ajax 的方式關鍵在於引數中的資料型別設定“dataType: 'jsonp',”；

這幾種方式都可以實現跨域互動的功能，你喜歡哪一種呢？

是否還有其它的方式呢？

===========文件分隔線===========

一個人思維的進步和生活狀況的改善根本就是同一件事。

===========文件資訊============ 

署名(BY) ：testcs_dn(微wx笑) 
文章出處：[無知人生，記錄點滴](http://blog.csdn.net/testcs_dn)