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. Java中的宏变量,宏替换详解。

    群友在微信群讨论的一个话题,有点意思,特拿出来分享一下. 首先来看下面这段程序,和群友分享的大致一样. public static void main(String[] args) { String ...

  2. tonight i need your body

    wdnmd wdnmd 再lable中我们有几个不同的type参数: text     写的是文本类型的参数 password    不管输入的是什么显示的都是星星 date    输入的是一个日历本 ...

  3. android中的国际化

    java国际化步骤: 定义资源文件: baseName_language_country.properties baseName_language.properties baseName.proper ...

  4. VirtualBox安装CentOS系统

    1. 准备材料 虚拟机软件: VirtualBox 系统iso版本:CentOS-7-x86_64-DVD-1611.iso 虚拟机软件下载地址: https://www.virtualbox.org ...

  5. 分分钟教你学会 ToolBar 的使用(转)

    转自:http://blog.csdn.net/itguangit/article/details/52042203 1.和平常一样,新建一个Moudle 在xml布局文件中使用 Toolbar 控件 ...

  6. 【NOI2019模拟2019.6.29】组合数(Lucas定理、数位dp)

    Description: p<=10且p是质数,n<=7,l,r<=1e18 题解: Lucas定理: \(C_{n}^m=C_{n~mod~p}^{m~mod~p}*C_{n/p} ...

  7. OpenSearch最新功能介绍

    摘要:阿里云开放搜索(OpenSearch)是一款结构化数据搜索托管服务,其能够提供简单.高效.稳定.低成本和可扩展的搜索解决方案.OpenSearch以平台服务化的形式,将专业搜索技术简单化.低门槛 ...

  8. Yii2高级模板的安装

    1.通过composer 安装高级版 C:wampwwwyii>composer create-project --prefer-dist yiisoft/yii2-app-advanced a ...

  9. LOJ6485 LJJ 学二项式定理 解题报告

    LJJ 学二项式定理 题意 \(T\)组数据,每组给定\(n,s,a_0,a_1,a_2,a_3\),求 \[ \sum_{i=0}^n \binom{n}{i}s^ia_{i\bmod 4} \] ...

  10. snaker配置

    1,导入jar包 jar包 2,snaker的配置 3,snaker的工具类 以上是使用snaker的最基本的配置. http://lightfor.org/snaker/demo.html