jsonp跨域的简单实现

来源：互联网发布：centos查看php版本编辑：程序博客网时间：2024/06/02 19:43

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,"name": "John",})//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",            async: false,            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>

0 0