什麽是jsonp

什麽是jsonp,jsonp是什么,jsonp如何使用

首先先知道

  1. jsonp的核心原理就是目標頁面回調本地頁面的方法,並帶入參數
  2. 我們常用的動態頁面有jsp,php,aspx

爲什麽需要JSONP?

由于浏览器安全限制,数据是不可以直接跨域(包括不同的根域名、二级域名、或不同的端口)请求的,除非目标域名授权你可以访问。比如设置crossdomain.xml 或在http头部里授权

但是crossdomain.xml會允許設置的網站訪問所有的數據,而頭部設置又非常麻煩。

所以可以在你授權的數據返回裏設置jsonp來讓該接口允許所有的調用者獲取數據。

JSONP的原理

jsonp是使用方法回調的原理.

在網頁裏,你如果引入其他網頁的js,那這個頁面的js是可以調用你網頁的代碼的

直接请求js 和 请求的动态页面(jsp,php,aspx)里输出的javascript代码 效果一样

function showjson(json){
	alert(json.url);
}
如果引用的js或动态页面里有 showjson({"url":""});这行代码的话,那就会弹出

jsonp的第一種方式,將目標作爲js形式加載過來,盡管其實對方是一個php

下面我们在这个页面里来请求页面的数据,这个php页面数据会有回调函数showjson,来调用我们这个bejson页面里的 showjson方法 并将一个json传入
< ?php 
	//这里是php页面里,回调showjson方法,這裏的方法必須和上面定義的本地頁面中的回調方法一致
	echo 'showjson({"url":""})';
?>
	
$("#getuserp").click(function(){
	$.getScript("/");
});
	

那如果我們抓包後就會看到(如上圖),點擊按鈕後發起了一個http請求,

請求了/頁面,

页面里输出了 showjson({"url":""}) ,

因爲是以javascript文件形式加載過來 ,所以他會對本地頁面showjson發起回調(看綠色箭頭),並傳入json參數(看紅色箭頭),所以就會彈出了json中的url

直接用jquery的ajax來請求jsonp

 $.ajax({
     url:'/',
     dataType:"jsonp",
     jsonp:"showjson", //这里的参数必须和目标页面里的回调函数一样
     success:function(data){
        alert(data.url);
     }
});