JSONP是什么
JSONP即JSON with Padding捶索。由于同源策略的限制因妇,XmlHttpRequest只允許請(qǐng)求當(dāng)前源(域名、協(xié)議找蜜、端口)的資源饼暑。如果要進(jìn)行跨域請(qǐng)求, 我們可以通過(guò)使用html的script標(biāo)記來(lái)進(jìn)行跨域請(qǐng)求洗做,并在響應(yīng)中返回要執(zhí)行的script代碼弓叛,其中可以直接使用JSON傳遞javascript對(duì)象。 這種跨域的通訊方式稱為JSONP诚纸。
JSONP的優(yōu)點(diǎn):
它不像XMLHttpRequest對(duì)象實(shí)現(xiàn)的Ajax請(qǐng)求那樣受到同源策略的限制撰筷;它的兼容性更好,在更加古老的瀏覽器中都 可以運(yùn)行畦徘,不需要XMLHttpRequest或ActiveX的支持毕籽;并且在請(qǐng)求完畢后可以通過(guò)調(diào)用callback的方式回傳結(jié)果。
JSONP的缺點(diǎn):
它只支持GET請(qǐng)求而不支持POST等其它類型的HTTP請(qǐng)求旧烧;它只支持跨域HTTP請(qǐng)求這種情況影钉,不能解決不同域的兩個(gè)頁(yè)面之間如何進(jìn)行JavaScript調(diào)用的問(wèn)題画髓。
JSONP原理
JSONP的最基本的原理是:動(dòng)態(tài)添加一個(gè)<script>
標(biāo)簽掘剪,而script標(biāo)簽的src屬性是沒(méi)有跨域的限制的。這樣說(shuō)來(lái)奈虾,這種跨域方式其實(shí)與ajax XmlHttpRequest協(xié)議無(wú)關(guān)了夺谁。
這樣其實(shí)"jQuery AJAX跨域問(wèn)題"就成了個(gè)偽命題廉赔,jquery $.ajax方法名有誤導(dǎo)人之嫌。
如果設(shè)為dataType: 'jsonp'匾鸥,這個(gè)$.ajax方法就和ajax XmlHttpRequest沒(méi)什么關(guān)系了蜡塌,取而代之的則是JSONP協(xié)議。JSONP是一個(gè)非官方的協(xié)議勿负,它允許在服務(wù)器端集成Script tags返回至客戶端馏艾,通過(guò)javascript callback的形式實(shí)現(xiàn)跨域訪問(wèn)。
JSONP的執(zhí)行過(guò)程
首先在客戶端注冊(cè)一個(gè)callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)傳給服務(wù)器奴愉。注意:服務(wù)端得到callback的數(shù)值后琅摩,要用jsonp1236827957501(......)把將要輸出的json內(nèi)容包括起來(lái),此時(shí)锭硼,服務(wù)器生成 json 數(shù)據(jù)才能被客戶端正確接收房资。
然后以 javascript 語(yǔ)法的方式,生成一個(gè)function檀头, function 名字就是傳遞上來(lái)的參數(shù) 'jsoncallback'的值 jsonp1236827957501 .
最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞胶湟欤胖玫?function 中,這樣就生成了一段 js 語(yǔ)法的文檔暑始,返回給客戶端搭独。
客戶端瀏覽器,解析script標(biāo)簽蒋荚,并執(zhí)行返回的 javascript 文檔戳稽,此時(shí)javascript文檔數(shù)據(jù),作為參數(shù)期升, 傳入到了客戶端預(yù)先定義好的 callback 函數(shù)(如上例中jquery $.ajax()方法封裝的的success: function (json))里惊奇。
可以說(shuō)jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>
是一致的(qq空間就是大量采用這種方式來(lái)實(shí)現(xiàn)跨域數(shù)據(jù)交換的)。JSONP是一種腳本注入(Script Injection)行為播赁,所以有一定的安全隱患颂郎。