网络编程-JavaScript中发送网络请求汇总

文章目录

1.前后端分离优势
2.HTTP协议的解析
- 2.1 HTTP的介绍
- 2.2 HTTP的组成
- 2.3 HTTP的版本
- 2.4 HTTP请求方式
- 2.5 HTTP请求头字段
- 2.6 HTTP响应状态码
- 2.7 HTTP响应头
3.AJAX网络请求
- 3.1 AJAX发送请求
- 3.2 XHR的状态
- 3.3 XHR其他事件监听
- 3.4 响应数据和响应类型
- 3.5 HTTP的响应状态
- 3.7 GET/POST传递参数
4.AJAX网络请求封装
- 补充: 过期时间和取消请求
- - 过期时间
  - 取消请求
5.Fetch使用和上传文件
- 5.1 Fetch基本使用
- 5.2 Fetch数据的响应
- 5.3 Fetch网络请求的演练
- 5.4 Fetch POST请求
- 5.4 Fetch POST请求

1.前后端分离优势

早期的网页都是通过后端渲染来完成的：服务器端渲染（SSR，server side render）：

客户端发出请求 -> 服务端接收请求并返回相应HTML文档 -> 页面刷新，客户端加载新的HTML文档；

服务器端渲染的缺点：

当用户点击页面中的某个按钮向服务器发送请求时，页面本质上只是一些数据发生了变化，而此时服务器却要将重绘的整个页面再返回给浏览器加载，这显然有悖于程序员的“DRY（ Don‘t repeat yourself ）”原则；
而且明明只是一些数据的变化却迫使服务器要返回整个HTML文档，这本身也会给网络带宽带来不必要的开销。

有没有办法在页面数据变动时，只向服务器请求新的数据，并且在阻止页面刷新的情况下，动态的替换页面中展示的数据呢？

答案正是“AJAX”。

AJAX是“Asynchronous JavaScript And XML”的缩写(异步的JavaScript和XML)，是一种实现无页面刷新获取服务器数据的技术。

AJAX最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

你可以使用AJAX最主要的两个特性做下列事 :

在不重新加载页面的情况下发送请求给服务器；
接受并使用从服务器发来的数据。

这里有两幅图给大家理解一下:

服务器端渲染

前后端分离

2.HTTP协议的解析

2.1 HTTP的介绍

什么是HTTP呢？我们来看一下维基百科的解释：

超文本传输协议（英语：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议；
HTTP是万维网的数据通信的基础，设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法；
通过HTTP或者HTTPS协议请求的资源由统一资源标识符（Uniform Resource Identifiers，URI）来标识；

HTTP是一个客户端（用户）和服务端（网站）之间请求和响应的标准。

通过使用网页浏览器、网络爬虫或者其它的工具，客户端发起一个HTTP请求到服务器上指定端口（默认端口为80）；

我们称这个客户端为用户代理程序（user agent）；

响应的服务器上存储着一些资源，比如HTML文件和图像。

我们也称这个响应服务器为源服务器（origin server）；

我们网页中的资源通常是被放在Web资源服务器中，由浏览器自动发送HTTP请求来获取、解析、展示的。

目前我们页面中很多数据是动态展示的：

比如页面中的数据展示、搜索数据、表单验证等等，也是通过在JavaScript中发送HTTP请求获取的；

2.2 HTTP的组成

一次HTTP请求主要包括：请求（Request）和响应（Response）(如下图所示)

请求又包含请求行、请求头、请求体 (如下图所示)

响应也包含响应行、响应头、响应体 (如下图所示)

2.3 HTTP的版本

HTTP/0.9

发布于1991年；
只支持GET请求方法获取文本数据，当时主要是为了获取HTML页面内容；

HTTP/1.0

发布于1996年；
支持POST、HEAD等请求方法，支持请求头、响应头等，支持更多种数据类型(不再局限于文本数据) ；
但是浏览器的每次请求都需要与服务器建立一个TCP连接，请求处理完成后立即断开TCP连接，每次建立连接增加了性能损耗；

HTTP/1.1(目前使用最广泛的版本)

发布于1997年；
增加了PUT、DELETE等请求方法；
采用持久连接(Connection: keep-alive)，多个请求可以共用同一个TCP连接；

HTTP/2.0, 2015年

HTTP/3.0, 2018年

2.4 HTTP请求方式

在RFC中定义了一组请求方式，来表示要对给定资源执行的操作：

GET：GET 方法请求一个指定资源的表示形式，使用 GET 的请求应该只被用于获取数据。
HEAD：HEAD 方法请求一个与 GET 请求的响应相同的响应，但没有响应体。

比如在准备下载一个文件前，先获取文件的大小，再决定是否进行下载；
POST：POST 方法用于将实体提交到指定的资源。
PUT：PUT 方法用请求有效载荷（payload）替换目标资源的所有当前表示；
DELETE：DELETE 方法删除指定的资源；
PATCH：PATCH 方法用于对资源应部分修改；
CONNECT：CONNECT 方法建立一个到目标资源标识的服务器的隧道，通常用在代理服务器，网页开发很少用到。
TRACE：TRACE 方法沿着到目标资源的路径执行一个消息环回测试。

在开发中使用最多的是GET、POST请求；

在后续的后台管理项目中，我们也会使用PATCH、DELETE请求；

2.5 HTTP请求头字段

在request对象的header中也包含很多有用的信息，客户端会默认传递过来一些信息(如下) :

content-type: 这次请求携带的数据的类型

application/x-www-form-urlencoded：表示数据被编码成以 ‘&’ 分隔的键 - 值对，同时以 ‘=’ 分隔键和值
application/json：表示是一个json类型；
text/plain：表示是文本类型；
application/xml：表示是xml类型；
multipart/form-data：表示是上传文件；

content-length：文件的大小长度

keep-alive :

http是基于TCP协议的，但是通常在进行一次请求和响应结束后会立刻中断；
在http1.0中，如果想要继续保持连接：
- 浏览器需要在请求头中添加 connection: keep-alive；
- 服务器需要在响应头中添加 connection:keey-alive；
- 当客户端再次放请求时，就会使用同一个连接，直接一方中断连接；
在http1.1中，所有连接默认是 connection: keep-alive的；
- 不同的Web服务器会有不同的保持 keep-alive的时间；
- Node中默认是5s中；

accept-encoding：告知服务器，客户端支持的文件压缩格式，比如js文件可以使用gzip编码，对应 .gz文件；

accept：告知服务器，客户端可接受文件的格式类型；

user-agent：客户端相关的信息；

2.6 HTTP响应状态码

Http状态码（Http Status Code）是用来表示Http响应状态的数字代码：

Http状态码非常多，可以根据不同的情况，给客户端返回不同的状态码；

常见HTTP状态码	状态描述	信息说明
200	OK	客户端请求成功
201	Created	POST请求，创建新的资源
301	Moved Permanently	请求资源的URL已经修改，响应中会给出新的URL
400	Bad Request	客户端的错误，服务器无法或者不进行处理
401	Unauthorized	未授权的错误，必须携带请求的身份信息
403	Forbidden	客户端没有权限访问，被拒接
404	Not Found	服务器找不到请求的资源。
500	Internal Server Error	服务器遇到了不知道如何处理的情况。
503	Service Unavailable	服务器不可用，可能处理维护或者重载状态，暂时无法访问

更多响应码介绍在MDN文档上, 链接给到大家: MDN上响应码文档: https://developer.mozilla.org/zh-CN/docs/web/http/status

2.7 HTTP响应头

响应的header中包括一些服务器给客户端的信息：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L3n6aQgp-1657070357626)(img/Snipaste_2022-07-05_11-06-57.png)]

3.AJAX网络请求

3.1 AJAX发送请求

AJAX 是异步的 JavaScript 和 XML（Asynchronous JavaScript And XML）

它可以使用 JSON，XML，HTML 和 text 文本等格式发送和接收数据；

如何来完成AJAX请求呢？

第一步：创建网络请求的AJAX对象（使用XMLHttpRequest）
第二步：监听XMLHttpRequest对象状态的变化，或者监听onload事件（请求完成时触发）；
第三步：配置网络请求（通过open方法）, open方法可以传入两个参数；

参数一: method(请求的方式: get, post …)

参数二: url(请求的地址)
第四步：发送send网络请求；

【演示代码】

// 1.创建网络请求对象
const xhr = new XMLHttpRequest()// 2.监听对象状态的变化
xhr.addEventListener("readystatechange", function() {// 拿到网络请求的结果console.log(xhr.response)
})// 3.配置网络请求
// 参数一: 请求的方式; 参数二: 要请求的url地址
xhr.open("get", "http://192.168.0.110:1888")// 4.发生网络请求
xhr.send()

发送同步请求：

我们发送网络请求, 默认是异步的, 但是我们也可以发送同步的网络请求
我们是需要将open的第三个参数设置为false (默认时true), 就可以开启同步的请求
当然我们实际开发还是用异步的请求

// 开启同步
xhr.open("get", "http://192.168.0.110:1888", false)

3.2 XHR的状态

事实上，我们在一次网络请求中看到状态发生了很多次变化，这是因为对于一次请求来说包括如下的状态:

值	状态	描述
0	UNSENT	代理被创建，但尚未调用 open() 方法。
1	OPENED	open() 方法已经被调用。
2	HEADERS_RECEIVED	send() 方法已经被调用，并且头部和状态已经可获得。
3	LOADING	下载中；responseText 属性已经包含部分数据。
4	DONE	下载操作已完成。

状态0我们是监听不到的

例如: 我们想要获取结果, 应该在下载操作已完成后获取

// 1.创建网络请求对象
const xhr = new XMLHttpRequest()// 2.监听对象状态的变化
xhr.addEventListener("readystatechange", function() {// 状态不为4的话直接returnif (xhr.readyState !== XMLHttpRequest.DONE) return// 拿到的结果是一个字符串, 我们可以转成js对象const resJSON = JSON.parse(xhr.response)console.log(resJSON)
})// 3.配置网络请求
// 参数一: 请求的方式; 参数二: 要请求的url地址
xhr.open("get", "http://192.168.0.110:1888")// 4.发生网络请求
xhr.send()

注意<：这个状态并非是HTTP的响应状态，而是记录的XMLHttpRequest对象的状态变化。

http响应状态通过status获取；

3.3 XHR其他事件监听

我们除了可以监听readystatechange之外, 还有其他的事件可以监听

loadstart：请求开始。
progress：一个响应数据包到达，此时整个 response body 都在 response 中。
abort：调用 xhr.abort() 取消了请求。
error：发生连接错误，例如，域错误。不会发生诸如 404 这类的 HTTP 错误。
load：请求成功完成。
timeout：由于请求超时而取消了该请求（仅发生在设置了 timeout 的情况下）。
loadend：在 load，error，timeout 或 abort 之后触发。

我们也可以在load中获取请求数据：

// 在load中获取请求结果
xhr.addEventListener("load", function() {console.log(xhr.response)
})

3.4 响应数据和响应类型

发送了请求后，我们需要获取对应的结果：response属性

XMLHttpRequest response 属性返回响应的正文内容；
返回的类型取决于responseType的属性设置

通过responseType可以设置获取数据的类型

如果将 responseType 的值设置为空字符串，则会使用 text 作为默认值。
设置数据类型, 一般在监听事件之后, 且在send方法之前

const xhr = new XMLHttpRequest()xhr.addEventListener("load", function() {console.log(xhr.response)
})// 由于responseType默认值为test, 因此我们拿到的结果是一个字符串
// 告知xhr获取的数据为json类型
xhr.responseType = "json"// json类型接口
xhr.open("get", "http://123.207.32.32:8000/home/multidata")xhr.send()

和responseText、responseXML的区别：

早期通常服务器返回的数据是普通的文本和XML，所以我们通常会通过responseText、 responseXML来获取响应结果 , 之后将它们转化成JavaScript对象形式；
目前服务器基本返回的都是json数据，直接设置为json即可；

3.5 HTTP的响应状态

前面我们提到, XMLHttpRequest的state是用于记录xhr对象本身的状态变化，并非针对于HTTP的网络请求状态。

如果我们希望获取HTTP响应的网络状态，可以通过status和statusText来获取：

status是获取状态码
statusText是获取状态描述

const xhr = new XMLHttpRequest()xhr.addEventListener("load", function() {console.log(xhr.response)// 1.获取状态码console.log(xhr.status) // 200// 2.获取状态描述console.log(xhr.statusText) // OK
})xhr.responseType = "json"xhr.open("get", "http://123.207.32.32:8000/home/multidata")xhr.send()

我们写一个不存在的接口, 测试一下状态码和状态描述

const xhr = new XMLHttpRequest()xhr.addEventListener("load", function() {console.log(xhr.response) // null// 1.获取状态码console.log(xhr.status) // 404// 2.获取状态描述console.log(xhr.statusText) // Not Found
})xhr.responseType = "json"xhr.open("get", "http://123.207.32.32:8000/aaa/bbb/ccc")xhr.send()

大家可以再看看刚刚的常用状态码表格

常见HTTP状态码	状态描述	信息说明
200	OK	客户端请求成功
201	Created	POST请求，创建新的资源
301	Moved Permanently	请求资源的URL已经修改，响应中会给出新的URL
400	Bad Request	客户端的错误，服务器无法或者不进行处理
401	Unauthorized	未授权的错误，必须携带请求的身份信息
403	Forbidden	客户端没有权限访问，被拒接
404	Not Found	服务器找不到请求的资源。
500	Internal Server Error	服务器遇到了不知道如何处理的情况。
503	Service Unavailable	服务器不可用，可能处理维护或者重载状态，暂时无法访问

3.7 GET/POST传递参数

在开发中，我们使用最多的是GET和POST请求，在发送请求的过程中，我们也可以传递给服务器数据。

常见的传递给服务器数据的方式有如下几种 :

方式一：GET请求的query参数(常用)

const xhr = new XMLHttpRequest()xhr.addEventListener("load", function() {// 传入的参数服务器会返回console.log(xhr.response)
})xhr.responseType = "json"// 在传入的url输入查询字符串传递参数
xhr.open("get", "http://123.207.32.32:1888/02_param/get?name=kaisa&age=18&address=成都市"
)xhr.send()

请求结果

方式二：POST请求 x-www-form-urlencoded 格式

const xhr = new XMLHttpRequest()xhr.addEventListener("load", function() {console.log(xhr.response)
})xhr.responseType = "json"// 1.发送post请求
xhr.open("post", "http://123.207.32.32:1888/02_param/posturl")// 2.告知服务器要发送数据的格式
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
// 3.在请求体中传入参数
xhr.send("name=kaisa&age=18&address=成都市")

请求结果

方式三：POST请求 FormData 格式

方式四：POST请求 JSON 格式(常用)

const xhr = new XMLHttpRequest()xhr.addEventListener("load", function() {console.log(xhr.response)
})xhr.responseType = "json"// 1.发送post请求
xhr.open("post", "http://123.207.32.32:1888/02_param/posturl")// 2.告知服务器要发送数据的格式
xhr.setRequestHeader("Content-type", "application/json")// 3.发送JSON格式的字符串
xhr.send(JSON.stringify({ name: "kaisa", age: 18, height: 1.88 }))

请求结果

4.AJAX网络请求封装

在实际开发中, 我们并不会自己封装AJAX, 而是直接使用axios库, 再对axios库进行二次封装

我们封装AJAX原因是借此练习一下前面所学的知识

由于我们每次使用网络请求, 都写写很多行同样的代码, 使用起来是非常不方便的, 我们封装的目的就是为了使用起来更方便

封装步骤的解释写在代码注释里面, 源代码和测试代码给大家

// 定义一个函数封装ajax,
// 由于使用参数可能会传很多个, 因此我们可以让使用者传入一个对象
function myajax({url,method = "get",date = {},success,failure
} = {}) {// 1.创建对象const xhr = new XMLHttpRequest()// 2.监听数据xhr.onload = function() {// 用响应码判断是否成功if (xhr.status >= 200 && xhr.status < 300) {success && success(xhr.response)} else {failure && failure({ status: xhr.status, message: xhr.statusText })}}// 3.设置响应类型xhr.responseType = "json"// 考虑get请求放在date对象中的情况单独处理if (method.toUpperCase() === "GET") {const urlStrings = []for (key in date) {urlStrings.push(`${key}=${date[key]}`)}url = url + "?" + urlStrings.join("&")xhr.open(method, url)xhr.send()} else {// 4.open方法xhr.open(method, url)// 5.send方法xhr.setRequestHeader("Content-type", "application/json")xhr.send(JSON.stringify(date))}
}// 测试get请求
myajax({url: "http://123.207.32.32:1888/02_param/get",date: {name: "get",age: 18},// 传入一个请求成功的回调success: function(res) {console.log(res)},// 传入失败的回调failure: function(err) {console.log("err", err)}
})// 测试post请求
myajax({url: "http://123.207.32.32:1888/02_param/posturl",method: "post",// 传入一个请求成功的回调success: function(res) {console.log(res)},date: {name: "post",age: 18},// 传入失败的回调failure: function(err) {console.log("err", err)}
})

我们对上面的基本封装做一点优化, 为了防止回调地狱的情况出现, 我们可以返回一个promise, 并且不需要再传入成功的回调和失败的回调, 因为promise中有

function myajax({url,method = "get",date = {}
} = {}) {// 返回一个promisereturn new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()    xhr.onload = function() {if (xhr.status >= 200 && xhr.status < 300) {// 使用resolve成功的回调resolve(xhr.response)} else {// 使用reject失败的回调reject({ status: xhr.status, message: xhr.statusText })}}   xhr.responseType = "json"   if (method.toUpperCase() === "GET") {const urlStrings = []for (key in date) {urlStrings.push(`${key}=${date[key]}`)}url = url + "?" + urlStrings.join("&")    xhr.open(method, url)xhr.send()} else {xhr.open(method, url)   xhr.setRequestHeader("Content-type", "application/json")xhr.send(JSON.stringify(date))}})
}// 测试get请求
myajax({url: "http://123.207.32.32:1888/02_param/get",date: {name: "get",age: 18}
// then中成功的结果
}).then(res => {console.log(res)
// catch中失败的结果
}).catch(err => {console.log(err)
})// 测试post请求
myajax({url: "http://123.207.32.32:1888/02_param/posturl",method: "post",date: {name: "post",age: 18}
// then中成功的结果
}).then(res => {console.log(res)
// catch中失败的结果
}).catch(err => {console.log(err)
})

补充: 过期时间和取消请求

下面我用的是一个延时的接口

过期时间

在网络请求的过程中，为了避免过长的时间服务器无法返回数据，通常我们会为请求设置一个超时时间：timeout。

当达到超时时间后依然没有获取到数据，那么这个请求会自动被取消掉；
默认值为0，表示没有设置超时时间；

下面写个案例, 如果超过3000毫秒没有请求到数据就取消本次网络请求

请求超时可以在timeout中监听

const xhr = new XMLHttpRequest()xhr.addEventListener("load", function() {console.log(xhr.response)
})// 请求超时可以在timeout中监听
xhr.addEventListener("timeout", function() {console.log("请求超时")
})xhr.responseType = "json"xhr.timeout = 3000xhr.open("get", "http://123.207.32.32:1888/01_basic/timeout")xhr.send()

取消请求

取消网络请求, 我们也可以通过abort方法强制 (手动) 取消请求；

请求取消可以在abort中监听


<button>取消请求</button><script>const xhr = new XMLHttpRequest()  xhr.addEventListener("load", function() {console.log(xhr.response)})  // 请求取消可以在abort中监听xhr.addEventListener("abort", function() {console.log("请求已取消")})  xhr.responseType = "json" xhr.timeout = 3000  xhr.open("get", "http://123.207.32.32:1888/01_basic/timeout") xhr.send()  // 监听按钮点击取消请求const btnEl = document.querySelector("button")btnEl.onclick = function() {xhr.abort()}
</script>

5.Fetch使用和上传文件

5.1 Fetch基本使用

Fetch可以看做是早期的XMLHttpRequest的替代方案，它提供了一种更加现代的处理方案：

比如返回值是一个Promise，提供了一种更加优雅的处理结果方式

在请求发送成功时，调用resolve回调then；
在请求发送失败时，调用reject回调catch；

比如不像XMLHttpRequest一样，所有的操作都在一个对象上

fetch函数的使用：

fetch(input[, init])

input：定义要获取的资源地址，可以是一个URL字符串，也可以使用一个Request对象（实验性特性）类型；

init：其他初始化参数, 是一个对象

method: 请求使用的方法，如 GET、POST；
headers: 请求的头信息；
body: 请求的 body 信息；

【演示代码】

发送一个get请求(先了解一下马上会详细分析)

fetch("http://123.207.32.32:8000/home/multidata").then(res => {// 获取具体的结果还需调用一次// 如果是文本就res.text, 其他的同样的道理res.json().then(res => {console.log(res)})
}).catch(err => {console.log(err)
})

5.2 Fetch数据的响应

Fetch的数据响应主要分为两个阶段 :

阶段一：当服务器返回了响应（response）

fetch 返回的 promise 就使用内建的 Response class 对象来对响应头进行解析；
在这个阶段，我们可以通过检查响应头，来检查 HTTP 状态以确定请求是否成功；
如果 fetch 无法建立一个 HTTP 请求，例如网络问题，亦或是请求的网址不存在，那么 promise 就会 reject；
异常的 HTTP 状态，例如 404 或 500，不会导致出现 error；

我们可以在 response 的属性中看到 HTTP 状态：

status：HTTP 状态码，例如 200；
ok：布尔值，如果 HTTP 状态码为 200-299，则为 true；

fetch("http://123.207.32.32:8000/home/multidata").then(res => {// response中查看状态码, 状态描述console.log(res.status) // 200console.log(res.statusText) // OKconsole.log(res.ok) // true}).catch(err => {console.log(err)
})

第二阶段，为了获取 response body，我们需要使用一个其他的方法调用, 这个方法同样返回Promise。

response.text() —— 读取 response，并以文本形式返回 response；
response.json() —— 将 response 解析为 JSON；

fetch("http://123.207.32.32:8000/home/multidata").then(res => {// 第二阶段, 同样返回Promiseres.json().then(res => {// 拿到最终结果console.log(res)})}).catch(err => {console.log(err)
})

5.3 Fetch网络请求的演练

基于Promise的使用方案：

fetch("http://123.207.32.32:8000/home/multidata").then(res => {// 获取具体的结果还需调用一次// 如果是文本就res.text, 其他的同样的道理return res.json()
}).then(res => {console.log(res)
}).catch(err => {console.log(err)
})

基于async、await的使用方案：

async function getDate() {const response1 = await fetch("http://123.207.32.32:8000/home/multidata")const response2 = await response1.json()// 打印结果console.log(response2)
}getDate()

5.4 Fetch POST请求

创建一个 POST 请求，或者其他方法的请求，我们需要使用 fetch 选项：

method：HTTP 方法，例如 POST，

body：request body，其中之一：

字符串（例如 JSON 编码的），
FormData 对象，以 multipart/form-data 形式发送数据，

async function getDate() {// post请求需要在fetch方法中传入第二个参数const response1 = await fetch("http://123.207.32.32:1888/02_param/postjson",{method: "post",headers: {"Content-type": "application/json"},// 参数防砸body中body: JSON.stringify({username: "aaa",postname: "123456"})})const response2 = await response1.json()// 打印结果console.log(response2)
}getDate()
fetch("http://123.207.32.32:8000/home/multidata")const response2 = await response1.json()// 打印结果console.log(response2)
}getDate()

5.4 Fetch POST请求

创建一个 POST 请求，或者其他方法的请求，我们需要使用 fetch 选项：

method：HTTP 方法，例如 POST，

body：request body，其中之一：

字符串（例如 JSON 编码的），
FormData 对象，以 multipart/form-data 形式发送数据，

async function getDate() {// post请求需要在fetch方法中传入第二个参数const response1 = await fetch("http://123.207.32.32:1888/02_param/postjson",{method: "post",headers: {"Content-type": "application/json"},// 参数防砸body中body: JSON.stringify({username: "aaa",postname: "123456"})})const response2 = await response1.json()// 打印结果console.log(response2)
}getDate()