[url][/url]新建ticker.js
// JavaScript Document showPrice({symbol:"四宝",price:"价格"});
然后新建一个页面引用它
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>111</title> </head> <body> <script type="text/javascript"> // This is our function to be called with JSON data function showPrice(data) { alert("Symbol: " + data.symbol + ", Price: " + data.price); } var url = "http://www.esouluo.com/oldweb/ticker.js"; // URL of the external script // this shows dynamic script insertion var script = document.createElement('script'); script.setAttribute('src', url); // load the script document.getElementsByTagName('head')[0].appendChild(script); </script> </body> </html>
以上实例描述了简单jsonp的应用!
jQuery 的 JSONP 支持
<html> <script type='text/javascript' src='commons/scripts/jquery.js'></script> <script type='text/javascript'> $(function(){ $.ajax({ url:'http://localhost/test.php', dataType:"jsonp", jsonp:"jsonpcallback", success:function(data){ var $ul = $("<ul></ul>"); $.each(data,function(i,v){ $("<li/>").text(v.id + " " + v.name).appendTo($ul) }); $("#res").append($ul); } }); }); </script> <body> <div id='res'></div> </body> </html>
服务器端php代码
<?php if (isset($_GET['jsonpcallback'])){ echo $_GET['jsonpcallback']."([{id:1,name:'aaaa1'},{id:2,name:'bbbb2'}])"; exit; } ?>
使用 JSONP 回调
jQuery.getJSON("http://localhost/test.php?callback=?", function(data){ var $ul = $("<ul></ul>"); $.each(data,function(i,v){ $("<li/>").text(v.id + " " + v.name).appendTo($ul) }); $("#res").append($ul); });
参考:
http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/
http://www.jb51.net/article/19624.htm