服務端:PHP
客戶端:Andorid, HTML5, jQuery, ajax
現象:本想通過jQuery的ajax功能從服務器取回數據存到手機的緩存里,結果總是錯誤,后來想到可能是跨域問題,所以查了下jsonp的方案先把流程跑通,明天再完善看看有什么好的方案
服務端:http://www.code-style.com/test/a.php
<?php //服務端返回JSON數據 $arr=array('name'=>'shujun.li'); $result=json_encode($arr); //動態執行回調函數 $callback=$_GET['callback']; echo $callback."($result)"; ?>
客戶端
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Listview AutodividersSelector - jQuery Mobile Demos</title> <script src="js/jquery.js"></script> <script type="text/javascript"> $.ajax({ url:"http://www.code-style.com/test/a.php", dataType:'jsonp', data:'', jsonp:'callback', success:function(result) { alert(result["name"]) }, timeout:3000 }); </script> </head> <body> </body> </html>
生成URL : http://www.code-style.com/test/a.php?callback=jQuery1102004144126083701849_1420635061128&_=1420635061129
響應:jQuery1102004144126083701849_1420635061128({"name":"shujun.li"})
JSONP原理解析:
相當於jquery在頁面生成一個匿名函數,這個函數可以傳入一個JS對象,然后把這個函數的函數名作為URL參數傳遞給服務器端,服務端吐出的實際上是對這個函數的調用語句,輸出到了頁面以后會通過eval執行這個調用,這個匿名函數會再次調用我們的success函數,最終這么拿的數據,如果這樣的話JSONP無法大規模的傳輸數據
$.ajax({ url:"http://www.code-style.com/test/a.php", dataType:'jsonp', data:'', jsonp:'callback', success: function(result) { alert(result["name"]) }, timeout: 3000, jQuery1102004144126083701849_1420635061128(obj) { success(obj); } });