事前端開(kāi)發(fā)的小伙伴肯定都用過(guò)jquery的ajax請(qǐng)求，但如果需要跨域請(qǐng)求，就需要用到j(luò)sonp，因?yàn)槟J(rèn)的ajax跨域請(qǐng)求會(huì)被瀏覽器攔截，攔截原因是因?yàn)橹С諮avascript的瀏覽器都會(huì)使用同源策略這個(gè)安全策略。

同源策略看百度解釋：

同源策略，它是由Netscape提出的一個(gè)著名的安全策略。
現(xiàn)在所有支持JavaScript 的瀏覽器都會(huì)使用這個(gè)策略。所謂同源是指，域名，協(xié)議，端口相同。
當(dāng)一個(gè)瀏覽器的兩個(gè)tab頁(yè)中分別打開(kāi)百度和谷歌的頁(yè)面
當(dāng)一個(gè)百度瀏覽器執(zhí)行一個(gè)腳本的時(shí)候會(huì)檢查這個(gè)腳本是屬于哪個(gè)頁(yè)面的
即檢查是否同源，只有和百度同源的腳本才會(huì)被執(zhí)行。

下面說(shuō)一個(gè)使用場(chǎng)景：

網(wǎng)站域名是：http://www.a.com

服務(wù)器后端地址：http://www.b.com/api/，后端文件內(nèi)容如下

 var callBackName = Request.QueryString["callback"];
 string jsonData = "{\"message\":\"ok\"}";
 return callBackName+"("+ jsonData+ ")";

由于域名不一樣，前端請(qǐng)求后端數(shù)據(jù)就需要用到跨域請(qǐng)求，jquery跨域請(qǐng)求的代碼如下：

$.ajax({
 url: "http://www.b.com/api/",
 type: "GET",
 dataType: "jsonp", //必須指定為jsonp
 jsonp: "callback",//服務(wù)端用于接收callback調(diào)用的function名的參數(shù)
 success: function (data) {
console.log(data);
 }
 });

這段代碼執(zhí)行后會(huì)在瀏覽器的控制臺(tái)輸出：{"message":"ok"}

上面這種寫(xiě)法是jquery給我們封裝好的，平時(shí)工作中很多朋友都會(huì)用，但是很多人不知道原理是什么，實(shí)際上這個(gè)請(qǐng)求的原理用javascript的原生寫(xiě)法就是：

<script src="http://www.b.com/api/"></script>

通過(guò)script的開(kāi)放策略，可以調(diào)用任何地址，知道原理后，我們用原生的javascript來(lái)封裝一個(gè)自己的jsonp方法。

設(shè)計(jì)步驟如下：

1、定義一個(gè)jsonp函數(shù)，用于處理接收到的跨域數(shù)據(jù)。

2、函數(shù)中生成一個(gè)dom節(jié)點(diǎn)(script節(jié)點(diǎn))，然后src屬性上面記入發(fā)送的目的URL以及參數(shù)。

3、聲明一個(gè)全局函數(shù)，用來(lái)執(zhí)行回調(diào)。

直接上代碼，下面是我為這次教程特意封裝好的演示代碼。

<script type="text/javascript">
 //obj參數(shù)是一個(gè)對(duì)象
 function jsonp(obj)
 {
 var script = document.createElement("script");
 var callBackFn = obj.callback;
 //組合請(qǐng)求URL
 script.src = obj.url + "?callback=" + callBackFn;
 //獲取數(shù)據(jù)
 for (key in obj.data) {
 script.src += "&" + key + "=" + obj.data[key];
 }
 //將創(chuàng)建的新節(jié)點(diǎn)添加到BOM樹(shù)上
 document.getElementsByTagName("body")[0].appendChild(script);
 //定義一個(gè)回調(diào)函數(shù)名稱同名的全局方法、
 window[callBackFn] = function (object)
 {
 obj.success(object);
 delete window[callBackFn]; //移除回調(diào)函數(shù)
 script.parentNode.removeChild(script);//執(zhí)行完畢后移除節(jié)點(diǎn)
 }
 }
 
//調(diào)用jsonp，跨域請(qǐng)求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>

這里只進(jìn)行核心的封裝，載入，出錯(cuò)的處理、參數(shù)的空值判斷等等自己完善，通過(guò)上面的演示代碼，小伙伴們應(yīng)該對(duì)jsonp的原理有了更清晰的認(rèn)識(shí)。

如果這篇教程能幫助到各種小伙伴，幫忙轉(zhuǎn)發(fā)一下，后續(xù)我會(huì)繼續(xù)分享一些javascript開(kāi)發(fā)相關(guān)的經(jīng)驗(yàn)和技巧。