jsonp原理及JSONP實現方式

1.什麼是JSONP?jquery

爲了便於客戶端使用數據,逐漸造成了一種非正式傳輸協議,人們把它稱做JSONP,該協議的一個要點就是容許用戶傳遞一個callback參數給服務端,而後服務端返回數據時會將這個callback參數做爲函數名來包裹住JSON數據,這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了。ajax

JSON是一種輕量級的數據傳輸格式,大部分先後端分離的架構都以JSON格式進行數據的傳輸。json

JSONP就是用來解決跨域請求問題後端

2.JSONP原理
ajax請求受同源策略影響,不容許進行跨域請求,而script標籤src屬性中的連接卻能夠訪問跨域的js腳本,利用這個特性,服務端再也不返回JSON格式的數據,而是返回一段調用某個函數的js代碼,在src中進行了調用,這樣實現了跨域。跨域

跨域的原理
       1:使用script 標籤發送請求,這個標籤支持跨域訪問
       2:在script 標籤裏面給服務器端傳遞一個 callback
       3:callback 的值對應到頁面必定要定義一個全局函數(爲何是全局?由於服務端接收到callback函數後會返回頁面中的script中去找,若是不寫在全局做用域中根本找不到)
       4:服務端返回的是一個函數的調用。調用的時候會吧數據做爲參數包在這個函數裏面。瀏覽器



同源策略
瀏覽器是存在同源策略這個機制的,同源策略阻止從一個源加載的文檔或腳本獲取或設置另外一個源加載的文檔的屬性。服務器

總結:
就是利用script標籤繞過同源策略,得到一個相似這樣的數據,jsonpcallback是頁面存在的回調方法,參數就是想獲得的json。架構

JSONP爲何不支持post請求
1.JSONP的優勢是:它不像XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制;它的兼容性更好,在更加古老的瀏覽器中都 能夠運行,不須要XMLHttpRequest或ActiveX的支持;而且在請求完畢後能夠經過調用callback的方式回傳結果。前後端分離

2.JSONP的缺點則是:它只支持GET請求而不支持POST等其它類型的HTTP請求;它只支持跨域HTTP請求這種狀況,不能解決不一樣域的兩個頁面之間如何進行JavaScript調用的問題。函數

3.JSONP的最基本的原理是:動態添加一個<script>標籤,而script標籤的src屬性是沒有跨域的限制的。這樣說來,這種跨域方式其實與ajax XmlHttpRequest協議無關了。
jsonp的本質是:動態建立script標籤,而後經過他的src屬性發送跨域請求,不一樣意而後服務器相應的數據格式爲【函數調用foo(實參)】,因此在發送請求以前必須聲明一個函數,而且函數的名字與參數中傳遞的名字要一致。

能夠說jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的,由於他的原理實際上就是 使用js的script標籤 進行傳參,那麼必然是get方式的了,和瀏覽器中敲入一個url同樣

原理就是從服務端加載一段腳本(用script標籤),而後把數據放到一個函數參數裏面,再而後瀏覽器裏定義的那個函數就能拿到那個數據了~因此爲啥不能發post 由於標籤裏只能發get雖然, jsonp 的實現跟 ajax 沒有半毛錢關係,jsonp是經過 script的src實現的,可是最終目的都是向服務器請求數據而後回調,並且爲了方便,因此jquery把 jsonp 也封裝在了 $.ajax 方法中,調用方式與 ajax 調用方式略有區別。

相關文章
相關標籤/搜索