摘要:概述是一种跨域通信的手段,它的原理其实很简单首先是利用标签的属性来实现跨域。可靠的实现添加回调函数拼接传递的是一个匿名的回调函数,要执行的话,暴露为一个全局方法出错处理使用示例来源个人博客
1. 概述
jsonp是一种跨域通信的手段,它的原理其实很简单:
首先是利用script标签的src属性来实现跨域。
通过将前端方法作为参数传递到服务器端,然后由服务器端注入参数之后再返回,实现服务器端向客户端通信。
由于使用script标签的src属性,因此只支持get方法
2. 实现流程
设定一个script标签
callback定义了一个函数名,而远程服务端通过调用指定的函数并传入参数来实现传递参数,将fn(response)传递回客户端
$callback = !empty($_GET["callback"]) ? $_GET["callback"] : "callback"; echo $callback."(.json_encode($data).)";
客户端接收到返回的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"); });
然而,这个实现虽然简单,但有一些不足的地方:
我们传递的回调必须是一个全局方法,我们都知道要尽量减少全局的方法。
需要加入一些参数校验,确保接口可以正常执行。
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. 来源
个人博客
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/91190.html
摘要:因为同源策略的限制,我们不能在与外部服务器进行通信的时候使用。这个是跨域服务器取数据的接口,参数为回调函数的名字,返回的格式为原理首先在客户端注册一个然后把的名字传给服务器。 一、同源策略 同源策略,它是由Netscape提出的一个著名的安全策略,现在所有的可支持javascript的浏览器都会使用这个策略。 为什么需要同源策略,这里举个例子: 假设现在没有同源策略,会发生什么事...
摘要:同源策略在中有一个很重要的安全性限制,被称为同源策略。然而,当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,这时候同源策略就显得过于苛刻。 JSONP原理 JSON和JSONP JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧,不是很清楚的朋友可以去json.org上了解下,简单易懂。 ...
摘要:什么叫是填充式或参数式的简写,是通过请求跨域接口,获取数据的新实现方式的实现原理动态创建标签,因为标签是没有同源策略限制,可以跨域的。具体看接下来的实现这个是库的具体实现,建议下载来研究一下,最好自己动手写一遍。 什么叫jsonp? jsonp是json with padding(填充式json或参数式json)的简写,是通过ajax请求跨域接口,获取数据的新实现方式 jsonp的实现...
摘要:同源策略,它是由提出的一个著名的安全策略,现在所有支持的浏览器都会使用这个策略。客户端在对文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像,但其实并不一样。 参考资料 一、先说说JSON 首先JSON是一种基于文本的数据交换方式,或者叫做数据描述格式。 JSON的优点: 基于纯文本,跨平台传递极其简单; Javas...
阅读 1850·2019-08-29 16:44
阅读 2153·2019-08-29 16:30
阅读 765·2019-08-29 15:12
阅读 3508·2019-08-26 10:48
阅读 2644·2019-08-23 18:33
阅读 3759·2019-08-23 17:01
阅读 1917·2019-08-23 15:54
阅读 1283·2019-08-23 15:05