什麼是jsonp?有什麼用處?本篇文章就帶大家來認識jsonp及對jsonp原理的理解,有需要的朋友可以參考一下。
話不多說,我們直接進入正文~
jsonp是什麼?
我們可以從網路上查到jsonp的定義:JSONP(JSON with Padding)是JSON的一種“使用模式”,可用於解決主流瀏覽器的跨域資料存取的問題。由於同源策略,一般來說位於 server1.example.com 的網頁無法與不是 server1.example.com的伺服器溝通,而 HTML 的3f1c4e4b6b16bbbd69b2ee476dc4f83a 元素是例外。利用 3f1c4e4b6b16bbbd69b2ee476dc4f83a 元素的這個開放策略,網頁可以得到從其他來源動態產生的 JSON 資料,而這種使用模式就是所謂的 JSONP。 其實簡單點來說jsonp就是一種輕量級的資料傳輸格式,用來解決跨域請求問題。
我們就來分析一下jsonp的原理
ajax請求受同源策略影響,不允許進行跨域請求,而script標籤src屬性中的連結卻可以存取跨域的js腳本,利用這個特性,服務端不再返回JSON格式的數據,而是返回一段調用某個函數的js程式碼,在src中進行了調用,這樣實現了跨域。
我們來看一個jsonp的例子:
<!DOCTYPE html> <html> <head> <title>GoJSONP</title> </head> <body> < script type="text/javascript"> function jsonhandle(data){ alert("age:" + data.age + "name:" + data.name); } </script> <script type="text/javascript" src="jquery-1.8.3.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle"; var obj = $('<script><\/script>'); obj.attr("src",url); $("body").append(obj); }); </script> </body> </html>
這裡動態的加入了一個script標籤,src指向跨域的一個php腳本,並且將上面的js函數名稱當作callback參數傳入,那麼我們看下PHP程式碼怎麼寫的:
<?php $data = array( 'age' => 20, 'name' => '张三', ); $callback = $_GET['callback']; echo $callback."(".json_encode($data).")"; return;
PHP程式碼回傳了一段JS語句,即
#此時造訪頁面時,動態加入了一個script標籤,src指向PHP腳本,執行傳回的JS程式碼,成功彈出提示框。
所以JSONP將存取跨域請求變成了執行遠端JS程式碼,服務端不再傳回JSON格式的數據,而是傳回了一段將JSON資料作為傳入參數的函數執行程式碼。
這篇文章到這裡就全部結束了,更多jsonp相關內容可以關注php中文網! ! !
以上是jsonp是什麼? jsonp的原理詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!