首頁 >web前端 >js教程 >jsonp是什麼？ jsonp的原理詳解

jsonp是什麼？ jsonp的原理詳解

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

什麼是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

上一篇：分享最簡單的JavaScript倒數程式碼（附完整程式碼）下一篇：分享最簡單的JavaScript倒數程式碼（附完整程式碼）

看更多