您的位置：首页 > Web前端 > JQuery

jsonp跨域访问获取数据（使用jquery）

2012-06-26 15:15 591 查看
最近要做一个hybrid移动应用，数据库在团队的服务器空间，获取数据库的数据就要跨域了。跨域的话，首先就考虑到了jsop。上网搜了很多资料终于知道怎么跨域了。

首先，我们可能用过这样的方式引用其他域javascript脚本

<script type="text/javascript" src="http://www.conciz.com/index.php?name=icebian"></script>

其实jsonp的原理跟这个差不多的。jsonp跨域，服务器输出的不是json数据，而是javascript脚本。

好的，现在就看一下用jquery跨域访问的例子

服务器端index.php（其它域：www.conciz.com）

<?php

//很单纯的变量
$name="Allenice";
$callback="jsonp";

//通过get的方式获得参数
if(isset($_GET["name"]))
$name=$_GET["name"];

if(isset($_GET["callback"]))
$callback=$_GET["callback"];

//封装成json数据
$json='{"name":"'.$name.'"}';

//输出javascript脚本，调用callback
echo $callback.'('.$json.')';
?>


客户端调用 client.html

<!DOCTYPE html>

<html>
<head>
<title>测试ajax</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.getJSON("http://www.conciz.com/index.php?name=Allenice2&callback=?", function (data) {
alert(data.name);
})
})
</script>
</head>
<body>
</body>
</html>


也许你会问callback=?是什么意思，其实？是一个占位符的，jquery会自动生成唯一的一个函数名代替？传递到服务端，而这个函数名就是getJSON方法第二个参数（回调函数）的函数名。仔细看index.php最后的输出语句：echo $callback.'('.$json.')'; 这是输出一个javascript的语句，是调用callback函数。假设传递过去的函数名是getData（其实jquery生成的是Jquery加一串数字）,还有你就把$json当做一个普通的参数。这样输出的是getData($json);这样话客户端的代码相当于下面的：

<!DOCTYPE html>

<html>
<head>
<title>测试jsonp</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.getJSON("http://www.conciz.com/jqm/index.php?name=Allenice2&callback=?", function (data) {
alert(data.name);
})
})
</script>
<script type="text/javascript">
//getData的定义就是getJson的第二个参数,getJson还把json数据转化成javascript的对象
getData({name:"Allenice2"});
</script>
</head>
<body>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航