為什么需要JSONP?

由于瀏覽器安全限制,數(shù)據(jù)是不可以直接跨域(包括不同的根域名、二級(jí)域名、或不同的端口)請(qǐng)求的,除非目標(biāo)域名授權(quán)你可以訪問(wèn)。比如設(shè)置crossdomain.xml 或在http頭部里授權(quán)

但是crossdomain.xml會(huì)允許設(shè)置的網(wǎng)站訪問(wèn)所有的數(shù)據(jù),而頭部設(shè)置又非常麻煩。

所以可以在你授權(quán)的數(shù)據(jù)返回里設(shè)置jsonp來(lái)讓該接口允許所有的調(diào)用者獲取數(shù)據(jù)。

JSONP的原理

jsonp是使用方法回調(diào)的原理.

在網(wǎng)頁(yè)里,你如果引入其他網(wǎng)頁(yè)的js,那這個(gè)頁(yè)面的js是可以調(diào)用你網(wǎng)頁(yè)的代碼的

直接請(qǐng)求js 和 請(qǐng)求的動(dòng)態(tài)頁(yè)面(jsp,php,aspx)里輸出的javascript代碼 效果一樣

function showjson(json){
	alert(json.url);
}

如果引用的js或動(dòng)態(tài)頁(yè)面里有 showjson({"url":"http://www.dg112.com"});這行代碼的話,那就會(huì)彈出 http://www.dg112.com

jsonp的第一種方式,將目標(biāo)作為js形式加載過(guò)來(lái),盡管其實(shí)對(duì)方是一個(gè)php

下面我們?cè)谶@個(gè)頁(yè)面里來(lái)請(qǐng)求頁(yè)面的數(shù)據(jù),這個(gè)php頁(yè)面數(shù)據(jù)會(huì)有回調(diào)函數(shù)showjson,來(lái)調(diào)用我們這個(gè)bejson頁(yè)面里的 showjson方法 并將一個(gè)json傳入

< ?php 
	//這里是php頁(yè)面里,回調(diào)showjson方法,這里的方法必須和上面定義的本地頁(yè)面中的回調(diào)方法一致
	echo 'showjson({"url":"http://www.dg112.com"})';
?>
	

$("#getuserp").click(function(){
	$.getScript("http://www.dg112.com/");
});
	

那如果我們抓包后就會(huì)看到(如上圖),點(diǎn)擊按鈕后發(fā)起了一個(gè)http請(qǐng)求,

請(qǐng)求了//www.dg112.com/頁(yè)面,

頁(yè)面里輸出了 showjson({"url":"http://www.dg112.com"}) ,

因?yàn)槭且?a target="_blank">javascript文件形式加載過(guò)來(lái) ,所以他會(huì)對(duì)本地頁(yè)面showjson發(fā)起回調(diào)(看綠色箭頭),并傳入json參數(shù)(看紅色箭頭),所以就會(huì)彈出了json中的url

直接用jquery的ajax來(lái)請(qǐng)求jsonp

 $.ajax({
     url:'//www.dg112.com/',
     dataType:"jsonp",
     jsonp:"showjson", //這里的參數(shù)必須和目標(biāo)頁(yè)面里的回調(diào)函數(shù)一樣
     success:function(data){
        alert(data.url);
     }
});