【通信】前端中的几类数据交互方式

您所在的位置：网站首页 › qqvip邮箱登录 › 【通信】前端中的几类数据交互方式

【通信】前端中的几类数据交互方式

2023-03-04 01:16| 来源: 网络整理| 查看: 265

⭐️ 本文首发自前端修罗场(点击加入)，是一个由资深开发者独立运行的专业技术社区，我专注 Web 技术、Web3、区块链、答疑解惑、面试辅导以及职业发展。博主创作的《前端面试复习笔记》（点击订阅），广受好评，已帮助多人提升实力、拿到 offer。现在订阅，私聊我即可获取一次免费的模拟面试机会，帮你评估知识点的掌握程度，获得更全面的学习指导意见！

数据交互

主要从下面几类讲解：

1、http协议2、form表单3、ajax–官方提供，单向，浪费流量，默认不能跨域（不能从a.com读取b.com下的东西），但有跨域的方法4、jsonp ——民间，支持跨域，不推荐，破坏了http自身的安全协议5、WebSocket——H5新特性，双工（双向） http协议 1、无状态2、连接过程：连接、接收、发送（三次握手）3、消息报文2部分：头部(header) if(xhr.status>=200&&xhr.status json = JSON.parse(xhr.respinseText) //解析成json }catch(e){ json = eval('('+xhr.responseText+')') } }else { //failed } } }

重定向：例子：

PC端访问： 302->www.taobao.com手机端访问： 302->m.taobao.com

安全：

前端没有大的安全性可言，后端才有；xss – 跨站脚本攻击，别人把js代码放在你的代码上执行 DNS污染，如运营商自己造成

本节关键：

http文档：https://tools.ietf.org/html/rfc2616http状态码eval、jsonajax2.0概念 Ajax2.0 兼容IE10+FormData（容器）: set()、get()、append()、delete()…等文件上传，依赖FormData；上传进度监控 xhr.upload.onload/onprogress；CORS跨域（跨域资源共享）Ajax长连接（已被WebSocket替代）xhr.send(formData)\xhr.send(Blob)\xhr.send(Buffer) ,Blob\Buffer二进制数据 FormData //FormData 一种容器 //formData.set('name',value) window.onload = function() { var oBtn = document.getElementById('btn1'); oBtn.onclick= function(){ var formData = new FormData(); formData.set('a',12); formData.set('b',5); var xhr = new XMLHttpRequest(); xhr.open('post','1.php',false); xhr.send(formData); xhr.onreadystatechange=function() { if(xhr.readyState==4) if(xhr.status>200&&xhr.status alert('error') } } } } } //FormData文件上传 //formData.set('name',); //xhr.upload.onload 上传完成 //xhr.upload.onprogress 进度变化 window.onload = function() { var oBtn = document.getElementById('btn1'); var oF1 = document.getElementById('f1'); oBtn.onclick= function(){ var formData = new FormData(); formData.set('f1',oF1); var xhr = new XMLHttpRequest(); //进度条 xhr.upload.onload = function(){ console.log('上传完成') } xhr.upload.onprogress = function(ev){ console.log(ev.loaded+'/'+ev.total); } xhr.open('post','1.php',false); xhr.send(formData); xhr.onreadystatechange=function() { if(xhr.readyState==4){ if(xhr.status>200&&xhr.status alert('error') } } } } } CORS 跨域

跨域：域不同。域=协议+域名+端口

浏览器+服务器共同配合

浏览器：

服务器 res.setHeader(‘Access-Control-Allow-Origin’,‘*’);

const http = require('http'); let server = http.createServer(function(req,res){ console.log(req.headers); let allowHosts = ['baidu.com','taobao.com','tmall.com']; //加判断，过滤 if(allowHost.indexOf(req.headers['origin'])!=-1){ res.setHeader('Access-Control-Allow-Origin','*'); //服务器推一个头Access-Control-Allow-Origin会去 } res.write('123'); res.end(); }) server.listen(8080);

req.headers 在这里插入图片描述

jsonp跨域原理（逐渐被废弃）例子（百度）

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=qqvip&json=1&p=3&sid=1469_21089_27400_26350_22159&req=2&pbs=qq%E9%82%AE%E7%AE%B1&csor=5&pwd=qqvio&cb=jQuery110204607003182369671_1540901339951&_=1540901339957

关键：

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=qqvi&cb=jQuery110204607003182369671_1540901339951&_=1540901339957

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=qqvi&cb=show // wd=qqq 搜索词 , cb=show (cb:回调函数，show要回调的函数，如下：

show({q:"qqvi",p:false,s:["qqvip","qqvip免费","qqvip邮箱","qq录屏","qq表情怎么导入微信表情","qqvip卡通第二天就没了","qq录屏快捷键","qqvip8","qqvip有什么用"]});

等价于：

//引用了一个外部脚本 function show(json){ alert(json.s); //s:["qqvip","qqvip免费","qqvip邮箱","qq录屏","qq表情怎么导入微信表情","qqvip卡通第二天就没了","qq录屏快捷键","qqvip8","qqvip有什么用"] } 原理创建一个script标签，给一个src 调用你的函数，如show() jquery 中的jsonp功能

注意：jQuery中的jsonp不是Ajax

$(function(){ $.ajax({ url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', data: {wd:qqvip}, dataType: 'jsonp', //设置dataType为jsonp jsonp: 'cb', //告诉JQuery这个回调函数的名字叫cb,名字不固定，你也可以叫callback等等 success(json){ alert(json.s); }, error(){ alert('error'); } }) }); 示例客户端修改 $.ajax({ url:'http://localhost:8080/', data: {a:77,b:89}, jsonp: 'callback', dataType: 'jsonp', success(num){ alert(num) }, error(e){ alert(e); } }) 服务端修改 const http = require('http') const url = require('url') let server = http.createServer(function(req,res){ let {pathname,query} = url.parse(req.url,true); let {a,b,callback}=query; res.write('${callback}($(parseInt(a)+parseInt(b)))'); res.end(); }) WebSocket: 双工HTML5的，IE9+用的非常广socket.io库,WebSocket兼容库安装：npm install socket.io给前后台使用基于/依赖于http http://socket.io //后端在node中使用：server.js 创建服务 const http = require('http'); const io = require('socket.io'); //1.创建一个http服务 let httpServer = http.createServer(); server.listen(); //2.然后创建一个webSocket 服务 let wsServer = io.listen(httpServer);//监听一个http服务 wsServer.on('connection',function(sock){//连接事件，有连接时，会有一个sock对象 sock.on('a',function(num1,num2){//接收 console.log('接到了浏览器发送的数据:${num1} ,${num2}'); }) })

//方法

sock.emit 发送sock.on 接收

//前端部分-做连接io.connect

//固定引入，实际上引入的是client.js let sock = io.connect('ws://localhost:80080'); //前端也需要有一个sock对象，这样前后端都有一个sock对象，可以进行通信，"ws:"标识webSocket协议,告诉浏览器这是一个webSocket通信 document.onclick = function(){ sock.emit('a',12,5);//取一个名称为“a”，自定义 } //反之，服务端也可以进行emit,前端进行on socket.io

1、兼容 2、二进制数据

v8引擎预编译：在编译之前，先转换为二进制代码

nodejs

1、性能高 2、跟前台配合方便 3、适合前端人员入门 4、适合中间层应用，不适合大型项目开发

在这里插入图片描述

fs.wirteHeader() => 写header ，status=200 res.write() => 写body package.json

作用：

不用把node_modules 拷贝到服务器，只需拷贝package.json 然后再服务端只需npm i，就会下载需要的包

npm i XXX -D安装xxx需要依赖的包 “devDependencies”

"scripts"中可以写脚本

聊天室业务分析：

1、用户注册、登陆 2、发言-》其他人 3、离线消息（离线的时候把数据存起来，等对方连接了，再从数据库中取出来）

数据-》数据库 1、用户 2、消息

单聊与群聊的区别：

单聊是多个字段（这个消息是给谁了），群聊是广播，没有这个字段，大家都可见

数据库：类型

关系型数据库——MySQL、Oracle，优点是支持复杂的功能;但缺点是相对其他类型，性能低文件型数据库——SQLite, 简单;支撑不了庞大应用，没法存储特别多数据文档型数据库——MongoDB,可以直接存储对象本身;不够严谨,性能偏低空间型数据库——存储坐标、位置等GIS空间数据

NoSQL: 性能高

Redis、memcached、bigtable、hypertablehive

库——文件夹，管理用，本身不能存数据表——文件，存数据

类型：

数字整数 tinyint(-128,127或0-255)、int(21亿或43亿) 浮点数 float 8位、double 308位

字符串小字符串 varchar(255bit) 大字符串 text(2G)

主键

唯一性能高

多语言language.js

【本文地址】

【通信】前端中的几类数据交互方式

【通信】前端中的几类数据交互方式

今日新闻

推荐新闻