JavaScript学习Day21笔记

最新推荐文章于 2024-07-14 16:01:12 发布
最新推荐文章于 2024-07-14 16:01:12 发布
阅读量118 收藏
点赞数 1
分类专栏： 二阶段 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57479061/article/details/118035457
版权

Day21笔记

一、HTTP超文本传输协议

  • 超文本传输协议是一种通信协议，它允许将超文本标记语言（HTML）文档从WEB服务器传送到客户端的浏览器。
  • HTTP是一个基于请求与响应模式的、无状态的、应用层的协议。
  • HTTP使用的传输层协议为TCP协议，而网络层使用的是IP协议（当然还使用了很多其他协议），所以说HTTP是基于TCP/IP协议簇来传递数据。

二、HTTP协议的五大特点

  1. 支持客户/服务器模式
    • 客户/服务器模式工作的方式是由客户端向服务器发出请求，服务器端响应请求，并进行相应服务。
  2. 简单快速
    • 客户向服务器请求服务时， 只需传送请求方法和路径。
    • 由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。
  3. 灵活
    • HТТР允许传输任意类型的数据对象。
    • 正在传输的类型由Content—Type加以标记。
  4. 无连接
    • 无连接的含义是限制每次连接只处理一个请求。
    • 服务器处理完客户的请求，并收到客户的应答后，即断开连接。
    • 采用这种方式可以节省传输时间。
  5. 无状态
    • HTTP协议是无状态协议。
    • 无状态指的是客户端向服务器发送请求之后，服务器仅传回响应，并不对请求做任何的保留和记忆。
    • 无状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。
    • 另一方面，在服务器不需要先前信息时它的应答就较快。
    • 可以使用Cookie和Session机制辅助记忆。

三、URL统一资源定位符

http://www.baidu.com:80/path/index.html?key1=value1&key2=value2#SomeWhereInTheDocument

方案或协议 => http://

​ 告诉浏览器使用何种协议，对于大部分WEB资源，通常使用HTTP协议或HTTPS协议。

Internet主机域名或IP地址 => www.baidu.com

​ 通常我们访问一个网站，使用的是主机名或者域名来进行访问。因为相对于IP地址（一组纯数字），域名更容易让人记住。但TCP/IP协议使用的是IP地址进行访问的。DNS服务就是用来解决这个问题的，它提供域名到IP地址之间的解析服务。

端口 => :80

​ 两个主机之间要发起 TCP 连接需要两个条件，主机 + 端口。它表示用于访问 Web 服务器上资源的入口。如果访问的该 Web 服务器使用HTTP协议的标准端口（HTTP为80，HTTPS为443)授予对其资源的访问权限，则通常省略此部分。否则端口就是 URI 必须的部分。

路径 => /path/index.html

​ 是 WEB服务器上资源的路径。以端口后面的第一个 / 开始，到 ? 号之前结束，中间的 每一个/ 都代表了层级（上下级）关系。这个 URL 的请求资源是一个 html 页面。

查询 => ?key1=value1&key2=value2

​ 是提供给 Web 服务器的额外参数。如果是 GET 请求，一般带有请求 URL 参数，如果是 POST 请求，则不会在路径后面直接加参数。这些参数是用 & 符号分隔的键/值对列表。key1 = value1 是第一对，key2 = value2 是第二对参数。

片段 => #SomeWhereInTheDocument

​ 是资源本身的某一部分的一个锚点。锚点代表资源内的一种“书签”，它给予浏览器显示位于该“加书签”点的内容的指示。例如，在HTML文档上，浏览器将滚动到定义锚点的那个点上；在视频或音频文档上，浏览器将转到锚点代表的那个时间。值得注意的是 # 号后面的部分，也称为片段标识符，永远不会与请求一起发送到服务器。

四、HTTP的工作流程

  1. 和服务器建立链接。
  2. 给服务器发送请求。
  3. 服务器接收到请求后进行相应的处理并给出一个响应，由客户端接收响应。
  4. 断开与服务器的链接。

五、和服务器建立链接（三次握手）

  • 三次握手其实就是指建立一个TCP连接时，需要客户端和服务器总共发送3个包。
  • 进行三次握手的主要作用就是为了确认双方的接收能力和发送能力是否正常。
  • 指定自己的初始化序列号为后面的可靠性传送做准备，实质上就是连接服务器指定端口，建立TCP连接，并同步连接双方的序列号和确认号，交换TCP窗口大小的信息。
  • 刚开始客户端处于Closed状态，服务器处于Listen状态。

第一次握手

​ 客户端给服务器发送一个SYN报文，并指明客户端的初始化序列号ISN。此时客户端处于SYN_SENT状态。

第二次握手

​ 服务器收到客户端的SYN报文后，会用自己的SYN报文作为应答，并且也指定了自己的初始化序列号ISN。同时会把客户端的ISN+1作为ACK的值，表示自己已经收到了SYN报文，此时服务器处于SYN_RCVD的状态。

第三次握手

​ 客户端收到服务器的SYN报文后，一样会把服务器的ISN+1作为ACK的值发送给服务器，表示已经收到了服务端的SYN报文，此时客户端处于ESTABLISHED状态。

​ 最后服务器收到ACK报文后，也会处于ESTABLISHED状态，这个时候，双方就建立起了连接。

六、给服务器发送一个请求

​ 发送一个请求就是向目标服务器发送请求包（一串文本）。

HTTP请求包的结构

在这里插入图片描述

请求行

method请求方法 URL HTTP协议及版本

method请求方法

  1. GET
    • 用来请求访问已被URI识别的资源。
    • 指定的资源经服务器端解析后返回响应内容
    • GET方法会将提交的数据显示在URL中，不安全。
  2. POST
    • 提交的数据放在请求体中，没有直接放在请求头的URL中，较为安全。
  3. PUT
    • 从客户端向服务器传送的数据取代指定的内容.
    • PUT方法与POST方法最大的不同是： PUT是幂等的，而POST不是幂等的。
    • 幂等表示取代同一个地方的内容，即更新数据，如更换头像。
    • 非幂等如论坛发表评论，不会取代之前已发的内容。
  4. HEAD
    • 一般用来测试某个地址是否可以连通。
    • 类似于GET请求，只不过返回的响应中没有具体的内容，用于获取报头。
  5. DELETE
    • 请求服务器删除指定的资源。
  6. OPTIONS
    • 用来查询请求头的URL所指定的资源支持的请求方法。
  7. TRACE
    • 回显服务器收到的请求，主要用于测试或诊断。
  8. CONNECT
    • 开启一个客户端与所请求资源之间的双向沟通的通道，它可以用来创建隧道。

GET与POST请求的区别

  • 参数大小的区别

    => GET参数大小受URL长度限制，POST理论上没有限制。

  • 参数类型的区别

    => GET参数类型只能是string，而POST还可以传文件等其他类型的数据。

  • 安全性区别

    => GET参数显示在URL种可见，POST参数不可见更安全。

请求头

​ 报文头包含若干个属性，格式为“属性名:属性值”，服务端据此获取客户端的信息。

请求体

​ 它将一个页面表单中的组件值通过param1=value1&param2=value2的键值对形式编码成一个格式化串，它承载多个请求参数的数据。

七、接收服务器的一个响应

HTTP响应包的结构

在这里插入图片描述

响应行

HTTP报文协议及版本 状态码及状态描述

状态码

​ 是用以表示网页服务器超文本传输协议响应状态的3位数字代码。

分类分类描述
1xx指示信息—表示请求已接收，继续处理
2xx成功—表示请求已被成功接收、理解
3xx重定向—要完成请求必须进行更进一步的操作，后续的请求地址（重定向目标）在本次响应的Location域中指明
4xx客户端错误—请求有语法错误或请求无法实现
5xx服务器错误—服务器在处理请求的过程中有错误或者异常状态发生
常见状态代码状态描述说明
200OK客户端请求成功
202Accept已接受请求，但未处理完成
204No Conten表示客户端发送的请求得到了成功处理，但在返回的响应报文中不含实体的主体部分（没有资源可以返回）
206Patial Content表示客户端进行了范围请求，并且服务器成功执行了这部分的GET请求，响应报文中包含由Content-Range指定范围的实体内容
301Moved Permanently永久性重定向，表示请求的资源被分配了新的URL，浏览器会自动定向到新的URL，之后的请求应使用更改的URL
302Found临时性重定向，表示请求的资源被分配了新的URL，客户端应继续使用原有URL。301与302的区别：前者是永久移动，后者是临时移动
303See Other表示请求的资源被分配了新的URL，应使用GET方法定向获取请求的资源。 302与303的区别：后者明确表示客户端应当采用GET方式获取资源
304Not Modified表示客户端发送附带条件（是指采用GET方法的请求报文中包含if-Match、If-Modified-Since、If-None-Match、If-Range、If-Unmodified-Since中任一首部）的请求时，服务器端允许访问资源，但是请求为满足条件的情况下返回改状态码
307Temporary Redirect临时重定向，与303有着相同的含义，307会遵照浏览器标准不会从POST变成GET；（不同浏览器可能会出现不同的情况）
400Bad Request表示请求报文中存在语法错误
401Unauthorized Required未经许可，需要通过HTTP认证
403Forbidden服务器理解客户端的请求，但服务器拒绝该次访问（访问权限出现问题）
404Not Found表示服务器上无法找到请求的资源，除此之外，也可以在服务器拒绝请求但不想给拒绝原因时使用
500Inter Server Error表示服务器内部发生了错误，也有可能是web应用存在的bug或某些临时的错误时
502Bad Gateway充当网关或代理的服务器，从远端服务器接收到一个无效的请求
503Server Unavailable表示服务器暂时处于超负载或正在进行停机维护，无法处理请求

八、传输内容类型content-type

  • 协议规定POST提交的数据，必须包含在消息主体中entity-body中，但是协议并没有规定数据使用什么编码方式，开发者可以自己决定消息主体的格式。
  • 数据发送出去后，需要接收的服务器解析成功，一般服务器会根据content-type字段来获取参数是怎么编码的，然后对应去解码。

常见的三种content-type数据类型

  • application/x-www-form-urlencoded

    在最开始的请求方式中，请求参数都是放在URL中，表单提交的时候，都是以键值对的方式写在URL后面，这也是浏览器表单提交的默认方式。

  • multipart/form-data

    此种方式多用于文件上传，表单数据都保存在HTTP的正文部分，各个表单项之间用boundary分开。

  • application/json

    现在越来越多的应用使用application/json用来告诉服务器消息主体是序列化的JSON字符串，由于JSON规范的流行，各大浏览器都开始支持JSON.stringify。

怒锤狗男人
关注
专栏目录
day21笔记1
08-08
在今天的笔记中，我们将深入探讨Session的多个方面，包括其工作原理、配置选项以及如何自定义Session的存储机制。 1. **Session的数据存储与类型** - Session数据是以序列化格式存储的，这意味着对象类型的数据在...
javascript 学习笔记（四） 倒计时程序代码
12-03
在本篇《javascript 学习笔记（四）：倒计时程序代码》中，我们将深入探讨如何使用JavaScript实现一个简单的倒计时功能。这个倒计时程序允许用户在文本框中输入截止日期，并通过点击“开始倒计时”按钮启动倒计时。...
从 “key1=value1&key2=value2…” 的字符串中，根据key获取value的工具类
code_agent的博客
01-30 1022
从 “key1=value1&key2=value2…” 的字符串中，根据key获取value的工具类： package com.mars.cloud.user.util; import java.util.regex.Matcher; import java.util.regex.Pattern; /** * @Project: <br> * @CreateDate: 2021/01/30 11:42 <br> * @Author: <br> *
网络基本概念
狡辉两门的博客
05-02 513
先定个小目标 完成案例,能够看懂api文档，根据接口文档完成阶段案例的数据部分代码实现 案例访问路径：https://test-1259079405.cos-website.ap-beijing.myqcloud.com api文档地址：http://mock.duyiedu.com/group/121 服务器 什么是服务器 做为硬件设备，我们可以把他看作是一个独立的计算机 一个提供服务的应用程序 服务器特点 能够通过网络被其他的程序进行访问 能够提供一些服务 客户端
JavaScript-DAY3学习笔记
m0_58323724的博客
02-15 677
案例-数组筛选（从数组中筛选大于等于10的元素放入到新数组中）数组是一种可以按顺序保存数据的数据类型。3.综合案例--根据数据生成柱状图。重新赋值：数组[下标]=新值。案例-求1-100的偶数和。案例-打印5行5列星星。案例-数组最大值最小值。案例-输出1-100。案例-打印倒三角星星。2.2数组的基本使用。
JavaScript学习Day22笔记
怒锤狗男人的博客
06-20 173
Day22笔记 一、什么是跨域 ​ 当浏览器从一个网页的URL地址去请求另一个网页URL的地址时，如果协议、域名、端口三者之间任意一个与当前页面的URL不同，都会引起跨域。 注：localhost和本机的IP地址虽然都指向本机，但也属于跨域。 二、引起跨域的原因 浏览器安全限制 同源策略 XHR(XMLHttpRequest)请求 三、同源策略 ​ 同源策略时由NetScape网景公司提出第一个著名的安全策略，现在所有支持JavaScript的浏览器都会使用这个策略。限制了从一个源加载的文档或脚本如
JavaScript学习Day19笔记
怒锤狗男人的博客
06-15 209
Day19笔记 一、getComputedStyle获取CSS属性 // h window.getComputedStyle(Ele,null).css属性名 二、SCROLL滚动事件 // 获取滚动条距离顶部的距离 document.documentElement.scrollTop window.pageYOffset // 获取滚动条距离左边的距离 document.documentElement.scrollLeft window.pageXOffset 三、获取元素尺寸 offsetWidt
JavaScript学习Day06笔记
怒锤狗男人的博客
06-01 789
Day06笔记 一、数组array 什么是数组 数组是复杂数据类型array。 函数是装代码的盒子，数组就是装数据（基本数据类型）的盒子。 语法： // 字面量方式创建数组。 var 数组名 = [数据1，数据2]； // new语句，构造函数方式创建数组。 var 数组名 = new Array(数据个数)； 使用数组中数据的方法： 通过数组的下标（索引号）访问数组中的数据并赋值。 数组名[下标（索引号）] = 数据值； 注意： 数组为动态数组。 当用下标（索引号）访问超过数组数据个数
JavaScript学习Day13笔记
怒锤狗男人的博客
06-03 158
Day笔记 一、JavaScript事件 事件三要素 事件源 ​ 获取事件源：getElement、querySelector 绑定事件（事件类型） ​ 1、鼠标事件 ​ 2、键盘事件 ​ 3、表单事件 ​ 4、编辑事件 ​ 5、页面相关事件 事件处理函数（匿名函数） 事件调用方式 属性事件 <标签 事件=“事件处理函数调用语句” /> - 事件绑定 ​ ```js nodeEle.事件名 = function(){} // 当同一个节点绑定同一种事件时，前
JavaScript学习Day14笔记
怒锤狗男人的博客
06-03 140
Day14笔记 一、页面事件 事件 说明 onload 加载完成后执行 ononresize 尺寸改变时执行 onscroll 滚动条滚动时执行 onerror 加载失败时执行 二、EVENT事件对象 只要触发事件，就会生成event对象。 node.Ele.事件 = function(event){ // 打印event事件对象的结构。 console.dir(event) } currentTarget属性和target属性 // currentTarget和
JavaScript学习Day15笔记
怒锤狗男人的博客
06-05 144
Day15笔记 一、自调用函数 语法： // 直接获取返回值。 (function() {} ()) // 先计算前面括号的值，再执行返回值，返回的是函数。 (function() {}) () 二、this关键字 事件处理函数中this => 事件源 对象的方法函数中this => 对象本身obj 定时器匿名函数中this => window 全局函数中this => window 自调用函数中this => window 箭头函数中没有this
javascript学习笔记二
最新发布
never1624的博客
07-14 859
浏览器分为两个部分：渲染引擎和js引擎渲染引擎用来解析HTML与CSS，俗称内核。比如chrome浏览器blink，老版本webkit（偷的苹果浏览器的内核）js引擎也叫js解释器，用来读取网页中的javascript的代码，对其处理后运行，比如chrome浏览器的v8引擎浏览器本身并不会执行js代码，而是通过内置的JavaScript引擎大白话：变量就是一个装东西的盒子通俗：变量就是用于存放数据的容器，我们通过变量名可以获取数据，甚至数据可以修改为什么需要数据类型。
javascript学习笔记（七）利用javascript来创建和存储cookie
12-04
JavaScript中的Cookie是客户端存储数据的一种方式，它在用户浏览网页时被创建，并存储在用户的浏览器上。每当同一台计算机通过浏览器请求页面时，浏览器会自动将Cookie一同发送给服务器。Cookie通常用于跟踪用户状态...
javascript学习笔记（三）显示当时时间的代码
01-19
html代码如下： 代码如下: ”showTime”></div> javascript 代码如下：时间显示格式为：2011-04-04 星期二 12:09:34 代码如下: function startTime() { try{ var today = new ... var day = today.getDay(); var hour =
树懒_day03_javascript高级笔记
07-20
移动开发的初学者小白树懒记录每天的学习生活，学习web开发中的JavaScript的高级部分。
JavaScript学习Day29笔记
怒锤狗男人的博客
06-29 371
Day29笔记 一、异步与同步 JavaScript是单线程语言，就好比只有一条流水线。 同步 所有代码按顺序执行，后面的代码需要等待前面的代码执行完毕。 异步 异步是一种代码的执行方式，无需等待前面的代码执行完毕，异步程序在触发（代码执行顺序触发、事件触发、计时器触发等）后单独执行，程序执行的结果会反应给回调函数，通过回调函数就可以知道异步程序是否成功执行。 二、NPM包管理器 NPM：Node Package(包) Manager(管理器)。 Node.js（一个脱离浏览器可以单独运行的JavaSc
JavaScript学习Day32笔记
怒锤狗男人的博客
07-02 293
Day32笔记 一、Promise异步编程 Promise是异步编程的一种解决方案。 从语法上讲，Promise是一个内置对象（构造函数），自身上有 resolve 、 reject 等方法，原型上有 then 、 catch 等方法。 new Promise(function(resolve,reject){}) Promise对象提供了简洁的API，使得控制异步操作更加容易，避免了回调地域的问题。 二、Promise的三种状态 pending => 正在请求 rejecte
JavaScript学习Day20笔记
怒锤狗男人的博客
06-17 265
Day20笔记 一、class类 // 类名规则首字母大写 class 类名{ // constructor构造器，固定写法 constructor(){ // 构造器中定义固定属性 this.属性1 = 属性值 } // 方法直接书写 方法名(){ // 方法函数中定义属性，也会储存在constructor中 this.属性2 = 属性值 } } // 必须使用new关键字调用class类。 /
JavaScript学习Day30笔记
怒锤狗男人的博客
06-30 232
Day30笔记 一、分布式版本管理器GIT 管理项目文件的工具，可以保留项目所有的版本。 当某个项目文件被 GIT 管理后，我们可以进行各种操作来保证我们写过的内容不会丢失。 二、GIT版本库 当一个文件夹被 git 管理后，git 会对当前文件夹进行分区。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NM20ns5E-1625056608419)(C:\Users\两两\AppData\Roaming\Typora\typora-user-images\image-2
JavaScript入门：第一天笔记与基本概念
在JavaScript Day_01的学习笔记中，我们深入探讨了JavaScript语言的基础知识和应用。JavaScript作为一门重要的开发语言，尤其在前端开发领域发挥着核心作用，它基于ECMAScript规范，允许在网页中实现动态交互。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值