一、http协议

• 网络传输协议

  • https

  • http

  • ftp

• 端口

  • 一般完整的网络地址应该由这三部分组成：协议+地址+端口

• http协议是网络协议的一种

  • 与服务器建立连接：需要三次握手

    • 客户端--->服务器：发送请求，第一次握手

      • 客户端：确认客户端自己可以正常发送请求

      • 服务器：确认客户端可以正常发送请求、确认服务器可以正常接收请求

    • 服务器--->客户端：发送请求，第二次握手

      • 服务器：确认服务器可以正常发送请求

      • 客户端：确认客户端可以正常接收请求、确认客户端可以正常发送请求、确认服务器可以正常接收请求

    • 客户端--->服务器：发送请求，第三次握手

      • 服务器：确认客户端可以正常接收请求

  • 与服务器断开连接：需要四次挥手

    • 客户端--->服务器：发送请求，第一次挥手

      • 告诉服务器，客户端要断开和服务器的连接了

    • 服务器--->客户端：发送请求，第二次挥手

      • 告诉客户端，服务器知道客户端要断开连接，并且服务器准备不再给客户端发请求

    • 服务器--->客户端：发送请求，第三次挥手

      • 告诉客户端，这是服务器的最后一条请求，之后服务器不会再发送请求了

      • 但是服务器可以接收请求

    • 客户端--->服务器：发送请求，第四次挥手

      • 告诉服务器，服务器发送的消息，客户端已经接收到

      • 并且知道服务器不会在发送请求了

      • 客户端不再接收服务器的请求

      • 但是客户端有可能随时再给服务器发送请求

  • 最终状态

    • 客户端不再接收请求，但是随时可能发送请求

    • 服务器不再发送请求，但是随时可以接收请求

二、请求报文和响应报文

http协议在网络传输中通过请求报文、响应报文来完成请求过程

• 请求报文：发送的请求内容

  • 由四部分构成：请求行、请求头、请求空行、请求体

  • 在控制台network中可以看到

• 响应报文：发送的响应结果

  • 由三部分构成：响应行、响应头、响应体

三、前端请求方式

1、form表单

• action：传参对象的url路径地址

• method：传参方式 get / post

• enctype：设定上传文件编码格式

  • application/x-www-form-urlencoded：默认值，只能上传文本文档

  • multipart/form-data：以二进制数据流的格式上传文件

• 参数标签的设定，input、select、textarea

  • name属性：作为键值对的键名，来存储数据，如果多个标签name属性值相同，value不同，给name属性值添加[]

  • value属性：设定标签存储数据

2、a超链接

• 超链接点击，页面跳转，也能实现传参功能

• 超链接只能以get方式传参

• 超链接传参有固定的语法格式

  • 在href属性值，也就是url地址之后，拼接传参的键值对

  • url地址和传参键值对之间使用 ? 问号间隔

  • 键值对，键名=数值，键名和数值都是根据实际项目需求定义的

  • 多个键值对之间使用 & 符号做间隔

  • 键名和数据，都不要写引号

1 <a href="https://www.baidu.com?name=张三&age=18">百度</a>

点击a标签不会跳转

 1 <a href="https://www.baidu.com" onclick="return push('/test')">百度</a>
 2 
 3 <script src="https://cdn.bootcss.com/history/4.7.2/history.js"></script>
 4 <script>
 5   let history = History.createBrowserHistory()
 6     function push(path){
 7     history.push(path)
 8     return false
 9   }
10 </script>

3、ajax方式

form表单、超链接发起请求都需要跳转页面，ajax方式不需要页面跳转

ajax传参，都是异步程序，不影响同步程序的执行

1、ajax使用基本步骤

需要创建一个 ajax 对象

1 const xhr = new XMLHttpRequest();

配置请求内容和数据

• get方式可以在请求地址之后直接拼接传参的键值对

• post方式在 open 中只定义请求url地址

1 xhr.open( '请求方式get/post', '请求地址?键名=数值&键名=数值' );

发送请求

1 xhr.send();

• post请求在 send() 阶段来定义参数

1 // 1、定义请求头信息
2 xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
3 
4 // 2、定义参数，xhr.send(以字符串形式传递参数)
5 xhr.send('name=张三&age=18');

接收请求结果，响应体内容

1 xhr.onload = function(){}

2、ajax的兼容处理

创建ajax对象

 1 // 标准浏览器
 2 // const xhr = new XMLHttpRequest();
 3 
 4 // 低版本IE浏览器
 5 // const xhr = new ActiveXObject('Microsoft.XMLHTTP');
 6 
 7 // 兼容语法
 8 let xhr;
 9 if (XMLHttpRequest) {
10   xhr = new XMLHttpRequest();
11 } else {
12   xhr = new ActiveXObject('Microsoft.XMLHTTP');
13 }

定义传参对象url地址

1 xhr.open();

发送请求

1 xhr.send();

接受请求

 1 // 标准浏览器 
 2 // xhr.onload = function(){}
 3 
 4 // 低版本IE浏览器
 5 // 判断状态码是否是 200 - 299，判断请求步骤是否已经结束
 6 // 当请求步骤发生改变时,触发函数程序
 7 xhr.onreadystatechange = function () {
 8   // 判断请求步骤数值是4，表示请求结束
 9   // 判断http的请求状态码是200-299表示请求成功,此时,判断请求成功并且接收响应体内容
10   // 以2开头之后跟2位数值 --- 2开始的三位数
11   // /^2\d{2}&/.test(xhr.status)
12   if (xhr.readyState === 4 && (xhr.status >= 200 && xhr.status <= 299)) {
13     // 数据处理
14   }
15 }

ajax的请求步骤

• 同步

  • 0 --- 创建ajax对象

  • 1 --- 设定ajax请求地址和请求方式

• 异步

  • 2 --- 发送ajax请求

  • 3 --- 接收ajax响应报文，解析响应体中的内容

  • 4 --- ajax请求完全结束，并且响应体内容解析完成

4、fetch

• 由HTML5提供的内置API

• 更加简单的数据获取方式，功能更强大、灵活，可以看作是xhr的升级版

• 基于Promise实现

• fetch支持很多请求方式，但默认为GET请求，如果需要使用其他方式可以通过第二个自选参数的method选项去指定

语法结构

1 fetch(url,[some settings]).then(fn2)
2       .then(fn3)
3       ...
4       .catch(fn)

用法示例

1 fetch("http://xxx/?id=123")
2   .then(
3     res => {
4       console.log(res)
5       res.json()
6     })
7   .catch(err => {})

1 // 1、通过url表达式来传递数据
2 fetch("http://xxx/?id=123")
3     .then(res => res.json())
4     .then(data => console.log(data));

 1 // 2、post标准提交
 2 fetch("http://xxxx/post", {
 3     method: "post",
 4     body: "uname=lisi&pwd=123",
 5     headers: {
 6         "Content-Type": "application/x-www-form-urlencoded",
 7     },
 8     })
 9     .then(res => res.json())
10     .then(data => console.log(data));

 1 // 3、post提交json数据
 2 fetch("http://localhost:3000/books", {
 3     method: "post",
 4     body: JSON.stringify({
 5         uname: "lisi",
 6         pwd: "123",
 7     }),
 8     headers: {
 9         "Content-Type": "application/json",
10     },
11 })
12     .then(res => res.json())
13     .then(data => console.log(data));

注意：fetch 不会发送 cookies。除非你使用了credentials 的初始化选项credentials: "include"

fetch的响应结果处理方法

• json()：返回结果和JSON.parse(responseText)一样

• text()：将返回体处理成字符串类型

四、响应状态码

• 100 - 199：表示连接已经正常建立，正在持续保持连接中

• 200：连接请求已经结束，成功

• 3XX【重定向系列的状态码】

  • 301：永久重定向

  • 302：临时重定向

  • 307：内部浏览器（缓存）重定向

• 4XX【错误系列】

  • 400：bad request，错误请求

  • 401：鉴权失败

  • 403：禁止访问

  • 404：找不到对应的资源

  • 405：方法不被允许

• 5XX【服务器错误，环境问题】

  • 500：服务器内部错误（代码、环境问题）

  • 502：bad Getway，错误网关

五、跨域问题

• 浏览器的同源性

  • 同源指的是两个请求的文件，必须是，同一个项目

  • 同一个项目：请求对象的url地址必须与请求发起文件完全相同

  • 在浏览器处理请求时默认执行的是同源策略

  • 也就是浏览器只允许同源的项目/请求之间获取响应体内容

  • 如果不是同源的请求，只允许浏览html文件等，不允许获取响应体

• jsonp

  • 利用script标签没有跨域限制，通过src属性，设定跨域请求地址，请求内容按照 js程序格式执行

  • 请求方式只能是get方式，可以在url请求地址后，拼接数据传参

• cors

  • 后端帮助我们解决跨域的方式

• 服务器代理

  • proxy

  • 正向代理

    • 缩短访问时间：提高访问执行效率

    • 分担访问负荷：防止主服务器访问量过大，直接崩溃

    • 客户端发起请求，实际*问的是代理服务器，客户端不知道访问的是哪个具体的服务器

  • 反向代理

    • 服务器响应请求，也是发送给代理服务器，并不是直接发送给客户端

    • 主服务器只能看到代理服务器发送的请求，看不到客户端发送的请求

六、常见请求方式

1、get请求

• get请求携带的数据，存储在地址栏中

• 搜索数据时使用get请求

• 地址栏内，存储字符串的长度有限的，导致get方式传参数据内容大小有限制

• 会被浏览器自动缓存存储

  • 如果两次get请求内容相同，浏览器不会执行第二次get请求

  • 会使用上一次get请求的响应结果内容

  • 实际项目中，往往关闭get自动缓存功能/或者添加一个时间戳让请求不同

2、post请求

• post携带的数据，存储在请求体中

• 除了搜索数据之外，其他情况都使用post请求

• post请求方式,将数据存储在请求体中，理论上可以无限传递数据，但是实际情况中，会受到服务器限制要求

• post请求不会被浏览器自动缓存

• 其他请求方式，本质上还是 post 请求，只是带语义化

  • PUT

  • DELETE

  • HEAD

  • PATCH

  • OPTION

  • CONNECT

七、json字符串

• json字符串是一种特殊的字符串

• 每一种计算机语言都有自己特定的 json 字符串

• 作为各种计算机语言之间的通用语言

• JavaScript的json字符串语法

  • JSON.stringify()：将其他数据类型转化为 json字符串

  • JSON.parse()：将json字符串，还原为对应的数据类型