jsonp跨域的简单实现

前端之家收集整理的这篇文章主要介绍了jsonp跨域的简单实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.Ajax

我们都知道用ajax可以向另一个地址发送数据请求并处理服务器返回的数据,但发送方和接收方必须是同源地址,也就是不能跨域访问。
如下我们测试用一个ip去访问另一个ip里的ajaxPHP.PHP

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<script type="text/javascript"> function jsonhandle(data){ alert("age:" + data.age + "name:" + data.name); } </script>
<script type="text/javascript" src="js/jquery-3.1.1.js"> </script>
<script type="text/javascript"> $(document).ready(function(){ $.ajax({ type : "get",async: false,url : "http://192.168.34.221/ajaxPHP.PHP?id=1",success : function(data) { jsonhandle(data); } }); }); </script>
</body>
</html>

ajaxPHP.PHP接收请求会返回一个对象,代码如下:

echo '{ "age" : 15,"name": "John",}';

我们设想返回成功会传参并执行jsonhandle函数,但实际会出现错误,无法跨域请求。

2.利用script的src

利用script的src属性我们可以访问任何地址不受限制,如下我们访问另一个ip中remote.js文件

<!DOCTYPE html>
<html>
<head>
    <title>GoJSONP</title>
</head>
<body>
<script type="text/javascript"> function jsonhandle(data){ alert("age:" + data.age + "name:" + data.name); } </script>
<script type="text/javascript" src="jquery-1.8.3.min.js"> </script>
<script type="text/javascript" src="http://192.168.34.221/remote.js"> //相当于读取remote.js文件中的内容并拷贝到这个script标签内并执行,相当于jsonhandle({"age" : 15,"name": "John",}) </script>
</body>
</html>

remote.js文件内容如下:

jsonhandle({ "age" : 15,"name": "John",})

这时可以正确执行弹出提示框。
下面将代码改进一下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<script type="text/javascript"> function jsonhandle(data){ alert("age:" + data.age + "name:" + data.name); } </script>
<script type="text/javascript" src="jquery-1.8.3.min.js"> </script>
<script type="text/javascript"> $(document).ready(function(){ //这里我们动态创建一个script标签并设置src属性、传递回调函数名字。那么待script添加到文档中后 var url = "http://192.168.34.221/student.PHP?id=1&callback=jsonhandle"; var obj = $('<script><\/script>'); obj.attr("src",url); $("body").append(obj); }); </script>
</body>
</html>

student.PHP是这样写的:

<?PHP $data = array( 'age' => 20,'name' => '张三',); //接收传递过来的回调函数 $callback = $_GET['callback']; //返回函数名(参数),这里就是相当于PHP返回一段js代码:jsonhandle({"age" : 15,}) //json_encode()将PHP对象转换成字符串 echo $callback."(".json_encode($data).")"; return;

这样也可以成功调用jsonhandle函数并弹出提示框。

3.jQuery提供的使用jsonp方式

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<script type="text/javascript" src="jquery-1.8.3.min.js"> </script>
<script type="text/javascript"> $(document).ready(function(){ $.ajax({ type : "get",url : "http://192.168.34.221/student.PHP?id=1",dataType: "jsonp",//返回的数据类型 jsonp:"callback",//请求PHP的参数名 jsonpCallback: "jsonhandle",//要执行的回调函数 success : function(data) { alert("age:" + data.age + "name:" + data.name); } }); }); </script>
</body>
</html>

猜你在找的Json相关文章