首頁  >  文章  >  web前端  >  jsonp是什麼? jsonp的原理詳解

jsonp是什麼? jsonp的原理詳解

不言
不言原創
2018-10-15 10:51:574393瀏覽

什麼是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 = $(&#39;<script><\/script>&#39;);
        obj.attr("src",url);
        $("body").append(obj);
    });
</script>
 </body> 
 </html>

這裡動態的加入了一個script標籤,src指向跨域的一個php腳本,並且將上面的js函數名稱當作callback參數傳入,那麼我們看下PHP程式碼怎麼寫的:

<?php 
$data = array( &#39;age&#39; => 20, &#39;name&#39; => &#39;张三&#39;, ); 
$callback = $_GET[&#39;callback&#39;]; 
echo $callback."(".json_encode($data).")"; 
return;

PHP程式碼回傳了一段JS語句,即

#此時造訪頁面時,動態加入了一個script標籤,src指向PHP腳本,執行傳回的JS程式碼,成功彈出提示框。
所以JSONP將存取跨域請求變成了執行遠端JS程式碼,服務端不再傳回JSON格式的數據,而是傳回了一段將JSON資料作為傳入參數的函數執行程式碼。

這篇文章到這裡就全部結束了,更多jsonp相關內容可以關注php中文網! ! !

以上是jsonp是什麼? jsonp的原理詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn