json相信大家都用的多，jsonp我就一直沒有機(jī)會(huì)用到，但也經(jīng)?？吹?，只知道是“用來跨域的”，一直不知道具體是個(gè)什么東西。今天總算搞明白了。下面一步步來搞清楚jsonp是個(gè)什么玩意。
同源策略
首先基于安全的原因，瀏覽器是存在 同源策略這個(gè)機(jī)制的，同源策略阻止從一個(gè)源加載的文檔或腳本獲取或設(shè)置另一個(gè)源加載的文檔的屬性?？雌饋聿恢朗裁匆馑?，實(shí)踐一下就知道了。
1.隨便建兩個(gè)網(wǎng)頁(yè)
一個(gè)端口是2698，一個(gè)2701，按照定義它們是不同源的。
2.用jQuery發(fā)起不同源的請(qǐng)求
在2698端口的網(wǎng)頁(yè)上添加一個(gè)按鈕，Click事件隨便發(fā)起兩個(gè)向端口為2701域的請(qǐng)求。
$("#getOtherDomainThings").click(function () {
$.get("http://localhost:2701/Scripts/jquery-1.4.4.min.js", function (data) {
console.log(data)
})
$.get("http://localhost:2701/home/index", function (data) {
console.log(data)
})
})根據(jù)同源策略，很明顯會(huì)悲劇了。瀏覽器會(huì)阻止，根本不會(huì)發(fā)起這個(gè)請(qǐng)求。（not allowed by Access-Control-Allow-Origin）
OK，原來jsonp是要解決這個(gè)問題的。
script標(biāo)簽的跨域能力
不知道大家知不知道CDN這個(gè)東西，例如微軟的CDN，使用它，我們的網(wǎng)頁(yè)可以不提供jQuery，由微軟的網(wǎng)站幫我們提供：
回到我們的2698端口的網(wǎng)頁(yè)，上面我們?cè)贑lick事件里有一個(gè)對(duì)2701端口域的jQuery文件的請(qǐng)求，這次使用script標(biāo)簽來請(qǐng)求。
當(dāng)然，200，OK了
同樣是端口2698的網(wǎng)頁(yè)發(fā)起對(duì)2701域的請(qǐng)求，放在script里設(shè)置scr屬性的OK了，另一個(gè)方式就悲劇。利用script的跨域能力，這就是jsonp的基礎(chǔ)。
利用script獲取不同源的json
既然它叫jsonp，很明顯目的還是json，而且是跨域獲取。根據(jù)上面的分析，很容易想到：利用js構(gòu)造一個(gè)script標(biāo)簽，把json的url賦給script的scr屬性，把這個(gè)script插入到dom里，讓瀏覽器去獲取。實(shí)踐：
function CreateScript(src) {
$("
聯(lián)系我們
CONTACT US
公司電話：0531-68961230 QQ:1828686598
公司地址：濟(jì)南市天橋區(qū)中凡魯鼎廣場(chǎng)A座20樓2009
高新技術(shù)企業(yè)編號(hào)：GR202437006411
科技中小企業(yè)編號(hào)：2024370105A8014257
快捷導(dǎo)航
QUICK NAVIGATION
關(guān)注我們
FOCUS ON US
咨詢電話：
15628812133
