jsonp的实现原理

由于浏览器的安全性(同源策略)限制,不允许AJAX访问协议不同或域名不同或端口号不同的数据接口;
可以通过动态创建script标签的方式,把script标签的src属性指向数据接口的地址,因为script标签不存在跨域限制,这种数据获取方式称为jsonp[由原理可知其只支持get请求];
具体实现过程:
    a、先在客户端定义一个回调函数,预定义对数据的操作; //客户端定义回调函数名传给服务器,这样服务器端返回数据的方法名不用写死,客户端灵活设置而服务端不用变化。
    b、再把这个回调方法的名称通过URL传参的形式提交到服务器的数据接口;
    c、服务器数据接口组织好要发送给客户的数据,再拿着客户端传递过来的回调方法名称,拼接出一个调用这个方法的字符串,发送给客户端去解析;
    d、客户端拿到服务器返回的字符串之后,添加到script脚本去解析执行,这样就能够拿到jsonp的数据了;

例如://下面结合node搭建个服务器实现jsonp

客户端:<script> function show(data){ console.log(data)}</script>
<script src="http://127.0.0.1:3000/getscript?callback=show"></script> 服务器端:const http = require('http') //导入http内置模块
const urlModule = require('url') //这个核心模块能解析URL地址拿到pathname query等
const server = http.createServer() //创建一个http服务器
server.on('request',function(req,res){ //监听http服务器的request请求
const { pathname: url,query} = urlModule.parse(req.url,true) //node的结构赋值
if (url ==='getscript'){
var data = {
id:'1',
name: '宝马',
createtime: new Date()}
var scriptStr = `${query.callback}(${JSON.stringify(data)})` //拼接一个合法的JS脚本,这里拼接的是一个方法的调用
res.end(scriptStr) //res.end把这个字符串发送给客户端,客户端当做JS代码去解析执行
}else{
res.end('404')
}
})

jsonp的实现原理的更多相关文章

  1. jQuery 调用jsonp实现与原理

    jQuery 调用jsonp实现与原理 您的评价:        收藏该经验     阅读目录 1.客户端代码 2.服务器端 通过jQuery实现JSONP 一般的ajax是不能跨域请求的,因此需要使 ...

  2. jsonp跨域原理

    Jsonp原理: 首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器.注意:服务端得到ca ...

  3. jsonp 跨域原理详解

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...

  4. jsonp的工作原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 9.jsonp的实现原理

    1. 由于浏览器的安全性限制,不允许AJAX访问 协议不同.域名不同.端口号不同的数据接口,浏览器认为这种访问不安全:2. 以通过动态创建script标签的形式,把script标签的src属性,指向数 ...

  6. 从浅入深——理解JSONP的实现原理

    由于浏览器的安全性限制,不允许AJAX访问 协议不同.域名不同.端口号不同的 数据接口,浏览器认为这种访问不安全: 可以通过动态创建script标签的形式,把script标签的src属性,指向数据接口 ...

  7. jquery 中jsonp的实现原理

    在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,即一般的 ajax是不能进行跨域请求的.但 img.iframe .script等标签是个例外,这些标签可以通过 src属性请求到其 ...

  8. 深入剖析jsonp跨域原理

    在项目中遇到一个jsonp跨域的问题,于是仔细的研究了一番jsonp跨域的原理.搞明白了一些以前不是很懂的地方,比如: 1)jsonp跨域只能是get请求,而不能是post请求: 2)jsonp跨域的 ...

  9. JSONP前世今生及原理

    https://blog.csdn.net/hansexploration/article/details/80314948 http://www.cnblogs.com/yuzhongwusan/a ...

随机推荐

  1. 函数节流及手机端点击延迟200ms解决方法

    不论是H5开发还是微信小程序,手机端点击都会有300ms的延迟,在实际项目中,会到此频繁触发,如有接口会频繁的请求接口,除了会引起不必要的多次请求还会导致数据有问题.下面有二种方式来处理这个问题: 1 ...

  2. Shell内置命令 eval

  3. Stm32CubeMX5 创建LED控制工程 - 基于stmf051k8u6

    一. 创建一个控制LED的工程 1. 安装好 Stm32CubeMX5 后 打开软件 选择 “ File-->  New Project...” 创建一个新工程 2. 之后会出现一个选择芯片的窗 ...

  4. k8s容器-运维管理篇

    二. 运维和管理 维护参考网址 https://jimmysong.io/kubernetes-handbook/practice/install-kubernetes-on-centos.html ...

  5. linux常用命令记录(一)

    文件搜索命令 grep在文件中查找字符并输出 grep 字符或字符串 文件目录 grep pub /teach/.txt -c 字符出现总行数 grep .txt -n 行号 grep .txt -i ...

  6. thrift 的required、optional探究

    原因 经常使用thrift来编写rpc通信,但是对下面两个问题还是有些疑惑 thrift 的required.optional和不写有什么区别 optional不设置isset的话被传输后值? 实验 ...

  7. 上传图片,预览并保存成blob类型 和 base64

    场景: 获取到一个file类型的图片,如果直接在html中预览?这里就是利用html5的新特性,将图片转换为Base64的形式显示出来.有两种方法: 方法一:利用URL.createObjectURL ...

  8. jq随机生成数字加字母的字符串

    html代码: <dl class="row"> <dt class="tit"> <label for="title& ...

  9. Unity Document

    { https://docs.unity3d.com/ScriptReference/Events.UnityEventTools.html }

  10. Magento多语言注意事项

    Magento一般使用CSV文件方式翻译国际化词条 一般用法是代码中: <?php echo Mage::helper("module_name")->__('Item ...