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方式了。具體例項隨後再做分析。