jsonp的原理，與php結合的原生介紹
阿新 • • 發佈：2019-02-18
今天在處理json格式的資料，也用到了jsonp的資料處理，特備註一下，免的遺忘。
jsonp格式主要是為了解決跨域請求的問題，我們先以原生例項來說明：
前臺：http://10.61.129.100/test.php
後臺：http://10.64.128.21/test/jsonp.php
1、首先在前臺 http://10.61.129.100/test.php，程式碼如下：
<html> <head> <title>跨域測試</title> <script src="js/jquery-1.7.2.js"></script> <script> $(document).ready(function () { $("#btn").click(function () { $.ajax({ url: 'http://10.64.128.21/test/jsonp.php', type: 'GET', success: function (data) { $(text).val(data); } }); }); }); </script> </head> <body> <input id="btn" type="button" value="跨域獲取資料" /> <textarea id="text" style="width: 400px; height: 100px;"></textarea> </body> </html>
執行後是會報錯的，textarea裡也不會有值顯示。
2、然後我們將前臺的程式碼修改如下：
<html> <head> <title>跨域測試</title> <script src="201/js/jquery-1.3.2.min.js"></script> <script> //回撥函式 function showData (result) { var data = JSON.stringify(result); //json物件轉成字串 $("#text").val(data); } $(document).ready(function () { $("#btn").click(function () { //向頭部輸入一個指令碼，該指令碼發起一個跨域請求 $("head").append("<script src='http://10.64.128.21/test/jsonp.php?callback=showData'><\/script>"); }); }); </script> </head> <body> <input id="btn" type="button" value="getdata" /> <textarea id="text" style="width: 400px; height: 100px;"></textarea> </body> </html>
後臺的程式碼修改為如下：
<?PHP
$arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
$result=json_encode($arr);
//echo $_GET['callback'].'("Hello,World!")';
//echo $_GET['callback']."($result)";
//動態執行回撥函式
$callback=$_GET['callback'];
echo $callback."($result)";
?>然後再次執行，你會看到什麼，OK了。說的多不如做一下，試一下就會明白了。
實際上就是在head裡插入了一個src，然後來呼叫遠端伺服器上的地址，同時構造一個js函式返回到本地呼叫。太精明瞭！
3、然後 jquery提供的現成的方案，就是jsonp方式了。具體例項隨後再做分析。