jsonp的原理与实现

大佬教程收集整理的这篇文章主要介绍了jsonp的原理与实现，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

1. 概述

jsonp是一种跨域通信的手段，它的原理其实很简单：

1. 首先是利用script标签的src属性来实现跨域。

2. 通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。

3. 由于使用script标签的src属性，因此只支持get方法

2. 实现流程

1. 设定一个script标签

   <script src="http://jsonp.js?callBACk=xxx"></script>

2. callBACk定义了一个函数名，而远程服务端通过调用指定的函数并传入参数来实现传递参数，将fn(responsE)传递回客户端

   $callBACk = !empty($_GET['callBACk']) ? $_GET['callBACk'] : 'callBACk';
   echo $callBACk.'(.json_encode($data).)';

3. 客户端接收到返回的js脚本，开始解析和执行fn(responsE)

3. jsonp简单实现

一个简单的jsonp实现，其实就是拼接url，然后将动态添加一个script元素到头部。

function jsonp(req){
    var script = document.createElement('script');
    var url = req.url + '?callBACk=' + req.callBACk.name;
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script); 
}

前端js示例

function Hello(res){
    alert('Hello ' + res.data);
}
jsonp({
    url : '',callBACk : Hello 
});

服务器端代码

var http = require('http');
var urllib = require('url');

var port = 8080;
var data = {'data':'world'};

http.createServer(function(req,res){
    var params = urllib.parse(req.url,truE);
    if(params.query.callBACk){
        console.log(params.query.callBACk);
        //jsonp
        var str = params.query.callBACk + '(' + JSON.Stringify(data) + ')';
        res.end(str);
    } else {
        res.end();
    }
    
}).listen(port,function(){
    console.log('jsonp server is on');
});

然而，这个实现虽然简单，但有一些不足的地方：

1. 我们传递的回调必须是一个全局方法，我们都知道要尽量减少全局的方法。

2. 需要加入一些参数校验，确保接口可以正常执行。

4. 可靠的jsonp实现

(function (global) {
    var id = 0,container = document.getElementsByTagName("head")[0];

    function jsonp(options) {
        if(!options || !optionS.Url) return;

        var scriptNode = document.createElement("script"),data = options.data || {},url = optionS.Url,callBACk = options.callBACk,fnName = "jsonp" + id++;

        // 添加回调函数
        data["callBACk"] = fnName;

        // 拼接url
        var params = [];
        for (var key in data) {
            params.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
        }
        url = url.indexOf("?") > 0 ? (url + "&") : (url + "?");
        url += params.join("&");
        scriptNode.src = url;

        // 传递的是一个匿名的回调函数，要执行的话，暴露为一个全局方法
        global[fnName] = function (ret) {
            callBACk && callBACk(ret);
            container.removeChild(scriptNodE);
            delete global[fnName];
        }

        // 出错处理
        scriptNode.onerror = function () {
            callBACk && callBACk({error:"error"});
            container.removeChild(scriptNodE);
            global[fnName] && delete global[fnName];
        }

        scriptNode.type = "text/javascript";
        container.appendChild(scriptNodE)
    }

    global.jsonp = jsonp;

})(this);

使用示例

jsonp({
    url : "www.example.com",data : {id : 1},callBACk : function (ret) {
        console.log(ret);
    }
});

5. 来源

个人博客

大佬总结

以上是大佬教程为你收集整理的jsonp的原理与实现全部内容，希望文章能够帮你解决jsonp的原理与实现所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。