Appearance
前后端分离的优势
早期的网页都是通过后端渲染来完成的：服务器端渲染（SSR，server side render）：
客户端发出请求 -> 服务端接收请求并返回相应 HTML 文档 -> 页面刷新，客户端加载新的 HTML 文档；
服务器端渲染的缺点：
当用户点击页面中的某个按钮向服务器发送请求时，页面本质上只是一些数据发生了变化，而此时服务器却要将重绘的整个页面再返
回给浏览器加载，这显然有悖于程序员的“DRY（ Don‘t repeat yourself ）”原则；
而且明明只是一些数据的变化却迫使服务器要返回整个 HTML 文档，这本身也会给网络带宽带来不必要的开销
有没有办法在页面数据变动时，只向服务器请求新的数据，并且在阻止页面刷新的情况下，动态的替换页面中展示的数据呢？
答案正是“AJAX”。
AJAX 是“Asynchronous JavaScript And XML”的缩写(异步的 JavaScript 和 XML)，是一种实现无页面刷新 获取服务器数据的技术。
AJAX 最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。
你可以使用 AJAX 最主要的两个特性做下列事：
在不重新加载页面的情况下发送请求给服务器；
接受并使用从服务器发来的数据。
网页的渲染过程 – 服务器端渲染
网页的渲染过程 – 前后端分离
什么是 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 请求获取的；
HTTP 的组成
一次 HTTP 请求主要包括：请求（Request）和响应（Response）
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 连接；
2015 年，HTTP/2.0
2018 年，HTTP/3.0
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 请求；
HTTP Request Header（一）
在 request 对象的 header 中也包含很多有用的信息，客户端会默认传递过来一些信息：
content-type 是这次请求携带的数据的类型：
application/x-www-form-urlencoded：表示数据被编码成以 '&' 分隔的键 - 值对，同时以 '=' 分隔键和值
application/json：表示是一个 json 类型；
text/plain：表示是文本类型；
application/xml：表示是 xml 类型；
multipart/form-data：表示是上传文件；
HTTP Request Header（二）
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：客户端相关的信息；
HTTP Response 响应状态码
Http 状态码（Http Status Code）是用来表示 Http 响应状态的数字代码：
Http 状态码非常多，可以根据不同的情况，给客户端返回不同的状态码；
MDN 响应码解析地址：https://developer.mozilla.org/zh-CN/docs/web/http/status
HTTP Response Header
响应的 header 中包括一些服务器给客户端的信息：
Chrome 安装插件 - FeHelper
为了之后查看数据更加的便捷、优雅，我们安装一个 Chrome 插件：
方式一：可以直接通过 Chrome 的扩展商店安装；
方式二：手动安装
下载地址：https://github.com/zxlie/FeHelper/tree/master/apps/static/screenshot/crx
使用这个插件之后，浏览器地址打开一个服务端返回的数据会进行格式化
将下载下来的 crx 拖到 chrome://extensions/这里面，如果不能拖进去怎么办？
将下载下来的 crx 后缀名改成 rar，然后进行解压，再将解压后的文件夹拖进去即可
AJAX 发送请求
AJAX 是异步的 JavaScript 和 XML（Asynchronous JavaScript And XML）
它可以使用 JSON，XML，HTML 和 text 文本等格式发送和接收数据；
如何来完成 AJAX 请求呢？
第一步：创建网络请求的 AJAX 对象（使用 XMLHttpRequest）
第二步：监听 XMLHttpRequest 对象状态的变化，或者监听 onload 事件（请求完成时触发）；
第三步：配置网络请求（通过 open 方法）；
第四步：发送 send 网络请求；
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// 1.创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 2.监听状态的改变(宏任务)
xhr.onreadystatechange = function () {
// console.log(xhr.response)
if (xhr.readyState !== XMLHttpRequest.DONE) return;
// 将字符串转成JSON对象(js对象)
const resJSON = JSON.parse(xhr.response);
const banners = resJSON.data.banner.list;
console.log(banners);
};
// 3.配置请求open
// method: 请求的方式(get/post/delete/put/patch...)
// url: 请求的地址
xhr.open("get", "http://123.207.32.32:8000/home/multidata");
// 4.发送请求(浏览器帮助发送对应请求)
xhr.send();
</script>
</body>
</html>XMLHttpRequest 的 state（状态）
事实上，我们在一次网络请求中看到状态发生了很多次变化，这是因为对于一次请求来说包括如下的状态：
注意：这个状态并非是 HTTP 的相应状态，而是记录的 XMLHttpRequest 对象的状态变化。
http 响应状态通过 status 获取；
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// 1.创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 2.监听状态的改变(宏任务)
// 监听四种状态
xhr.onreadystatechange = function () {
// 1.如果状态不是DONE状态, 直接返回
if (xhr.readyState !== XMLHttpRequest.DONE) return;
// 2.确定拿到了数据
console.log(xhr.response);
};
// 3.配置请求open
xhr.open("get", "http://123.207.32.32:8000/home/multidata");
// 4.发送请求(浏览器帮助发送对应请求)
xhr.send();
</script>
</body>
</html>发送同步请求：
将 open 的第三个参数设置为 false
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.创建XMLHttpRequest对象
const xhr = new XMLHttpRequest()
// 2.监听状态的改变(宏任务)
// 监听四种状态
// xhr.onreadystatechange = function() {
// // 1.如果状态不是DONE状态, 直接返回
// if (xhr.readyState !== XMLHttpRequest.DONE) return
// // 2.确定拿到了数据
// console.log(xhr.response)
// }
// 3.配置请求open
// async: false
// 实际开发中要使用异步请求, 异步请求不会阻塞js代码继续执行
xhr.open("get", "http://123.207.32.32:8000/home/multidata", false) // 同步请求
// 4.发送请求(浏览器帮助发送对应请求)
xhr.send()
// 5.同步必须等到有结果后, 才会继续执行
console.log(xhr.response)
console.log("------")
console.log("++++++")
console.log("******")
</script>
<h2>script后续的h2元素</h2>
</body>
</html>XMLHttpRequest 其他事件监听
除了 onreadystatechange 还有其他的事件可以监听
loadstart：请求开始。
progress： 一个响应数据包到达，此时整个 response body 都在 response 中。
abort：调用 xhr.abort() 取消了请求。
error：发生连接错误，例如，域错误。不会发生诸如 404 这类的 HTTP 错误。
load：请求成功完成。
timeout：由于请求超时而取消了该请求（仅发生在设置了 timeout 的情况下）。
loadend：在 load，error，timeout 或 abort 之后触发。
我们也可以使用 load 来获取数据：
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const xhr = new XMLHttpRequest()
// onload监听数据加载完成
xhr.onload = function() {
console.log("onload") // onload只会调用一次，而onreadeystatechange会调用多次
}
xhr.open("get", "http://123.207.32.32:8000/home/multidata")
xhr.send()
</script>
</body>
</html>响应数据和响应类型
发送了请求后，我们需要获取对应的结果：response 属性
XMLHttpRequest response 属性返回响应的正文内容；
返回的类型取决于 responseType 的属性设置；
通过 responseType 可以设置获取数据的类型
如果将 responseType 的值设置为空字符串，则会使用 text 作为默认值。
和 responseText、responseXML 的区别：
早期通常服务器返回的数据是普通的文本和 XML，所以我们通常会通过 responseText、 responseXML 来获取响应结果；
之后将它们转化成 JavaScript 对象形式；
目前服务器基本返回的都是 json 数据，直接设置为 json 即可；
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// 1.
const xhr = new XMLHttpRequest();
// 2.onload监听数据加载完成
xhr.onload = function () {
// const resJSON = JSON.parse(xhr.response)
console.log(xhr.response); // 如果返回的是json类型的数据，设置responseType为json，就可以不需要JSON.parse
// console.log(xhr.responseText)
// console.log(xhr.responseXML)
};
// 3.告知xhr获取到的数据的类型
xhr.responseType = "json";
// xhr.responseType = "xml"
// 4.配置网络请求
// 4.1.json类型的接口
xhr.open("get", "http://123.207.32.32:8000/home/multidata");
// 4.2.json类型的接口
// xhr.open("get", "http://123.207.32.32:1888/01_basic/hello_json")
// 4.3.text类型的接口
// xhr.open("get", "http://123.207.32.32:1888/01_basic/hello_text")
// 4.4.xml类型的接口
// xhr.open("get", "http://123.207.32.32:1888/01_basic/hello_xml")
// 5.发送网络请求
xhr.send();
</script>
</body>
</html>HTTP 响应的状态 status
XMLHttpRequest 的 status 是用于记录 xhr 对象本身的状态变化，并非针对于 HTTP 的网络请求状态。
如果我们希望获取 HTTP 响应的网络状态，可以通过 status 和 statusText 来获取：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// 1.创建对象
const xhr = new XMLHttpRequest();
// 2.监听结果
xhr.onload = function () {
console.log(xhr.status, xhr.statusText);
// 根据http的状态码判断是否请求成功
if (xhr.status >= 200 && xhr.status < 300) {
// 请求成功
console.log(xhr.response);
} else {
// 请求失败
console.log(xhr.status, xhr.statusText);
}
};
xhr.onerror = function () {
console.log("onerror", xhr.status, xhr.statusText);
};
// 3.设置响应类型
xhr.responseType = "json";
// 4.配置网络请求
// xhr.open("get", "http://123.207.32.32:8000/abc/cba/aaa")
xhr.open("get", "http://123.207.32.32:8000/home/multidata");
// 5.发送网络请求
xhr.send();
</script>
</body>
</html>GET/POST 请求传递参数
在开发中，我们使用最多的是 GET 和 POST 请求，在发送请求的过程中，我们也可以传递给服务器数据。
常见的传递给服务器数据的方式有如下几种：
方式一：GET 请求的 query 参数
方式二：POST 请求 x-www-form-urlencoded 格式
方式三：POST 请求 FormData 格式
方式四：POST 请求 JSON 格式
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form class="info">
<input type="text" name="username" />
<input type="password" name="password" />
</form>
<button class="send">发送请求</button>
<script>
const formEl = document.querySelector(".info");
const sendBtn = document.querySelector(".send");
sendBtn.onclick = function () {
// 创建xhr对象
const xhr = new XMLHttpRequest();
// 监听数据响应
xhr.onload = function () {
console.log(xhr.response);
};
// 配置请求
xhr.responseType = "json";
// 1.传递参数方式一: get -> query
// xhr.open("get", "http://123.207.32.32:1888/02_param/get?name=why&age=18&address=广州市")
// 2.传递参数方式二: post -> urlencoded
// xhr.open("post", "http://123.207.32.32:1888/02_param/posturl")
// // 发送请求(请求体body)
// xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
// xhr.send("name=why&age=18&address=广州市")
// 3.传递参数方式三: post -> formdata
// xhr.open("post", "http://123.207.32.32:1888/02_param/postform")
// // formElement对象转成FormData对象 这种方式不需要设置Content-type，默认就是FormData
// const formData = new FormData(formEl)
// xhr.send(formData)
// 4.传递参数方式四: post -> json
xhr.open("post", "http://123.207.32.32:1888/02_param/postjson");
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(JSON.stringify({ name: "why", age: 18, height: 1.88 }));
};
</script>
</body>
</html>ajax 网络请求封装
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// 练习hyajax -> axios
function hyajax({
url,
method = "get",
data = {},
headers = {}, // token
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";
// 4.open方法
if (method.toUpperCase() === "GET") {
const queryStrings = [];
for (const key in data) {
queryStrings.push(`${key}=${data[key]}`);
}
url = url + "?" + queryStrings.join("&");
xhr.open(method, url);
xhr.send();
} else {
xhr.open(method, url);
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(JSON.stringify(data));
}
return xhr;
}
// 调用者
hyajax({
url: "http://123.207.32.32:1888/02_param/get",
method: "GET",
data: {
name: "why",
age: 18,
},
success: function (res) {
console.log("res:", res);
},
failure: function (err) {
// alert(err.message)
},
});
// hyajax({
// url: "http://123.207.32.32:1888/02_param/postjson",
// method: "post",
// data: {
// name: "jsondata",
// age: 22
// },
// success: function(res) {
// console.log("res:", res)
// },
// failure: function(err) {
// // alert(err.message)
// }
// })
</script>
</body>
</html>ajax 的文件抽取和 Promise 结果
hyajax.js
javascript
// 练习hyajax -> axios
function hyajax({
url,
method = "get",
data = {},
timeout = 10000,
headers = {}, // token
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";
xhr.timeout = timeout;
// 4.open方法
if (method.toUpperCase() === "GET") {
const queryStrings = [];
for (const key in data) {
queryStrings.push(`${key}=${data[key]}`);
}
url = url + "?" + queryStrings.join("&");
xhr.open(method, url);
xhr.send();
} else {
xhr.open(method, url);
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(JSON.stringify(data));
}
return xhr;
}hyajax_promise.js
javascript
// 练习hyajax -> axios
function hyajax({
url,
method = "get",
data = {},
timeout = 10000,
headers = {}, // token
} = {}) {
// 1.创建对象
const xhr = new XMLHttpRequest();
// 2.创建Promise
const promise = new Promise((resolve, reject) => {
// 2.监听数据
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response);
} else {
reject({ status: xhr.status, message: xhr.statusText });
}
};
// 3.设置类型
xhr.responseType = "json";
xhr.timeout = timeout;
// 4.open方法
if (method.toUpperCase() === "GET") {
const queryStrings = [];
for (const key in data) {
queryStrings.push(`${key}=${data[key]}`);
}
url = url + "?" + queryStrings.join("&");
xhr.open(method, url);
xhr.send();
} else {
xhr.open(method, url);
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(JSON.stringify(data));
}
});
promise.xhr = xhr; // 这里什么设置是为了在外面可以取消请求 promise.xhr.abort()
return promise;
}html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- <script src="./utils/hyajax.js"></script> -->
<script src="./utils/hyajax_promise.js"></script>
<script>
const promise = hyajax({
url: "http://123.207.32.32:1888/02_param/get",
data: {
username: "coderwhy",
password: "123456",
},
});
promise
.then((res) => {
console.log("res:", res);
})
.catch((err) => {
console.log("err:", err);
});
</script>
</body>
</html>延迟时间 timeout 和取消请求
在网络请求的过程中，为了避免过长的时间服务器无法返回数据，通常我们会为请求设置一个超时时间：timeout。
当达到超时时间后依然没有获取到数据，那么这个请求会自动被取消掉；
默认值为 0，表示没有设置超时时间；
我们也可以通过 abort 方法强制取消请求；
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button>取消请求</button>
<script>
const xhr = new XMLHttpRequest();
xhr.onload = function () {
console.log(xhr.response);
};
xhr.onabort = function () {
// 监听取消请求
console.log("请求被取消掉了");
};
xhr.responseType = "json";
// 1.超时时间的设置
xhr.ontimeout = function () {
console.log("请求过期: timeout");
};
// timeout: 浏览器达到过期时间还没有获取到对应的结果时, 取消本次请求
// xhr.timeout = 3000
xhr.open("get", "http://123.207.32.32:1888/01_basic/timeout");
xhr.send();
// 2.手动取消结果
const cancelBtn = document.querySelector("button");
cancelBtn.onclick = function () {
xhr.abort();
};
</script>
</body>
</html>认识 Fetch 和 Fetch API
Fetch 可以看做是早期的 XMLHttpRequest 的替代方案，它提供了一种更加现代的处理方案：
比如返回值是一个 Promise，提供了一种更加优雅的处理结果方式
在请求发送成功时，调用 resolve 回调 then；
在请求发送失败时，调用 reject 回调 catch；
比如不像 XMLHttpRequest 一样，所有的操作都在一个对象上；
fetch 函数的使用：
input：定义要获取的资源地址，可以是一个 URL 字符串，也可以使用一个 Request 对象（实验性特性）类型；
init：其他初始化参数
method: 请求使用的方法，如 GET、POST；
headers: 请求的头信息；
body: 请求的 body 信息；
Fetch 数据的响应（Response）
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；
第二阶段，为了获取 response body，我们需要使用一个其他的方法调用。
response.text() —— 读取 response，并以文本形式返回 response；
response.json() —— 将 response 解析为 JSON；
Fetch 网络请求的演练
基于 Promise 的使用方案：
基于 async、await 的使用方案：
Fetch POST 请求
创建一个 POST 请求，或者其他方法的请求，我们需要使用 fetch 选项：
method：HTTP 方法，例如 POST，
body：request body，其中之一：
字符串（例如 JSON 编码的），
FormData 对象，以 multipart/form-data 形式发送数据，
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// 1.fetch发送get请求
// 1.1.未优化的代码
// fetch("http://123.207.32.32:8000/home/multidata").then(res => {
// // 1.获取到response
// const response = res
// // 2.获取具体的结果
// response.json().then(res => {
// console.log("res:", res)
// })
// }).catch(err => {
// console.log("err:", err)
// })
// 1.2. 优化方式一:
// fetch("http://123.207.32.32:8000/home/multidata").then(res => {
// // 1.获取到response
// const response = res
// // 2.获取具体的结果
// return response.json()
// }).then(res => {
// console.log("res:", res)
// }).catch(err => {
// console.log("err:", err)
// })
// 1.3. 优化方式二:
// async function getData() {
// const response = await fetch("http://123.207.32.32:8000/home/multidata")
// const res = await response.json()
// console.log("res:", res)
// }
// getData()
// 2.post请求并且有参数
async function getData() {
// const response = await fetch("http://123.207.32.32:1888/02_param/postjson", {
// method: "post",
// // headers: {
// // "Content-type": "application/json"
// // },
// body: JSON.stringify({
// name: "why",
// age: 18
// })
// })
const formData = new FormData();
formData.append("name", "why");
formData.append("age", 18);
const response = await fetch(
"http://123.207.32.32:1888/02_param/postform",
{
method: "post",
body: formData,
}
);
// 获取response状态
console.log(response.ok, response.status, response.statusText);
const res = await response.json();
console.log("res:", res);
}
getData();
</script>
</body>
</html>XMLHttpRequest 文件上传
文件上传是开发中经常遇到的需求，比如头像上传、照片等。
要想真正理解文件上传，必须了解服务器如何处理上传的文件信息；
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input class="file" type="file" />
<button class="upload">上传文件</button>
<script>
// xhr/fetch
const uploadBtn = document.querySelector(".upload");
uploadBtn.onclick = function () {
// 1.创建对象
const xhr = new XMLHttpRequest();
// 2.监听结果
xhr.onload = function () {
console.log(xhr.response);
};
xhr.onprogress = function (event) {
console.log(event); // 可以监听进度
};
xhr.responseType = "json";
xhr.open("post", "http://123.207.32.32:1888/02_param/upload");
// 表单
const fileEl = document.querySelector(".file");
const file = fileEl.files[0];
const formData = new FormData();
formData.append("avatar", file);
xhr.send(formData);
};
</script>
</body>
</html>Fetch 文件上传
Fetch 也支持文件上传，但是 Fetch 没办法监听进度。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input class="file" type="file" />
<button class="upload">上传文件</button>
<script>
// xhr/fetch
const uploadBtn = document.querySelector(".upload");
uploadBtn.onclick = async function () {
// 表单
const fileEl = document.querySelector(".file");
const file = fileEl.files[0];
const formData = new FormData();
formData.append("avatar", file);
// 发送fetch请求
const response = await fetch(
"http://123.207.32.32:1888/02_param/upload",
{
method: "post",
body: formData,
}
);
const res = await response.json();
console.log("res:", res);
};
</script>
</body>
</html>