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

最新推荐文章于 2024-09-19 19:39:48 发布

e421083458

最新推荐文章于 2024-09-19 19:39:48 发布

阅读量164

点赞数

文章标签： jsonp Ajax PHP jQuery json ViewUI

[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的应用！
[b]jQuery 的 JSONP 支持[/b]


<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; 
} 
?>

[b]使用 JSONP 回调[/b]


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); 
});

参考：
[url]http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/[/url]
[url]http://www.jb51.net/article/19624.htm[/url]