從事前端開發的小伙伴肯定都用過jquery的ajax請求，但如果需要跨域請求，就需要用到jsonp，因為默認的ajax跨域請求會被瀏覽器攔截，攔截原因是因為支持JAVAscript的瀏覽器都會使用同源策略這個安全策略。
同源策略看百度解釋：
同源策略，它是由Netscape提出的一個著名的安全策略。 現在所有支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。 當一個瀏覽器的兩個tab頁中分別打開百度和谷歌的頁面 當一個百度瀏覽器執行一個腳本的時候會檢查這個腳本是屬于哪個頁面的 即檢查是否同源，只有和百度同源的腳本才會被執行。
ajax
下面說一個使用場景：
網站域名是：http://www.a.com
服務器后端地址：http://www.b.com/api/，后端文件內容如下
var callBackName = Request.QueryString["callback"];
string jsonData = "{"message":"ok"}";
return callBackName+"("+ jsonData+ ")";
由于域名不一樣，前端請求后端數據就需要用到跨域請求，jquery跨域請求的代碼如下：
$.ajax({
url: "http://www.b.com/api/",
type: "GET",
dataType: "jsonp", //必須指定為jsonp
jsonp: "callback",//服務端用于接收callback調用的function名的參數
success: function (data) {
console.log(data);
}
});
這段代碼執行后會在瀏覽器的控制臺輸出：{"message":"ok"}
上面這種寫法是jquery給我們封裝好的，平時工作中很多朋友都會用，但是很多人不知道原理是什么，實際上這個請求的原理用javascript的原生寫法就是：
<script src="http://www.b.com/api/"></script>
通過script的開放策略，可以調用任何地址，知道原理后，我們用原生的javascript來封裝一個自己的jsonp方法。
設計步驟如下：
1、定義一個jsonp函數，用于處理接收到的跨域數據。
2、函數中生成一個dom節點(script節點)，然后src屬性上面記入發送的目的URL以及參數。
3、聲明一個全局函數，用來執行回調。
直接上代碼，下面是我為這次教程特意封裝好的演示代碼。
<script type="text/javascript">
//obj參數是一個對象
function jsonp(obj)
{
var script = document.createElement("script");
var callBackFn = obj.callback;
//組合請求URL
script.src = obj.url + "?callback=" + callBackFn;
//獲取數據
for (key in obj.data) {
script.src += "&" + key + "=" + obj.data[key];
}
//將創建的新節點添加到BOM樹上
document.getElementsByTagName("body")[0].AppendChild(script);
//定義一個回調函數名稱同名的全局方法、
window[callBackFn] = function (object)
{
obj.success(object);
delete window[callBackFn]; //移除回調函數
script.parentNode.removeChild(script);//執行完畢后移除節點
}
}
//調用jsonp，跨域請求http://www.b.com/api/
jsonp({
url: "http://www.b.com/api/",
callback: "callback",
data: { "id": 1 },
success: function (data)
{
console.log(data); //輸出：{"message":"ok"}
}
});
</script>
這里只進行核心的封裝，載入，出錯的處理、參數的空值判斷等等自己完善，通過上面的演示代碼，小伙伴們應該對jsonp的原理有了更清晰的認識。
如果這篇教程能幫助到各種小伙伴，幫忙轉發一下，后續我會繼續分享一些javascript開發相關的經驗和技巧。
