JSONP和AJAX相同,都是客戶端向服務器端發送請求:一、給服務器端傳遞內容二、從服務器端獲取數據 的方式jquery
AJAX屬於同源策略ajax
JSONP屬於非同源策略(跨域請求) -> 實現跨域請求的方式有不少種,只不過JSONP是最經常使用的json
區分同源和非同源:跨域
當前頁面的地址 && 數據請求的接口地址緩存
1)協議 2)域名或者IP 3)端口號服務器
以上三部分徹底相同屬於同源策略,就是用AJAX技術請求數據,若是有一個不一樣就屬於非同源策略,通常使用JSONP技術請求數據異步
JSONP的原理:JSONP請求必定須要對方的服務器作支持才能夠async
在script的世界中,沒有同源跨域這一說,只要你給我src屬性中的地址是一個合法的地址,script均可以把對應的內容請求回來,JSONP就是利用了script的這個原理
一、首先把須要請求數據的那個跨域的API數據接口的地址賦值給script的src屬性中函數
二、把當前頁面中的某一個函數名當作參數值傳遞給須要跨域請求數據的服務器(url問好傳參:callback=fn)jsonp
三、服務器接收到請求後,須要進行特殊的處理,把你傳遞進來的函數名和它須要給你數據拼接成一個字符串, 例如:咱們傳遞進去的函數名是fn,它準備好的數據是"fn([{'name':'xxx'}])"
四、最後服務器把準備的數據經過HTTP協議返回給咱們客戶端,客戶端發現其實就是讓咱們的fn執行,並且還給fn傳遞了一堆的數據,那些數據就是咱們想要的
jquery的ajax和JSONP的調用
ajax:
$.ajax({
url:"",
type:"",
dataType:"json",
data:null,
async:true,
timeout: 1000, //設置超時時間,通常都設置3000ms
cache:false, //設定get請求的時候不走緩存數據,原理就是在url後面加一個緩存數,默認值是true
success:function(data){},
error:function(data){}
})
jsonp:都是GET和異步請求的,不存在其餘的請求方式和同步請求,並且jquery會默認會給JSONP的請求清除緩存
$.ajax({
url:"",
dataType:"jsonp",
timeout: 1000, //設置超時時間,通常都設置3000ms
jsonpCallback:"fn" //自定義傳遞給服務器的函數名,而不是jquery自動生成的
jsonp:"cb" //吧傳遞函數名的那個形參callback變爲cb
})