jsonp的原理与简单实现

最新推荐文章于 2024-07-14 18:57:12 发布

chongyoulan0795

最新推荐文章于 2024-07-14 18:57:12 发布

阅读量126

点赞数

文章标签： php javascript json ViewUI

原文链接：https://my.oschina.net/heartwalker/blog/708025

版权

原理

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

其本质是利用了< script src="" ></ script >标签具有可跨域的特性，由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。

它只能以GET方式请求一般将传递的 key 命名为 callback

php服务器示例

<?php

    header('Content-Type: text/javascript; charset=utf-8');
    
    // 假设从数据库里取数据了
    $arr = array(
        "name"=>"js",
        "age"=>20
    );

    // 编码处理
    $json = json_encode($arr);
    //获取客户端的callback函数
    $callback = $_GET['callback'];
    //给接收到的函数传输入据$json作为参数, 输出到html页面运行该函数
    echo $callback . '(' . $json . ')';


?>

客户端示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
    var jsonp = (function(){
         var count = 0;

        return function (url, callback) {
            //1. 创建一个script标签
            var scriptElem = document.createElement('script');

            //2. 把地址传进去
            var callbackName = "__callback__" + count++;
            var jsonpUrl = url + "?callback=" + callbackName;
            scriptElem.src = jsonpUrl;

            //3. 创建一个fn函数，用于接收返回的数据
            window[callbackName] = function(data){
                //把数据传给想要用的人
                callback(data);
                //把我们创建的script标签删掉
                window.document.body.removeChild(scriptElem);
            };

            //4.把标签放到body，把请求发出去
            window.document.body.appendChild(scriptElem);
        }
    })();
    jsonp('./js.php',function cs(data){
        data = JSON.stringify(data);
        console.log(data);
    });
        
    </script>
</body>
</html>

控制台输出:{"name":"js","age":20} 注: 请在php服务器下运行

转载于:https://my.oschina.net/heartwalker/blog/708025

chongyoulan0795

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsonp的原理与简单实现

原理由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。其本质是利用了< script src="" ><...
复制链接

扫一扫