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

最新推荐文章于 2023-10-18 10:50:00 发布

Allenice

最新推荐文章于 2023-10-18 10:50:00 发布

阅读量5.8k

点赞数

分类专栏： javascript 文章标签： jsonp jquery callback javascript getjson json

本文链接：https://blog.csdn.net/Allenice1/article/details/7692830

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

最近要做一个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>

Allenice

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jsonp跨域访问获取数据（使用jquery）

最近要做一个hybrid移动应用，数据库在团队的服务器空间，获取数据库的数据就要跨域了。跨域的话，首先就考虑到了jsop。上网搜了很多资料终于知道怎么跨域了。首先，我们可能用过这样的方式引用其他域javascript脚本其实jsonp的原理跟这个差不多的。jsonp跨域，服务器输出的不是json数据，而是javascript脚本。好的，现在就看一下用jquery跨域访问的例子
复制链接

扫一扫