一、同源策略
要理解跨域酷窥，先要了解一下“同源策略”咽安。所謂同源是指，域名蓬推，協(xié)議妆棒，端口相同。所謂“同源策略“，簡單的說就是基于安全考慮糕珊，當(dāng)前域不能訪問其他域的東西蛋铆。
一些常見的是否同源示例可參照下表：
在同源策略下，在某個(gè)服務(wù)器下的頁面是無法獲取到該服務(wù)器以外的數(shù)據(jù)的放接。例如我們在自己的網(wǎng)站通過ajax去獲取豆瓣上https://developers.douban.com/wiki/?title=api_v2提供的接口數(shù)據(jù)。這里我們以搜索圖書為例留特，參數(shù)鏈接為：https://api.douban.com/v2/book/search?q=javascript&count=1纠脾，該鏈接中數(shù)據(jù)為JSON格式，如下：
我通過如下代碼去訪問該數(shù)據(jù)：
運(yùn)行之后會報(bào)錯(cuò)：
二蜕青、JSONP
JSONP 是 JSON with padding（填充式 JSON 或參數(shù)式 JSON）的簡寫苟蹈。
JSONP實(shí)現(xiàn)跨域請求的原理簡單的說，就是動態(tài)創(chuàng)建標(biāo)簽右核，然后利用的src 不受同源策略約束來跨域獲取數(shù)據(jù)慧脱。
JSONP 由兩部分組成：回調(diào)函數(shù)和數(shù)據(jù)『睾龋回調(diào)函數(shù)是當(dāng)響應(yīng)到來時(shí)應(yīng)該在頁面中調(diào)用的函數(shù)菱鸥。回調(diào)函數(shù)的名字一般是在請求中指定的躏鱼。而數(shù)據(jù)就是傳入回調(diào)函數(shù)中的 JSON 數(shù)據(jù)氮采。
動態(tài)創(chuàng)建<sript>標(biāo)簽，設(shè)置其src染苛，回調(diào)函數(shù)在src中設(shè)置：標(biāo)簽鹊漠，設(shè)置其src，回調(diào)函數(shù)在src中設(shè)置：
var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
在頁面中茶行，返回的JSON作為參數(shù)傳入回調(diào)函數(shù)中躯概，我們通過回調(diào)函數(shù)來來操作數(shù)據(jù)。
functionhandleResponse(response){
? ? ? ? // 對response數(shù)據(jù)進(jìn)行操作代碼
}
了解了JSONP的基本使用方法畔师，我們在實(shí)現(xiàn)上面通過ajax調(diào)用豆瓣接口的需求娶靡，實(shí)現(xiàn)代碼如下：
在控制臺，我們可以查看到返回的response數(shù)據(jù)格式為JSON對象格式的茉唉，具體需要取出哪些參數(shù)固蛾，可以根據(jù)自己的需要：
JSONP目前還是比較流行的跨域方式，雖然JSONP使用起來方便度陆，但是也存在一些問題：?
首先艾凯， JSONP 是從其他域中加載代碼執(zhí)行。如果其他域不安全懂傀，很可能會在響應(yīng)中夾帶一些惡意代碼趾诗，而此時(shí)除了完全放棄 JSONP 調(diào)用之外，沒有辦法追究。因此在使用不是你自己運(yùn)維的 Web 服務(wù)時(shí)恃泪，一定得保證它安全可靠郑兴。
其次，要確定 JSONP 請求是否失敗并不容易贝乎。雖然 HTML5 給<script>元素新增了一個(gè)onerror事件處理程序情连，但目前沒有得到任何瀏覽器的支持。因此開發(fā)人員不得不使用計(jì)時(shí)器檢測時(shí)間內(nèi)是否接收到了響應(yīng)览效。元素新增了一個(gè) onerror事件處理程序却舀，但目前還沒有得到任何瀏覽器支持。為此锤灿，開發(fā)人員不得不使用計(jì)時(shí)器檢測指定時(shí)間內(nèi)是否接收到了響應(yīng)挽拔。
二、jQuery封裝JSONP
對于經(jīng)常用jQuery的開發(fā)者來說但校，能注意到j(luò)Query封裝的$.ajax中有一個(gè)dataType屬性螃诅，如果將該屬性設(shè)置成dataType:"jsonp"，就能實(shí)現(xiàn)JSONP跨域了状囱。需要了解的一點(diǎn)是术裸，雖然jQuery將JSONP封裝在$.ajax中，但是其本質(zhì)與$.ajax不一樣浪箭。
通過jQuery的$.ajax實(shí)現(xiàn)跨域的代碼參考如下：
最后的結(jié)果與JavaScript通過動態(tài)添加<script>標(biāo)簽得到的結(jié)果是一樣的穗椅。標(biāo)簽得到的結(jié)果是一樣的。
通過$.getJSON(）
利用getJSON來實(shí)現(xiàn)奶栖，只要在地址中加上callback=?參數(shù)即可匹表，參考代碼如下：
$.getJSON("https://api.douban.com/v2/book/search?q=javascript&count=1&callback=?", function(data){
? ? ? ? console.log(data);
});
這樣也能實(shí)現(xiàn)跨域的功能。
注：轉(zhuǎn)載自? ? https://blog.csdn.net/u014607184/article/details/52027879? 宣鄙，感謝樓主分享袍镀，解決了我的問題
