2020年09月_jwz934738949

原创三握手与四挥手

文章目录三握手四挥手为什么连接是三握手，关闭是四挥手为什么TIME_WAIT状态需要经过2MSL才能返回到CLOSE状态为什么不能用两次握手进行连接？如果已经建立了连接，但是客户端突然出现故障了怎么办三握手首先客户端与服务器端都打开，服务器端进入LISTEN(收听)状态客户端向服务器端发起请求，SYN=1，seq=x，客户端进入SYN_SEND(同步已发送)状态服务器端收到客户端传来的消息之后，向客户端发起响应，SYN=1，ACK=1，ack=x+1，seq=y，服务器端进入SYN_RECV(同

2020-09-28 09:36:53 173

原创 HTTP/2.0

文章目录HTTP/1.1的不足二进制分帧层多路通信请求优先级服务器推送首部压缩HTTP/1.1的不足在传输中会出现队首阻塞问题响应不分轻重缓急，只会按照先来后到的顺序执行并行通信需要建立多个TCP连接服务器不能主动推送客户端想要的资源，只能被动的等待客户端发起请求由于HTTP是无状态的，所以每次请求和响应都会携带大量冗余信息二进制分帧层在HTTP/2.0中，要先对数据进行二进制编码，再把数据分成一个一个的帧，接着把帧送到数据流中，最后对方接接收帧并拼成一条消息，再处理请求在2.0版

2020-09-26 20:34:22 152

原创 HTTPS

文章目录定义HTTP不安全加密对称加密非对称加密数字签名数字证书安全通信机制HTTPS有哪些缺点定义HTTPS是一种构建在SSL或TLS上的HTTP协议。HTTPS协议的URL都以“https://”开头，在访问某个Web页面时，客户端会打开一条到服务器443端口的连接HTTP不安全数据以明文传递，有被窃听的风险接收到的报文无法证明是发送时的报文，不能保障完整性，因此报文有被篡改的风险不验证通信两端的身份，请求或响应有被伪造的风险加密对称加密对称加密在加密和解密的过程中只使

2020-09-26 19:51:25 578

原创 TCP与UDP有什么区别

UDP是一种简单、不可靠的通信协议，只负责将数据发出，但不保证它们能否到达目的地UDP没有顺序控制，所以当出现数据包乱序到达时，没有纠正功能UDP没有重传控制，所以当数据包丢失时，也不会重发UDP在通信开始时，不需要建立连接，结束时也不用断开连接UDP无法进行流量控制、拥塞控制等避免网络拥堵的机制UDP的包头长度不到TCP包头的一半，并且没有重发、连接等机制，故而在传输速度上比起TCP有更大的优势，比较适合即时通信、信息量较小的通信和广播通信...

2020-09-26 19:08:02 87

原创 RESTful架构风格

RESTREST表示转述性状态转移。转述性状态转移的目的是操作资源，通过转移和控制资源的表述就能实现什么是RESTful API？如何设计RESTful API?RESTful API是指符合REST设计风格的Web API。为了使得借口安全、易用、可维护和可扩展通信使用HTTPS安全协议在URL中加入版本号URL中的路径不能有动词，只能用名词用HTTP方法对资源进行增删改查的操作用HTTP状态码传达执行结果和失败原因为集合提供过滤、排序、分页等功能用查询字符串或HTTP首部Acc

2020-09-26 17:14:22 82

原创 js基础——原型对象

每当我们创建一个函数时，解析器都会向函数添加一个新的属性prototype，这个属性对应着一个对象，这个对象叫做原型对象。当函数以构造函数调用时，它所创建的对象都会产生一个隐含的属性，指向该构造函数的原型函数。对于该原型对象，可以使用__proto__来访问该属性；同一个类的实例都可以访问该原型对象。我们可以将对象中共有的属性或方法，统一设置到原型对象中去；当对象访问一个属性或方法时，...

2020-09-26 16:39:37 186

原创 HTTP

文章目录定义HTTP协议HTTP报文缓存缓存处理过程新鲜度检测no-cache与no-store日期比对法进行再验证实体标记法进行再验证在浏览器中，一个页面从输入URL到加载完成，都有哪些步骤？GET和POST的区别定义HTTP是超文本传输协议，是获取网络资源的应用层协议，由请求和响应构成客户端发起HTTP请求，用传输层的TCP协议建立连接，服务器响应请求，做出应答，回传数据报文URI：统一资源标识符，用于标识某个互联网资源，由URL和URN构成URL：统一资源定位符，俗称网址。URL语法为

2020-09-26 16:30:23 1166

原创 HTML元素知识点

defer与asyncdefer代表延迟，延迟脚本执行，直到文档解析完成之后，才会进行脚本的执行。但是，脚本的加载与HTML文档的解析是同步进行的async代表异步，尽快执行脚本。在脚本下载阶段，脚本的下载与HTML的解析是同步进行的，当脚本下载完毕时，优先执行脚本，脚本执行完毕以后，再进行HTML的解析content属性中的关键字content属性是meta元素的一个属性，经常与viewport连用，代表设置浏览器的视口，用于移动设备width：视口的宽度，值为像素值initial-sc

2020-09-25 19:56:28 174

原创 HTML与HTML5的区别

旧版本的HTML比较依赖浏览器的插件，例如播放视频要安装Flash插件HTML5不再依赖SGML，文档声明类型DOCTYPE只有一种HTML5消除了过时或冗余的元素新增了许多语义化的元素，例如article、header等，许多新的功能video或者canvas等，提供更好的跨平台支持HTML5指定了一些全新的全局属性与元素属性，全局属性有draggable、contenteditable等，元素属性有accept、placeholder等...

2020-09-25 19:30:18 156

原创 Flex布局

Flex布局基本概念Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性Webkit 内核的浏览器，必须加上-webkit前缀采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）主轴的开始位置（与边框的交叉点）叫做main start

2020-09-24 21:21:12 120

原创 Javascript中的事件循环

任务队列JS分为同步任务与异步任务所有的同步任务都会被放入执行栈(Call Stack)中，等待所有的同步任务执行完毕以后，开始执行异步任务主线程之外，事件触发线程会管理着一个任务队列(Task Queue)，只要异步任务有了运行结果，就可以将该异步任务放到任务队列中去当执行栈中的同步任务执行完毕之后，系统会读取任务队列中的异步任务，并将它们放入执行栈当中去执行宏任务宏任务(macro task)指的是在执行栈中执行的代码，或者是从事件队列中获取的异步任务浏览器在执行异步任务的时候，每

2020-09-24 20:18:07 99

原创 HTTP状态码

1XX 指示信息状态码英文名称中文描述100Continue继续。客户端应继续其请求101Switching Protocols切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议2XX 成功状态码英文名称中文描述200OK请求成功201Created指POST请求的结果，已在服务器上成功创建了一个或多个新资源202Accepted表示已接受处理请求，但处理尚未完成，表异步204No conten

2020-09-24 19:22:40 83

原创 WebSocket的使用

为什么使用WebSocket通常的浏览器通信协议为HTTP协议，在HTTP协议中要想实现通信，必须是客户端发起请求，等待服务器接收请求之后，再发回响应信息，这种情况下通信效率比较低。并且无法实现服务器向客户端发送信息如果服务器存在连续的状态变化，客户端必须使用轮询的方法来进行通信。每隔一段时间，就发起一个询问，了解服务器有没有新的变化WebSocket最大的特点就是可以由服务器发送消息，客户端来进行接收，也可以实现客户端发送消息，由服务器端进行接收，实现双向的信息通信WebSocket的特点

2020-09-24 17:07:03 171

原创自适应布局与响应式布局

定义自适应布局：自适应布局指的是页面对于不同的设备，例如手机、电脑，不同的设备会对自动根据屏幕大小调整页面的布局与大小响应式布局：响应式布局对于不同的设备会首先识别屏幕大小，会根据不同的屏幕大小调整网页设计，可能会改变网页布局与网页内容使用原因屏幕分辨率越来越多，如果每个分辨率都进行不同的网页设计，这样会加大工作量，不便于维护开发使用meta-viewport也可以解决不同设备分辨率的问题，但是仅仅是修改页面的缩放比例，其中的内容与布局并没有发生变化，不利于用户的使用解决办法使用百

2020-09-24 11:14:03 151

原创使用flex布局实现九宫格

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>flex布局设置九宫格</title> <style> .content { width: 600px; height: 600px; margin: 0 auto; display: flex; /*设置排

2020-09-24 09:28:15 3283

原创排序算法

冒泡排序// 冒泡排序法function bubbleSort(arr) { for (let i = 1; i < arr.length; i++) { for (let j = 0; j < arr.length - i; j++) { if (arr[j] < arr[j + 1]) { let temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp;

2020-09-22 16:06:50 71

原创普通函数与箭头函数的区别

普通函数function的声明优先级最高，会进行变量提升，优先对函数进行声明，而箭头函数不会变量提升；箭头函数没有this、arguments属性；箭头函数无法被new，没有构造函数与property属性；箭头函数不能使用yield命令，因此箭头函数不能用作Generator函数；箭头函数不能使用new:没有this,无法使用call、apply函数；没有prototype属性，使用new命令时，需要将函数的prototype属性复制给创建对象的__proto__属性...

2020-09-22 14:40:27 135

原创实现数组扁平化

数组扁平化指的是在一个数组对象中存在着一个或者多个数组成员，对其进行扁平化处理，将这个数组中的元素从数组成员中取出来，成为一个数组例如：[1, [2, 3, [4 , 5]],6, [7, 8]]，扁平化之后为[1, 2, 3, 4, 5, 6, 7, 8] function flatten(arr) { let res = [] arr.map((item) => { if (Array.isArray(item)) { re.

2020-09-21 15:21:40 141

原创求字符串的字节长度

假设一般字符为1个字节长度，而汉字为2个字节长度，求字符串的字节长度 function getBytes(str) { const len = str.length let bytes = len for (let i = 0; i < len; i++) { if (str.charCodeAt(i) > 255) { bytes++ } } return bytes .

2020-09-21 15:00:19 974

原创用Array的reduce方法实现map方法

Array的reduce方法适用于对数组中的每两项进行累加处理，最后得到唯一的值map方法是用于对数组中的每一项都分别进行处理，得到一个新的数组 const map = function (arr, fn) { return arr.reduce((mappeedArr, ele) => { return [...mappeedArr, fn(ele)] }, []) } const arr = [2,4,5,6] cons.

2020-09-21 14:53:59 696

原创 var、let、const的区别

var定义的是全局变量，会挂载到window对象上，而let与const不会；var定义的变量存在变量提升，变量声明会自动提到作用域顶部，而let与const不会；var的作用域范围是函数作用域，而let与const作用域范围是块级作用域同一作用域下，let与const声明的变量不允许再次声明，而var可以重复声明同一变量；同一作用域下，在let与const声明变量之前使用变量会进入暂时性死区，浏览器会报错，而var可以在声明之前使用，输出为undefined;const声明时必须赋值，并且不能.

2020-09-20 09:34:00 156

原创 CSS特殊布局

BFC两栏布局页面实现两栏布局，左边区域设置为左浮动，右边区域不设置浮动效果当右边区域高度超过左边区域高度时，会出现右边区域来到左边区域的下方原因是右边区域不是BFC（块格式化上下文），把右边区域设置为BFC之后，即使右边区域高度高于左边区域，右边区域也不会到左边去<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>BFC两栏布局</t

2020-09-15 15:02:37 127

原创 CSS网格布局

网格容器display设置为grid时，网格按行排列，宽度自动占满整个屏幕display设置为inline-grid时，网格按行排列，宽度为元素本身宽度 .box1 { display: grid; } .box2 { height: 50px; background-color: aquamarine; margin-bottom: 10px; } .box1 { display: inlin

2020-09-14 20:54:24 257

原创 CSS水平居中

方式一父元素使用text-align居中所有子元素，子元素使用定位inline或者inline-block<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>text-align设置水平居中</title> <style> .wrapper { width: 100%; height:

2020-09-14 10:06:31 77

原创 CSS垂直居中

方式一通过vh，vh代表当前窗口的视图距离，值为1-100之间，代表当前窗口的百分比设置上下外边距为50vh，代表上下外边距为整个窗口的一半，再向上移动当前元素高度的一半<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vh设置垂直居中</title> <style> .content { wi

2020-09-14 09:43:44 108

原创 jQuery封装Cookie

封装jQuery的cookie文件，需要使用js文件，名称为jquery.cookie.js;(function ($, window) { $.extend({ // 添加cookie addCookie: function (key, value, day, path, domain) { // 处理默认保存的路径 // 获取文件所在路径，该路径为path let index = window.location.pathname.lastIn.

2020-09-09 10:38:46 250

原创 Cookie的使用

Cookie定义当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:当用户访问 web 页面时，他的名字可以记录在 cookie 中。在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。Cookie以键值对形式存储，键=值。使用document.cookie来设置以及获取网页中的cookie window.onload = function (ev) { docum

2020-09-09 09:46:05 155

原创 Ajax——JSON

在Ajax中，可以对JSON文件进行相对应的处理，使得JSON文件中的数据能够被引用到网页中来在js中可以使用JSON.parse方法，将JSON转为对象类型的数据；而JSON.stringify方法可以将js数据转为JSON格式的数据JSON格式为{ "name": "admin", "password": "1234", "userroles": "超级管理员"}-php文件导入JSON文件并且输出<?phpecho file_get_contents.

2020-09-08 14:30:26 118

原创 Ajax——jQuery封装

function obj2str(data) { data.t = new Date().getTime() var res = [] for (var key in data) { // 在传送数据时，有可能会出现中文，但是中文不被识别 // 使用encodeURIComponent实现对中文的转码 res.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key])) } return

2020-09-07 16:04:10 130

原创 Ajax——get与post封装

function obj2str(obj) { obj.t = new Date().getTime() var res = [] for (var key in obj) { // 在传送数据时，有可能会出现中文，但是中文不被识别 // 使用encodeURIComponent实现对中文的转码 res.push(encodeURIComponent(key) + "=" + encodeURIComponent(obj[key])) } return res.

2020-09-07 15:43:30 132

原创 Ajax——get封装

function obj2str(obj) { obj.t = new Date().getTime() var res = [] for (var key in obj) { // 在传送数据时，有可能会出现中文，但是中文不被识别 // 使用encodeURIComponent实现对中文的转码 res.push(encodeURIComponent(key) + "=" + encodeURIComponent(obj[key])) } return res.

2020-09-07 15:16:05 186

原创 Ajax——get方法

Ajax适用于页面与服务器相互传递数据，并且可以在页面不重新加载的情况下与服务器交换数据Ajax的实现需要以下5个步骤：创建异步对象；设置请求的方式和请求地址；发送请求；监听状态的变化；处理返回结果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax-get</title></head>.

2020-09-07 14:06:44 1034

原创 get请求与post请求

get请求与post请求都是对数据进行处理，然后提交到远程服务器的方法请求数据存储的位置不同。get请求会将数据拼接到URL地址的后面（?name1=value1&name2=value2），而post请求会将提交的数据放到请求头当中提交数据大小限制不同。get请求对数据有大小限制，而post请求对数据没有大小限制请求应用场景不同。get请求用于提交非敏感数据与一些小数据，post请求用于提交敏感数据与一些大数据...

2020-09-07 08:00:46 98

原创 Ajax基础——PHP基本语法

PHP中定义变量不需要输入关键字，只需要使用$ 符号。例如：$num = 10;代表定义一个名为num的变量，值为10;打印变量使用关键字echo。例如：echo $num;定义数组，使用array方法，例如：$arr = array(1,2,3,4)。但是在打印数组时，不能使用echo，而是使用方法print_r，并且打印的结果为索引与值获取数组中的值直接在数组后加[]，输入索引就可以获取到数组中的值条件分支语法if与三目运算? :，switch语句，for循环，while循环与js语法基本一致.

2020-09-07 06:43:10 176

jquery-1.12.4.js

空空如也