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. Msys2升级后不能编译

    Msys2升级后不能编译 */--> code {color: #FF0000} pre.src {background-color: #002b36; color: #839496;} cod ...

  2. Set 对象和WeakSet对象

    Set对象是值的集合,你可以按照插入的顺序迭代它的元素. Set中的元素只会出现一次,即 Set 中的元素是唯一的,一种有效去重方式. , , , , ]); console.log(set1.has ...

  3. python基础之数据类型初始

    变量 贴标签 变量名规则:只能是字母下划线和数字组成,不能以数字开头,不能和关键字同名,不能使用拼音和中文,具有可描述性,区别大小写,变量名推荐写法:驼峰提,下划线(官方推荐) 变量赋值 常量 特性: ...

  4. Python之元组、列表and 字典

    序列: 元组和字符串都是不可变的哦 你看,数据空间不一样了 元组的话,你可以联想到C里面的结构体变量啊,为了包容不同的数据类型: 也可以这样取值哦: 列表:列表是可修改的哦~ 不然数据大了再另外开辟空 ...

  5. Windows IIS7 下安装配置 PHP7.0

    确认Microsoft Visual C++版本 Microsoft Visual C++的版本至关重要,根据Microsoft Visual C++版本下载的PHP不同.        PHP官网的 ...

  6. tail - 输出文件的末尾部分

    SYNOPSIS(总览) ../src/tail [OPTION]... [FILE]... DESCRIPTION(描述) 在标准输出上显示每个FILE的最后10行. 如果多于一个FILE,会一个接 ...

  7. batch normlization (BN)的讲解

    1. https://zhuanlan.zhihu.com/p/54073204(简单理解) 2. https://zhuanlan.zhihu.com/p/34879333 (有举例说明,但是不太理 ...

  8. RMI远端方法调用

    一.RMI介绍 RMI(Remote Method Invocation),RMI是分布式对象软件包,它简化了在多台计算机上的JAVA应用之间的通信.必须在jdk1.1以上,RMI用到的类:java. ...

  9. mongoose 常用数据库操作 查询

    条件查询 Model.find(conditions, [fields], [options], [callback]) demo1 try.js var User = require(". ...

  10. php操作redis--集合(set)篇

    常用函数:sAdd,sMembers,sPop,sUnion等 应用场景:与list类型类似,是一个列表的功能,不同的是set可以自动排重,提供了一个判断某一个成员是否存在一个set集合内的重要接口. ...