JSONP实现原理-简析

使用script标签是如何实现跨域请求的，它是一个新技术，还是一个技巧？下面我们来看看，其中简单的原理：

我们写一个很平常的example.js，文件内容展示如下：

getJson({results: [{name: 'xxx',code: 1}]
});
复制代码

接下来，再写一个简单的index.html文件：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>jsonp</title><script>function getJson(data) {console.log(data);}</script><script src="http://127.0.0.1:3000/example.js"></script></head><body></body>
</html>
复制代码

上面的index.html代码，当成功的请求到example.js后，相当于这样：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>jsonp</title><script>function getJson(data) {console.log(data);}</script><script>//  这里是：src="http://127.0.0.1:3000/example.js"请求成功后，返回的代码（数据）getJson({results: [{name: 'xxx',code: 1}]});</script></head><body></body>
</html>
复制代码

相信写到这里，是能看得明白的，下面正式开始说JSONP的实现，我用的是nodejs后台：

前端代码index.html，给"http://http://127.0.0.1:3000/example.js"请求地址加一个get请求参数?callback=getJson，代码示例如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>jsonp</title><script>function getJson(data) {console.log(data);}</script><script src="http://127.0.0.1:3000/example.js?callback=getJson"></script></head><body></body>
</html>
复制代码

后端server.js代码如下：

const express = require('express');
const server = express();server.use('/example.js', (req, res) => {// req.query.callback是getJsonlet methodName = req.query.callback; let data = {results: [{name: 'xxx',code: 1}]};let dataStr = JSON.stringify(data),// 相当于sendStr = `getJson(${dataStr})`sendStr = `${methodName}(${dataStr})`;res.send(sendStr);
});server.listen(3000);
console.log('server running at 127.0.0.1:3000');
复制代码

当请求成功后，index.html代码解析如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>jsonp</title><script>function getJson(data) {console.log(data);}</script><script>// 这里是：src="http://127.0.0.1:3000/example.js?callback=getJson"请求成功后，返回的代码（数据）getJson('{"results":[{"name":"xxx","code":1}]}')</script></head><body></body>
</html>
复制代码

最后声明，为了方便大家理解，我把请求写成了一个example.js，其实接口只要一个字符串就可以了,例如"http://127.0.0.1:3000/example?callback=getJson"，其中.js文件格式，完全是为了帮助大家理解。

转载于:https://juejin.im/post/5c8c9393e51d452865236ad3

JSONP实现原理-简析相关推荐

Webpack模块化原理简析
webpack模块化原理简析 1.webpack的核心原理一切皆模块:在webpack中,css,html.js,静态资源文件等都可以视作模块:便于管理,利于重复利用: 按需加载:进行代码分割,实现 ...
Android Handler与Looper原理简析
一直感觉自己简直就是一个弱智,最近越来越感觉是这样了,真的希望自己有一天能够认同自己,认同自己．本文转载于:https://juejin.im/post/59083d7fda2f60005d14ef ...
grpc通信原理_gRPC原理简析
gRPC原理简析 gRPC是由谷歌提出并开发的RPC协议,gRPC提供了一套机制,使得应用程序之间可以进行通信. 降级开发者的使用门槛,屏蔽网络协议,调用对端的接口就像是调用本地的函数一样.而gRPC ...
Android V1及V2签名原理简析
Android为了保证系统及应用的安全性,在安装APK的时候需要校验包的完整性,同时,对于覆盖安装的场景还要校验新旧是否匹配,这两者都是通过Android签名机制来进行保证的,本文就简单看下Andro ...
CRC原理简析——史上最清新脱俗简单易懂的CRC解析
CRC原理简析 1. CRC校验原理 CRC校验原理根本思想就是先在要发送的帧后面附加一个数(这个就是用来校验的校验码,但要注意,这里的数也是二进制序列的,下同),生成一个新帧发送给接收端.当然,这个 ...
Java的定时器Timer和定时任务TimerTask应用以及原理简析
记录:272 场景:Java JDK自带的定时器Timer和定时任务TimerTask应用以及原理简析.在JDK工具包:java.util中可以找到源码,即java.util.Timer和java.u ...
转子接地保护原理_发变组转子接地保护原理简析
发变组转子接地保护原理简析发电机转子接地故障是常见的故障之一, 发生一点接地, 对发电机本身并不直接构成危害,此时可通过转移负荷,平稳停机后,再查故障点:若在此基础上又发生另外一点接地, 将会严重 ...
Mysql锁机制及原理简析
Mysql锁机制及原理简析一.前言 1.什么是锁? 锁是计算机协调多个进程或线程并发访问某一资源的机制. 锁保证数据并发访问的一致性.有效性: 锁冲突也是影响数据库并发访问性能的一个重要因素. 锁是 ...
JTAG、SWD调试原理简析
JTAG.SWD调试原理简析 STM32F10xxx使用CortexM-M3内核,该内核内含硬件调试模块,支持复杂的调试操作.硬件调试模块允许内核在取指(指令断点)或访问数据(数据断点)时停止.内核停 ...

JSONP实现原理-简析

JSONP实现原理-简析相关推荐

最新文章

热门文章