文章目录
- 一、手写ajax请求
-
- [1. get](#1. get)
- [2. post](#2. post)
- [3. xhr.readyState](#3. xhr.readyState)
- [4. xhr.status](#4. xhr.status)
- [5. xhr.open](#5. xhr.open)
- 二、跨域
- 三、cookie、localStorage和sessionStorage
- 四、http
-
- [1. http常见的状态码有哪些](#1. http常见的状态码有哪些)
- [2. http常见的header有哪些](#2. http常见的header有哪些)
- [3. 什么是RestfulAPI](#3. 什么是RestfulAPI)
- [4. 描述一下http的缓存机制](#4. 描述一下http的缓存机制)
- [5. https](#5. https)
一、手写ajax请求
1. get
js
// 1.创建一个XMLHttpRequest对象
let xhr = new XMLHttpRequest();
// 2.设置请求行
xhr.open('get', 'http://localhost:3000/get');
// 3.设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 4.设置请求体
xhr.send(null);
// 5.监听请求状态
xhr.onreadystatechange = function() {
// 6.判断请求状态
if(xhr.readyState === 4 && xhr.status === 200) {
// 7.获取响应体
console.log(xhr.responseText);
}
}2. post
js
// 1.创建一个XMLHttpRequest对象
let xhr = new XMLHttpRequest();
// 2.设置请求行
xhr.open('post', 'http://localhost:3000/post');
// 3.设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 4.设置请求体
xhr.send('name=小明&age=18'); // 这里得传字符串
// 5.监听请求状态
xhr.onreadystatechange = function() {
// 6.判断请求状态
if(xhr.readyState === 4 && xhr.status === 200) {
// 7.获取响应体
console.log(xhr.responseText);
}
}3. xhr.readyState
xhr.readyState 有以下状态值，分别代表的意思如下：
| 状态值 | 意思 |
|---|---|
| 0 | 未初始化，尚未调用open方法 |
| 1 | 启动，已经调用open方法 |
| 2 | 发送，已经调用send方法 |
| 3 | 接收，正在接收响应数据 |
| 4 | 完成，已经接收到全部响应数据 |
请注意，在这个表格中，状态值是从0开始的，0代表xhr对象已经被创建但尚未调用open方法，直到4代表请求已完成且响应数据已接收完毕。
4. xhr.status
http状态码
| 状态码 | 含义 | 说明 |
|---|---|---|
| 200 | OK | 请求成功 |
| 301 | Moved Permanently | 资源被永久移动到新的URL |
| 302 | Found | 资源被临时移动到新的URL |
| 400 | Bad Request | 请求有误，服务器无法处理 |
| 401 | Unauthorized | 请求需要身份验证 |
| 403 | Forbidden | 服务器拒绝该请求 |
| 404 | Not Found | 请求的资源不存在 |
| 500 | Internal Server Error | 服务器遇到错误 |
| 502 | Bad Gateway | 服务器作为网关或代理时收到无效响应 |
| 503 | Service Unavailable | 服务器暂时不可用 |
| 504 | Gateway Timeout | 服务器作为网关或代理时在等待上游服务器响应时超时 |
5. xhr.open
xhr.open方法有三个参数，含义如下：
method：表示HTTP请求的方法，比如GET、POST等。url：表示请求的URL地址。async：表示请求是否为异步，默认为true，即异步请求。
如果第三个参数为true，则表示异步请求，即浏览器不需要等待服务器返回响应即可继续执行后面的代码。如果第三个参数为false，则表示同步请求，即浏览器需要等待服务器返回响应后才能继续执行后面的代码。
二、跨域
大家可以看看这篇什么是跨域(浏览器同源政策)，如何解决跨域
三、cookie、localStorage和sessionStorage
cookie、localStorage和sessionStorage都是用于在浏览器端存储数据的技术。它们的用途、区别和大小如下所示：
| Cookie | localStorage | sessionStorage | |
|---|---|---|---|
| 用途 | 用于在浏览器和服务器之间传递数据，包括会话管理、持久性登录状态等 | 用于在浏览器端存储较大量的数据，包括长期保存的用户配置、个人信息等 | 用于在浏览器端存储临时性的数据，仅在当前会话有效 |
| 存储位置 | 存储在客户端，会自动随HTTP请求发送到服务器 | 存储在客户端，不会自动发送到服务器 | 存储在客户端，不会自动发送到服务器 |
| 大小限制 | 最大可以存储4KB的数据 | 最大可以存储5MB的数据 | 最大可以存储5MB的数据 |
| 生命周期 | 可设置过期时间，可以在浏览器重启后仍然存在 | 除非被手动清除，否则会一直存在 | 仅在当前会话有效，关闭浏览器后会被自动清除 |
| 访问限制 | 对于每个具体的cookie，可以设置访问限制（如域名、路径等） | 仅对于设置localStorage的网页可访问 | 仅对于设置sessionStorage的网页可访问 |
| API | 可以使用document.cookie来读取和写入cookie | 可以使用localStorage对象的方法（如setItem、getItem、removeItem等） | 可以使用sessionStorage对象的方法（如setItem、getItem、removeItem等） |
需要注意的是，每个浏览器对cookie、localStorage和sessionStorage的实现可能会有一些细微的差异，例如存储上限可能会略有不同。上述表格仅提供了一般情况下的常见规范。
四、http
1. http常见的状态码有哪些
http状态码
| 状态码 | 含义 | 说明 |
|---|---|---|
| 200 | OK | 请求成功 |
| 301 | Moved Permanently | 资源被永久移动到新的URL |
| 302 | Found | 资源被临时移动到新的URL |
| 400 | Bad Request | 请求有误，服务器无法处理 |
| 401 | Unauthorized | 请求需要身份验证 |
| 403 | Forbidden | 服务器拒绝该请求 |
| 404 | Not Found | 请求的资源不存在 |
| 500 | Internal Server Error | 服务器遇到错误 |
| 502 | Bad Gateway | 服务器作为网关或代理时收到无效响应 |
| 503 | Service Unavailable | 服务器暂时不可用 |
| 504 | Gateway Timeout | 服务器作为网关或代理时在等待上游服务器响应时超时 |
2. http常见的header有哪些
常见的HTTP请求头（Request Headers）如下所示：
| Header字段 | 说明 |
|---|---|
| Accept | 告诉服务器可以发送的媒体类型 |
| Accept-Charset | 告诉服务器请求的字符集 |
Accept-Encoding |
告诉服务器请求的内容编码方式 gzip |
| Accept-Language | 告诉服务器请求的语言 |
| Authorization | 包含用户凭证的认证信息 |
Cache-Control |
缓存机制指令 |
Connection |
管理持久连接 keep-alive |
Content-Length |
请求体的大小 |
Content-Type |
请求体的媒体类型 |
| Cookie | 之前保存的服务器发送的Cookie |
| Host | 请求的主机名或IP地址 |
| User-Agent | 包含发送请求的用户代理的信息 |
| Referer | 发送请求的页面的URL |
| Origin | 发起一个对跨域资源的请求 |
常见的HTTP响应头（Response Headers）如下所示：
| Header字段 | 说明 |
|---|---|
| Accept-Ranges | 标识服务器是否支持范围请求 |
Cache-Control |
缓存机制指令 |
Content-Encoding |
响应内容的编码方式 gzip |
| Content-Length | 响应的大小 |
Content-Type |
响应内容的媒体类型 |
| Set-Cookie | 服务器发送的Cookie |
| Date | 响应生成的日期和时间 |
Etag |
客户端缓存检查标识符 |
| Server | 服务器标识 |
Last-Modified |
资源最后修改的时间 |
| Location | 资源被重新定位的URL |
| Access-Control-Allow-Origin | 允许跨域资源共享的域 |
| Access-Control-Allow-Headers | 允许的跨域请求的自定义请求头 |
请注意，这些是其中一些常见的HTTP头部字段，实际上还有很多其他的头部字段可以用于请求和响应。
3. 什么是RestfulAPI
RESTful API 是一种使用 HTTP 协议和标准 REST（Representational State Transfer）原则设计的 API，用于系统之间的通信。它允许客户端通过 HTTP 方法（GET、POST、PUT、DELETE）对资源进行操作，并使用 URL 定位资源。
与传统的 API 相比，RESTful API 有以下区别：
- 设计风格 ：RESTful API 遵循
资源的风格，将每个资源都用一个唯一的 URI 表示，并使用合适的 HTTP 方法对其进行操作。而传统的 API 常常使用不同的 URI 和操作来表示不同的功能。 - 状态无关：RESTful API 是无状态的，每个请求都应该包含足够的信息来处理请求，不依赖于之前的请求或状态。传统的 API 常常依赖于会话状态。
- 结果表现：RESTful API 返回的结果通常是资源的表现形式，比如 JSON 或 XML 格式的数据。传统的 API 则常常返回各种包装过的数据格式。
- 缓存支持：RESTful API 支持缓存，可以减少网络传输和服务器负载。传统的 API 不一定具备缓存能力。
- 可扩展性：RESTful API 的设计使得系统易于扩展和维护，因为它使用标准的 HTTP 协议和约束。传统的 API 可能因为实现的特定细节而难以扩展。
总的来说，RESTful API 更加简单、灵活、可扩展和易于使用，适用于不同平台和系统的集成。
4. 描述一下http的缓存机制
HTTP的缓存机制是为了提高网页加载速度，减轻服务器和网络的负载。具体过程如下：
-
客户端发起HTTP请求时，服务器会在响应头部的Cache-Control字段或Expires字段中设置缓存策略。常见的缓存策略有：no-cache（不缓存）, no-store（不缓存和存储）, public（可公开缓存）, private（仅个人缓存）等。
-
客户端收到服务端的响应后，将响应内容以及缓存策略保存到本地缓存中。
-
客户端下一次请求相同资源时，先检查本地缓存，如果缓存有效则直接从本地缓存中读取响应内容，不再发送请求到服务器。
-
当缓存过期或者被标记为无效时，客户端会发送一个条件请求到服务器，其中会包含一个If-Modified-Since或者If-None-Match字段，用于告诉服务器上次缓存的响应的最后修改时间或者ETag。
-
服务器收到条件请求后，会根据请求中的If-Modified-Since或者If-None-Match字段与资源的最后修改时间或者ETag进行比较。如果资源没有更新，则返回状态码304 Not Modified，客户端可以继续使用本地缓存；如果资源已经更新，则返回新的响应内容。
-
当服务器返回新的响应内容时，客户端会将新的响应内容和缓存策略更新到本地缓存中，以备下一次使用。
需要注意的是，客户端和服务器之间的缓存是相互独立的，服务器可以通过在响应头中设置Cache-Control字段或Expires字段来控制客户端的缓存策略，而客户端也可以通过设置请求头中的Cache-Control字段来控制服务器的缓存策略。
HTTP的缓存机制可以用以下图示来描述：
┌───────┐ ┌───────┐
┌────►│ Client│◄──────────┤ Server│
│ └───────┘ └───────┘
│ ↑ │
├───────────┘ │
│ │
▼ ▼
┌─────────────┐ ┌───────────────────┐
│ Cache │ │ Origin │
│ Store │◄─────►Cache-Control: max-age │
└─────────────┘ └───────────────────┘
▲ ▲
│ │
├───────────┐ │ Cache Miss
│ ▼ │
│ ┌───────┐ ┌───────┐
└─────│ Client│◄──────────┤ Server│
└───────┘ └───────┘
Cache Hit
在这个图示中：
- Client发起HTTP请求，请求会经过缓存（Cache）。
- 如果缓存中没有对应的资源，缓存会将请求发送给Server。
- Server响应请求，并在响应头中携带Cache-Control指令，例如：max-age指定缓存的有效时间。
- 缓存将来自Server的响应存储在Cache Store中，并将响应返回给Client。
- 当Client再次请求相同的资源时，请求会首先发送到缓存。
- 如果缓存中存在对应资源且仍在有效期内（未过期），则缓存命中，缓存将直接返回该资源给Client。
- 如果缓存中不存在对应资源或已过期，缓存会重新向Server发起请求，重复上述过程。
这种缓存机制可以减少对服务器的请求，提高响应速度，减轻服务器负载。
5. https
HTTPS（Hypertext Transfer Protocol Secure）是HTTP协议的安全版本，用于保护网络通信的安全性。HTTPS通过使用SSL（Secure Sockets Layer）或TLS（Transport Layer Security）协议来加密HTTP通信内容，从而防止数据被窃听、篡改或伪造。
在HTTPS通信中，客户端与服务器之间建立安全的加密通道，确保数据的隐私和完整性。它使用SSL或TLS协议进行加密，以保护数据传输过程中的机密信息，例如用户敏感数据、登录凭证、付款信息等。
HTTPS的工作原理大致如下：
- 客户端发起HTTPS请求时，服务器会将自己的数字证书发送给客户端。
- 客户端收到服务器的数字证书后，会验证证书的合法性和可信任性。若验证通过，则生成一个随机的对称密钥，并使用服务器的公钥对该密钥进行加密。
- 客户端将加密后的对称密钥发送给服务器。
- 服务器收到加密的对称密钥后，使用自己的私钥进行解密得到对称密钥。
- 客户端和服务器之间使用对称密钥进行加密和解密通信内容。
HTTPS可以提供以下安全保护：
- 数据加密：通过SSL/TLS协议将通信内容加密，防止数据被窃听。
- 数据完整性验证：使用数字签名保证数据的完整性，防止数据被篡改。
- 身份验证：通过数字证书验证服务器的身份，防止伪造的服务器进行攻击。
使用HTTPS可以有效提高网络通信的安全性，特别是在涉及敏感信息传输的场景，如在线支付、个人信息提交等。