jsonready onload 与_漫谈JSONP以及img的onLoad和onEr

利用jsonp进行跨域已经是老生常谈了。主要原理是浏览器解析

一个简单的jsonp例子

const url = 'http://www.xxx.com/api/someThing?query=WITH_SOME_DATA&callback=handleResponse'

const scriptElement = document.createElement('script');

scriptElement.src = url;

document.body.appendChild(scriptElement)

JSONP的核心在于下面几点：

创建一个script标签，设置src为要调用的api并且看情况携带一些数据或者指定回调；

将标签添加到html文档中；

浏览器会自动根据src请求数据，并将response理解为Javascript执行。

这里假象了一下如果后端是nodejs的话大概会怎么做：

const callback = req.query.callback;

const data = ... //

const response = `${callback}(${JSON.stringify(data)})`

关键点在于：

后端的返回数据一定是可执行的JavaScript代码！！

所以刚刚我在response那里实际上拼接了一个函数调用。

那么回到浏览器这边，浏览器拿到CALLBACK_NAME(''some data")

那么就开始执行这个函数了。那么同时就要求前端要实现约定的回调函数，并暴露到全局环境

如果换做img标签来做这些事情

同理解析等元素，同样没有对域做安全限制。所以理论上只要能发出跨域的网络请求，都能用来实现跨域。

而大家总会使用script标签来做跨域无非是因为script标签能发出请求，并且能放一些代码放在回应里面，达到回调的效果。

所以理论上来说，如果考虑回调，需要使用script，使用jsonp技术。那么如果只是单纯地想跨域发一个request，那么选择script或者img等元素也无关紧要了。

img其实也能做一些事情

img元素能添加onError onLoad 属性，用于监听加载失败或者加载成功。

这意味着img实现请求成功或者失败的回调是OK的，但是接收不到server端的数据。

jsonready onload 与_漫谈JSONP以及img的onLoad和onEr相关推荐

jsonready onload 与_【前端面试合集】面试题向三
百度 1. 了解的库? Jquery:是一个js函数库特性:html元素选取.操作 Css操作 Html事件函数 Js特效和动画 Html DOM遍历和修改 AJAX Utilities Zepto ...
hive中实现行转列_漫谈数据仓库之拉链表（原理、设计以及在Hive中的实现）
全文由下面几个部分组成: 先分享一下拉链表的用途.什么是拉链表. 通过一些小的使用场景来对拉链表做近一步的阐释,以及拉链表和常用的切片表的区别. 举一个具体的应用场景,来设计并实现一份拉链表,最后并通 ...
auto errored after 报错解决_漫谈数据倾斜解决方案（干货）
数据倾斜是大数据开发中经常会遇到的问题,而且基本是面试中的必问考点,本文是笔者根据搜集资料和阅读多篇博问的总结,全方位的从数据倾斜的定义.原因.解决方法.实例等角度进行解析.希望能帮助大家能对数据倾斜 ...
好文章要收藏_漫谈IT毕业生职业规划
我在"漫谈程序员系列:咦,你也在混日子啊"一文中描述了一种混日子的现状,有朋友说该文只提到了设置目标告别混日子而没有展开论述"如何设立目标"."怎样为 ...
前后端部署在两台服务器服务器配置要求_漫谈前后端分离
前言--浅谈前后端在我的脑海中一提到前端和后端,基本上第一个出现的区别点就是:后端是跟数据库跟服务器打交道的,前端是跟浏览器打交道的.似乎没有什么问题,大家都这么认为的.当然这没有什么错,我们一直以 ...
kettle全量抽数据_漫谈数据平台架构的演化和应用
随着科技的发展,数据在当代社会中所起的作用越来越大.阿里巴巴集团创始人马云在2014年提出了DT(Data Technology)的概念:"人类正从IT时代走向DT时代".DT的核 ...
syslog 向内存中缓存_漫谈缓存（Cache）、大规模芯片系统的存储层次结构优化以及开源仿真工具ZSim...
这次的话题将从缓存开始,以一种易于理解的方式向大家呈现缓存的基本概念,然后拓展至大规模芯片系统的非均一访问延时的缓存访问问题,最后简要介绍一种缓存仿真工具--ZSim. 缓存的概念处理器和内存之间存 ...
ddd架构无法重构_漫谈分层架构：为什么要进行架构分层？
为什么要分层高内聚:分层的设计可以简化系统设计,让不同的层专注做某一模块的事低耦合:层与层之间通过接口或API来交互,依赖方不用知道被依赖方的细节复用:分层之后可以做到很高的复用扩展性:分层架 ...
redis 分布式锁看门狗_漫谈分布式锁之Redis实现
笔耕墨耘,深研术道. 01写在前面Redis是一个高性能的内存数据库,常用于数据库.缓存和消息中间件.它提供了丰富的数据结构,更适合各种业务场景:基于AP模型,Redis保证了其高可用和高性能. 本文 ...

jsonready onload 与_漫谈JSONP以及img的onLoad和onEr

jsonready onload 与_漫谈JSONP以及img的onLoad和onEr相关推荐

最新文章

热门文章