JSONP跨域请求的示例分析

　　介绍

这篇文章主要介绍了JSONP跨域请求的示例分析,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

维基百科的解释:

JSONP (JSON填充或JSON-P[1])是一个javascript模式 　　请求数据的加载& lt; script>标签。它提出了鲍勃 　　2005年使役动词。[2]JSONP支持共享数据绕过同源 　　政策。政策不允许运行JavaScript DOM读媒体 　　XHR数据从外部获取页面元素或# 39;起源。的 　　网站# 39;年代的聚合方案,端口号和主机名标识 　　作为其起源。

我的理解是:

1,前端编写自己的函数,用脚本标签发送得到请求把函数名字带上
2,服务器端接送到请求后获取前端发送请求时的查询,添加上自己的数据返回后。
3。,前端获取返回的内容其实就自己的函数调用实参是数据对象。

<李>

解释的有点懵逼没关系,用栗子说话。

前端代码

& lt; !doctype html> 　　& lt; html lang=癳n"祝辞 　　& lt; head> 　　& lt; title> Document 　　& lt;/head> 　　& lt; body> 　　& lt; script>//编写调用函数 　　函数getremotedata(数据){ 　　console.log(数据); 　　} 　　& lt;/script> 　　& lt; !——用脚本标签得到方法把数据请求发送到后端——比; 　　https://www.yisu.com/zixun/& lt;脚本src=" http://localhost: 3999/?回调=getremotedata "> 　　身体 　　

后端代码

//用节点编写一个简单的服务器 　　const http=要求(& # 39;http # 39;); 　　const urlModule=要求(& # 39;url # 39;); 　　const服务器=http.createServer (); 　　server.on(& # 39;请求# 39;,函数(点播,res) {//urlModule.parse (req.url.url)的请求就是这个对象//{//协议:空,//斜杠:空,//身份验证:空,//主机:空,//端口:空,//主机名:空,//散列:空,//搜索:& # 39;?回调=getremotedata& # 39;//查询:& # 39;调=getremotedata& # 39;//路径名:& # 39;/& # 39;//路径:& # 39;/?回调=getremotedata& # 39;//href: & # 39;/?回调=getremotedata& # 39;}//对象结构赋值得到查询是一个对象 　　const{路径名:url、查询}=urlModule.parse(点播。url,真的) 　　如果(url===& # 39;/& # 39;) { 　　var=https://www.yisu.com/zixun/{数据 　　名称:“大毛”, 　　年龄:18岁 　　性别:“未知” 　　};//解析查询的请求得到前端发送的函数名称,加上括号调用此函数,函数里加实参servedata返回 　　var scripteStr=" $ {query.callback} ($ {JSON.stringify(数据)})” 　　console.log (scripteStr) 　　res.end (scripteStr) 　　其他}{ 　　res.end (“404”) 　　} 　　}）; 　　服务器。听(' 3999 ',函数(){ 　　控制台。日志(服务器运行3999 ') 　　})

这样前端发送请求,无论回调是什么,后端都会返回回调加数据数据,就实现了跨域请求啦。

感谢你能够认真阅读完这篇文章,希望小编分享JSONP跨域请求的示例分析内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!

JSONP跨域请求的示例分析