前后端分离的优势
早期的网页都是通过后端渲染来完成的：服务器端渲染（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的版本
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 Request Header
响应的header中包括一些服务器给客户端的信息：
Chrome安装插件 - FeHelper
为了之后查看数据更加的便捷、优雅，我们安装一个Chrome插件：
- 方式一：可以直接通过Chrome的扩展商店安装；
- 方式二：手动安装
AJAX发送请求
AJAX 是异步的 JavaScript 和 XML（Asynchronous JavaScript And XML）
- 它可以使用 JSON，XML，HTML 和 text 文本等格式发送和接收数据；
如何来完成AJAX请求呢？
- 第一步：创建网络请求的AJAX对象（使用XMLHttpRequest）
- 第二步：监听XMLHttpRequest对象状态的变化，或者监听onload事件（请求完成时触发）；
- 第三步：配置网络请求（通过open方法）；
- 第四步：发送send网络请求；
// 1.创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 2.监听状态的改变(宏任务)
xhr.onreadystatechange = function () {
if (xhr.readyState !== XMLHttpRequest.DONE) return;
// 将字符串转成JSON对象(js对象)
const resJSON = JSON.parse(xhr.response);
const banners = resJSON.data.banner;
console.log(banners.list);
};
// 3.配置请求
/*
参数
method: 请求的方式(get/post/delete/put/patch...)
*/
xhr.open("get", "http://123.207.32.32:8000/home/multidata");
// 4.发送请求(浏览器帮助发送对应的请求)
xhr.send();
XMLHttpRequest的state（状态）
事实上，我们在一次网络请求中看到状态发生了很多次变化，这是因为对于一次请求来说包括如下的状态：
注意：这个状态并非是HTTP的响应状态，而是记录的XMLHttpRequest对象的状态变化。
- http响应状态通过status获取；
发送同步请求：
- 将open的第三个参数设置为false
// 1.创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 2.监听状态的改变(宏任务)
// 监听四种状态
/* xhr.onreadystatechange = function () {
// 1.如果状态不是DONE状态,直接返回
if (xhr.readyState !== XMLHttpRequest.DONE) return;
// 2.确定拿到了数据
console.log(xhr.response);
}; */
// 3.配置请求
/*
参数
method: 请求的方式(get/post/delete/put/patch...)
async: true/false
*/
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("---------");
XMLHttpRequest其他事件监听
除了onreadystatechange还有其他的事件可以监听
- loadstart：请求开始。
- progress： 一个响应数据包到达，此时整个 response body 都在 response 中。
- abort：调用 xhr.abort() 取消了请求。
- error：发生连接错误，例如，域错误。不会发生诸如 404 这类的 HTTP 错误。
- load：请求成功完成。
- timeout：由于请求超时而取消了该请求（仅发生在设置了 timeout 的情况下）。
- loadend：在 load，error，timeout 或 abort 之后触发。
我们也可以使用load来获取数据：
const xhr = new XMLHttpRequest();
// onload监听数据加载完成
xhr.onload = function () {
console.log('onload')
};
xhr.open("get","http://123.207.32.32:8000/home/multidata");
xhr.send();
响应数据和响应类型
发送了请求后，我们需要获取对应的结果：response属性
- XMLHttpRequest response 属性返回响应的正文内容；
- 返回的类型取决于responseType的属性设置；
通过responseType可以设置获取数据的类型
- 如果将 responseType 的值设置为空字符串，则会使用 text 作为默认值。
和responseText、responseXML的区别：
- 早期通常服务器返回的数据是普通的文本和XML，所以我们通常会通过responseText、 responseXML来获取响应结果；
- 之后将它们转化成JavaScript对象形式；
- 目前服务器基本返回的都是json数据，直接设置为json即可；
// 1.
const xhr = new XMLHttpRequest();
// 2.onload监听数据加载完成
xhr.onload = function () {
// const resJSON = JSON.parse(xhr.response)
console.log(xhr.response);
console.log(xhr.responseText);
console.log(xhr.responseXML);
};
// 3.告诉xhr获取到的数据是什么类型
// xhr.responseType = "json";
xhr.responseType = "xml";
// 4.配置网络请求
// 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 text 类型的接口
xhr.open("get", "http://123.207.32.32:1888/01_basic/hello_xml");
// 5.发送网络请求
xhr.send();
HTTP响应的状态status
XMLHttpRequest的state是用于记录xhr对象本身的状态变化，并非针对于HTTP的网络请求状态。
如果我们希望获取HTTP响应的网络状态，可以通过status和statusText来获取
// 1.创建对象
const xhr = new XMLHttpRequest();
// 2.onload监听数据加载完成
xhr.onload = function () {
// 根据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获取到的数据是什么类型
xhr.responseType = "json";
// 4.配置网络请求
// xhr.open("get", "http://123.207.32.32:8000/home/multidata1");
xhr.open("get", "http://123.207.32.32:8000/home/multidata");
// 5.发送网络请求
xhr.send();
GET/POST请求传递参数
在开发中，我们使用最多的是GET和POST请求，在发送请求的过程中，我们也可以传递给服务器数据。
常见的传递给服务器数据的方式有如下几种：
- 方式一：GET请求的query参数
- 方式二：POST请求 x-www-form-urlencoded 格式
- 方式三：POST请求 FormData 格式
- 方式四：POST请求 JSON 格式
<form action="" method="post" class="info">
<input type="text" name="username" />
<input type="password" name="password" />
</form>
<button class="btn" type="submit">发送请求</button>
<script>
const formEl = document.querySelector(".info");
const sendBtn = document.querySelector(".btn");
sendBtn.onclick = function () {
// 1.创建对象
const xhr = new XMLHttpRequest();
// 2.onload监听数据加载完成
xhr.onload = function () {
// 根据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获取到的数据是什么类型
xhr.responseType = "json";
// 4.配置网络请求
// 传递参数的方式一: get => query
/* xhr.open(
"get",
"http://123.207.32.32:1888/02_param/get?name=what&age=27&address=广州市"
); */
// 2.传递方式二: post => urlencoded
// xhr.open("post", "http://123.207.32.32:1888/02_param/posturl");
/*
xhr.setRequestHeader(
"Content-type",
"application/x-www-form-urlencoded"
);
xhr.send("name=what&age=27&address=广州市");
*/
// 3.传递方式三: post => formData
/* xhr.open("post", "http://123.207.32.32:1888/02_param/postform");
// formElement对象转成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({ ame: "what", age: "27", address: "广州市" }));
};
ajax网络请求封装
回调函数实现
function rAjax({
url,
method = "get",
data = {},
headers: {}, // token
success,
failure,
} = {}) {
// 1.创建对象
const xhr = new XMLHttpRequest();
// 2.onload监听数据加载完成
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获取到的数据是什么类型
xhr.responseType = "json";
// 4.配置网络请求
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);
// 5.发起请求
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(JSON.stringify(data));
}
}
// 调用
rAjax({
url: "http://123.207.32.32:1888/02_param/get",
data: {
name: what,
age: 19,
height: 1.74,
},
success: function (res) {
console.log("res:", res);
},
failure: function (res) {
console.log("res:", res);
},
});
/* rAjax({
url: "http://123.207.32.32:1888/02_param/postjson",
method: "post",
data: {
name: "jsonData",
length: "1000",
},
success: function (res) {
console.log("res:", res);
},
failure: function (err) {
console.log(err.message);
},
}); */
Promise版本
function rAjax({
url,
method = "get",
data = {},
headers = {}, // token
} = {}) {
return new Promise((resolve, reject) => {
// 1.创建对象
const xhr = new XMLHttpRequest();
// 2.onload监听数据加载完成
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response);
} else {
reject({ status: xhr.status, message: xhr.statusText });
}
};
// 3.告诉xhr获取到的数据是什么类型
xhr.responseType = "json";
// 4.配置网络请求
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);
// 5.发起请求
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(JSON.stringify(data));
}
})
}
延迟时间timeout和取消请求
在网络请求的过程中，为了避免过长的时间服务器无法返回数据，通常我们会为请求设置一个超时时间：timeout。
- 当达到超时时间后依然没有获取到数据，那么这个请求会自动被取消掉；
- 默认值为0，表示没有设置超时时间；
我们也可以通过abort方法强制取消请求；
<button>取消请求</button>
<script>
const xhr = new XMLHttpRequest();
xhr.onload = function () {
console.log(xhr.response);
};
xhr.ontimeout = function () {
console.log("请求过期");
};
xhr.onabort = function () {
console.log("请求取消");
};
xhr.responseType = "json";
// timeout: 浏览器达到了过期时间还没有获取到结果时,取消本次请求
xhr.timeout = 3000;
xhr.open("get", "http://123.207.32.32:1888/01_basic/timeout");
xhr.send();
// 手动取消
const cancelEl = document.querySelector("button");
cancelEl.onclick = function () {
xhr.abort();
};
认识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 形式发送数据
// 1.fetch发送get请求
/* fetch("http://123.207.32.32:8000/home/multidata")
.then((response) => {
// 1.获取到response
console.log("response", response);
// 2.获取到具体的结果
response.json().then((res) => {
console.log("res", res);
});
})
.catch((err) => {
console.log("err", err);
}); */
// 优化方式一
/* fetch("http://123.207.32.32:8000/home/multidata")
.then((response) => {
// 1.获取到response
console.log("response", response);
// 2.获取到具体的结果
return response.json();
})
.then((res) => {
console.log("res:", res);
})
.catch((err) => {
console.log("err", err);
}); */
// 优化方式二
/* 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", "what");
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();
XMLHttpRequest文件上传
文件上传是开发中经常遇到的需求，比如头像上传、照片等。
- 要想真正理解文件上传，必须了解服务器如何处理上传的文件信息；
<input class="file" type="file" />
<button class="upload">上传文件</button>
<script>
const uploadEl = document.querySelector(".upload");
uploadEl.onclick = function () {
// 1.创建对象
const xhr = new XMLHttpRequest();
// 2.监听对象
xhr.onload = function () {
console.log(xhr.response);
};
xhr.responseType = "json";
xhr.open("POST", "http://123.207.32.32:1888/02_param/upload");
xhr.setRequestHeader('Content-type','multipart/form-data')
const fileEl = document.querySelector(".file");
const file = fileEl.files[0];
const formData = new FormData();
formData.append("avatar", file);
xhr.send(formData);
};
Fetch文件上传
Fetch也支持文件上传，但是Fetch没办法监听进度。
<input class="file" type="file" />
<button class="upload">上传文件</button>
<script>
const uploadEl = document.querySelector(".upload");
uploadEl.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);
};
Q.E.D.