用最简单直白的人类语言解释下jsonP到底是什么鬼

最近把前端面试小册看到了第11章jsonp那里。以前也查过jsonp相关的资料，但不是没有代码，就是代码太长或者专业废话太多，看得一脸懵。刚才总算是搞明白了，趁热用大白话来简单说下。

先上段简单的代码：

HTML:

<html>
<body><script>function yooo(data) {console.log(data)}</script><script src="http://127.0.0.1:18888/?callback=yooo" />
</body>
</html>
复制代码

Nodejs:

const http = require('http')
const url = require('url')
const data = {hello: 'world'}http.createServer((req, res) => {const params = url.parse(req.url, true)res.end( params.query.callback + '(' + JSON.stringify(data) + ')' )
}).listen(18888)
复制代码

把这些翻译成人话：

一开始HTML里的js代码是这样的

function yooo(data) { console.log(data) }
复制代码

然后解析到第二个<script>时，就会向Node发起请求，然后Node返回了'yooo({"hello", "world"})'这个字符串。经浏览器解析后，HTML里的js代码就变成了这样：

function yooo(data) { console.log(data) }
yooo({"hello", "world"})
复制代码

这个执行结果就很显然了吧，console里打印出{"hello", "world"}

没错，这就是jsonP的核心原理，就是这么简单。把数据包装在一个函数的参数里，然后传给浏览器，让浏览器执行这个函数（wrap data as an argument for a function, pass it to the browser, and then browser execute the function）

//总是说不明白中文术语。。。还是英文术语顺口些

回到jsonP这个名字本身，P -> Padding，这个padding指的就是包在json外面的'yooo(' 和 ')'

现在你应该看得懂别人写的jsonP文章了，无非就是把上述东西包装成一个loadJSON函数，执行它的时候能自动给DOM插入个<script src="...?callback=xxx">，并且将这个xxx callback函数挂载到DOM上，比如window.xxx = xxx，这样子就可以在全局scope中执行xxx(data)了。

对了，最近在学习webpack4的时候发现，dynamic import其实也是用jsonP实现的。。。有兴趣的童鞋可以玩一下

用最简单直白的人类语言解释下jsonP到底是什么鬼相关推荐

java反射通俗解释,谁来帮用通俗易懂的语言解释下java的反射机制
谁来帮用通俗易懂的语言解释下java的反射机制以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 谁来帮用通俗易懂的语言解释 ...
restapi是什么意思_用人类语言解释：REST API 与 RESTful API
API,应用程序接口,也可以叫应用程序界面,或者简称为应用接口.应用程序的设计可以相当复杂,但最终的用户并不需要知道应用程序的内部到底是如何工作的,你只需要给用户提供一些操作接口,再告诉用户怎么用这些 ...
通俗易懂的语言解释下股票、基金、证券、债券、信托、期货、国债、外汇？
股票刚子是方圆十里周边村子最好的铁匠,尤其是打的一口好镰刀,村里的老少爷们都喜欢用他打的镰刀干活麻利,噶韭菜顺手,利索. 刚子暗恋村子西头的翠花,几次托人说媒,但是她妈是个势利眼,嫌弃一个穷铁匠没什 ...
什么是比特币之简单直白解释
先看一下比较官方的释义维基百科的解释是一种基于去中心化,采用点对点网络与共识主动性,开放源代码,以区块链作为底层技术的加密货币简单直白一点解释就是它是一种货币,既满足经济学上的货币的一般概念( ...
揭开人类语言的神秘面纱：从理解到处理自然语言
https://www.toutiao.com/a6709740042509615619/ 随着人工智能的进步和技术变得越来越复杂,我们希望现有的概念能够接受这种变化或者改变自己.同样,在自然语言的计 ...
NLP≠NLU，机器学习无法理解人类语言
来源:图灵人工智能编译:吴彤校对:暮编辑:琰琰长期以来,我们一直在与机器沟通:编写代码--创建程序--执行任务. 然而,这些程序并非是用人类"自然语言"编写的,像Java ...
语言编程思维陈萌_这本书告诉你，计算机为何能读懂人类语言，编程思维让你更聪明...
在这个互联网时代,我们出门购物.拍照.打电话.浏览信息,只需要带上一部智能手机就可以了.如果在20年前,要实现这些功能,需要带一大堆东西.如今,我们口袋里的这台计算机,和50年前送宇航员上月球的那台计 ...
【深度学习人类语言处理】1 课程介绍、语音辨识1——人类语言处理六种模型、Token、五种Seq2Seq Model(LAS、CTC、RNN-T、Neural Transducer、MoChA)
Deep Learning for Human Ianguage Processing 1. DLHLP-Introduction 1.1 概述 1.2 六种模型与应用 1.2.1 语音到文本 1.2 ...
Computer：少儿编程—每个人都应该学习编程，它能教你如何思考—编程入门的简介(编程语言的特点种类开发工具对比人类语言)、编程应用、编程意义之详细攻略
Computer:少儿编程-每个人都应该学习编程,它能教你如何思考-编程入门的简介(编程语言的特点&种类&开发工具&对比人类语言).编程应用.编程意义之详细攻略导读:乔布斯说 ...

用最简单直白的人类语言解释下jsonP到底是什么鬼

用最简单直白的人类语言解释下jsonP到底是什么鬼相关推荐

最新文章

热门文章