当前位置: 代码迷 >> JavaScript >> ajax 跨域访问即jsonp的非详细用法
  详细解决方案

ajax 跨域访问即jsonp的非详细用法

热度:144   发布时间:2012-10-17 10:25:47.0
ajax 跨域访问即jsonp的非详细用法!
[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
  相关解决方案