黑马vue---40、结合Node手写JSONP服务器剖析JSONP原理
黑马vue---40、结合Node手写JSONP服务器剖析JSONP原理
一、总结
一句话总结:
服务端可以返回js代码给script标签,那么标签会执行它,并且可带json字符串作为参数,这样就成功把数据传过去了
比如客户端有show方法,服务器返回给script标签 show(),那么show 方法会执行
1、跨域访问的原因是什么?
由于浏览器的安全性限制,不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口,浏览器认为这种访问不安全
2、JSONP的实现原理 是什么?
可以通过动态创建script标签的形式,把script标签的src属性,指向数据接口的地址,因为script标签不存在跨域限制,这种数据获取方式,称作JSONP(注意:根据JSONP的实现原理,知晓,JSONP只支持Get请求
3、jsonp只支持哪种请求?
get请求
4、JSONP的 具体实现过程 是什么?
1、先在客户端定义一个回调方法,预定义对数据的操作;
2、再把这个回调方法的名称,通过URL传参的形式,提交到服务器的数据接口;
3、服务器数据接口组织好要发送给客户端的数据,再拿着客户端传递过来的回调方法名称,拼接出一个调用这个方法的字符串,发送给客户端去解析执行;
4、客户端拿到服务器返回的字符串之后,当作Script脚本去解析执行,这样就能够拿到JSONP的数据了;
二、结合Node手写JSONP服务器剖析JSONP原理
1、JSONP的实现原理
- 由于浏览器的安全性限制,不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口,浏览器认为这种访问不安全;
- 可以通过动态创建script标签的形式,把script标签的src属性,指向数据接口的地址,因为script标签不存在跨域限制,这种数据获取方式,称作JSONP(注意:根据JSONP的实现原理,知晓,JSONP只支持Get请求);
- 具体实现过程:
- 先在客户端定义一个回调方法,预定义对数据的操作;
- 再把这个回调方法的名称,通过URL传参的形式,提交到服务器的数据接口;
- 服务器数据接口组织好要发送给客户端的数据,再拿着客户端传递过来的回调方法名称,拼接出一个调用这个方法的字符串,发送给客户端去解析执行;
- 客户端拿到服务器返回的字符串之后,当作Script脚本去解析执行,这样就能够拿到JSONP的数据了;
2、jsonp代码实例(Node.js 做服务端)
客户端代码
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<script>
function showInfo123(data) {
console.log(data)
}
</script> <script src="http://127.0.0.1:3000/getscript?callback=showInfo123"></script>
<!-- <script>
show()
</script> --> </body> </html>
nodejs服务端代码
// 导入 http 内置模块
const http = require('http')
// 这个核心模块,能够帮我们解析 URL地址,从而拿到 pathname query
const urlModule = require('url') // 创建一个 http 服务器
const server = http.createServer()
// 监听 http 服务器的 request 请求
server.on('request', function (req, res) { // const url = req.url
const { pathname: url, query } = urlModule.parse(req.url, true) if (url === '/getscript') {
// 拼接一个合法的JS脚本,这里拼接的是一个方法的调用
// var scriptStr = 'show()' var data = {
name: 'xjj',
age: 18,
gender: '女孩子'
} var scriptStr = `${query.callback}(${JSON.stringify(data)})`
// res.end 发送给 客户端, 客户端去把 这个 字符串,当作JS代码去解析执行
res.end(scriptStr)
} else {
res.end('404')
}
}) // 指定端口号并启动服务器监听
server.listen(3000, function () {
console.log('server listen at http://127.0.0.1:3000')
})
黑马vue---40、结合Node手写JSONP服务器剖析JSONP原理的更多相关文章
- 第四章 生命周期函数--36 结合Node手写JSONP服务器剖析JSONP原理
- 手写butterknife来剖析其原理
基本使用: 对于butterknife库我想基本上都非常熟了,如今在项目中用它也用得非常之频繁了,不过为了学习的完整性,先来简单的回顾一下基本用法,先新建一个工程: 然后给textview增加一个点击 ...
- 剖析手写Vue,你也可以手写一个MVVM框架
剖析手写Vue,你也可以手写一个MVVM框架# 邮箱:563995050@qq.com github: https://github.com/xiaoqiuxiong 作者:肖秋雄(eddy) 温馨提 ...
- JavaSE 手写 Web 服务器(二)
原文地址:JavaSE 手写 Web 服务器(二) 博客地址:http://www.extlight.com 一.背景 在上一篇文章 <JavaSE 手写 Web 服务器(一)> 中介绍了 ...
- JavaSE 手写 Web 服务器(一)
原文地址:JavaSE 手写 Web 服务器(一) 博客地址:http://www.extlight.com 一.背景 某日,在 Java 技术群中看到网友讨论 tomcat 容器相关内容,然后想到自 ...
- 【项目】手写FTP服务器-C++实现FTP服务器
X_FTP_server 手写FTP服务器-C++实现FTP服务器 项目Gitee链接:https://gitee.com/hsby/ftp_Server 简介 一个基于libevent的高并发FTP ...
- 手写Tomcat服务器
预备知识 编写服务器用到的知识点 1) Socket 编程2) HTML3) HTTP 协议4) 反射5) XML 解析6) 服务器编写 Socket编程 https://www.cnblogs.co ...
- 手写Javaweb服务器
简单web服务器 回忆socket 创建客服端(在httpClient_1包下) public class Client { public static void main(String[] a ...
- node搭环境(四)--webpack启服务运行VUE模块文件(手写简单脚手架)
webpack启服务步骤: 1.新建空文件夹webpack-vue.在空文件夹右键点击- GIt Bath here--输入cnpm init--按程序走完会生成package.json文件 2.打开 ...
随机推荐
- 字符串slice、substring、substr
1.slice() 可以为负数,如果起始位置为负数,则从字符串最后一位向前找对应位数并且向后取结束位置,如果为正整数则从前往后取起始位置到结束位置. 2.substring() 只能非负整数,截取起始 ...
- 免安装方式的Python之VSCode环境配置
概述 本文旨在介绍免安装方式,在VSCode中搭建Python(3.73)的配置环境.至于Python是什么.它能做些什么,诸如此类的介绍均不在此文中介绍,相信能看此文的人,多多少少都会有些了解. V ...
- window.onload 和doucument.ready执行顺序
浏览器渲染时 首先解析DOM结构 (同时在发送请求 去请求其他资源 比如图片 视频 等 ) DOM结构解析完毕 这个时候jQuery看准时机在这里添加了监听 所以Ready方法执行很早,可能会引起其他 ...
- MySQL操作规范总结
来源:静以致远√团团 用户权限管理创建用户命令:CREATE USER 'username'@'host' IDENTIFIED BY 'password';说明:Username所创建的用户名hos ...
- CentOS7安装Oracle11g数据库
1.关闭防火墙systemctl stop firewalled servicesystemctl disable firewalled service 2.关闭selinuxvim /etc/sel ...
- 文本三剑客之grep及正则表达式
1.grep 1. 什么是grep.egrep和fgrep Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来(匹配到的标红).grep全称是Glo ...
- 用arduino的uno开发板为nano板子烧写bootloader
这篇文章,是为了记录下某宝上淘到的一个没有bootloader的nano开发板的历程(比较坑),自己搜索资料而记录的. 如果没有bootloader,板子就不能接收上传的程序,什么也干不了. 烧写bo ...
- ubuntu---github下载太慢的解决办法
git clone --recursive https://github.com/tensorflow/tensorflow 下载太慢了,20:05-21:17 才下载了17%,等的太急人了. ** ...
- L1与L2正则化
目录 过拟合 结构风险最小化原理 正则化 L2正则化 L1正则化 L1与L2正则化 参考链接 过拟合 机器学习中,如果参数过多.模型过于复杂,容易造成过拟合. 结构风险最小化原理 在经验风险最小化(训 ...
- c# json数据解析——将字符串json格式数据转换成对象或实体类
网络中数据传输经常是xml或者json,现在做的一个项目之前调其他系统接口都是返回的xml格式,刚刚遇到一个返回json格式数据的接口,通过例子由易到难总结一下处理过程,希望能帮到和我一样开始不会的朋 ...