jsonp的原理与实现
发布时间:2020-12-16 18:51:03 所属栏目:百科 来源:网络整理
导读:1. 概述 jsonp是一种跨域通信的手段,它的原理其实很简单: 首先是利用script标签的src属性来实现跨域。 通过将前端方法作为参数传递到服务器端,然后由服务器端注入参数之后再返回,实现服务器端向客户端通信。 由于使用script标签的src属性,因此只支持get
1. 概述jsonp是一种跨域通信的手段,它的原理其实很简单:
2. 实现流程
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'); }); 然而,这个实现虽然简单,但有一些不足的地方:
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. 来源个人博客 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |