HTTP面试题

最新推荐文章于 2024-09-17 13:42:29 发布

Jelly儿

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量896

点赞数 7

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_39241736/article/details/136682858

版权

`HTTP`有哪些方法？

HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法
HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT

这些方法的具体作用是什么？

GET: 通常用于请求服务器发送某些资源
HEAD: 请求资源的头部信息, 并且这些头部与 HTTP GET 方法请求时返回的一致. 该请求方法的一个使用场景是在下载一个大文件前先获取其大小再决定是否要下载, 以此可以节约带宽资源
OPTIONS: 用于获取目的资源所支持的通信选项
POST: 发送数据给服务器
PUT: 用于新增资源或者使用请求中的有效负载替换目标资源的表现形式
DELETE: 用于删除指定的资源
PATCH: 用于对资源进行部分修改
CONNECT: HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器
TRACE: 回显服务器收到的请求，主要用于测试或诊断

GET 和 POST 有什么区别？

数据传输方式不同：GET请求通过URL传输数据，而POST的数据通过请求体传输
安全性不同：POST的数据因为在请求主体内，所以有一定的安全性保证，而GET的数据在URL中，通过历史记录，缓存很容易查到数据信息
数据类型不同：GET只允许 ASCII 字符，而POST无限制
GET无害：刷新、后退等浏览器操作GET请求是无害的，POST可能重复提交表单
特性不同：GET是安全（这里的安全是指只读特性，就是使用这个方法不会引起服务器状态变化）且幂等（幂等的概念是指同一个请求方法执行多次和仅执行一次的效果完全相同），而POST是非安全非幂等

PUT 和 POST 都是给服务器发送新增资源，有什么区别？

PUT 和 POST 方法的区别是:
PUT 方法是幂等的：连续调用一次或者多次的效果相同（无副作用）。
POST 方法是非幂等的。

除此之外还有一个区别，通常情况下，PUT 的 URI 指向是具体单一资源，而 POST 可以指向资源集合。

『POST 表示创建资源，PUT 表示更新资源』这种说法是错误的，两个都能创建资源，根本区别就在于幂等性。

`PUT` 和 `PATCH` 都是给服务器发送修改资源，有什么区别？

PUT 和 PATCH 都是更新资源，而 PATCH 用来对已知资源进行局部更新。

聊一聊 `HTTP` 的部首有哪些？

通用首部字段（General Header Fields）：请求报文和响应报文两方都会使用的首部
- Cache-Control: 控制缓存
- Connection: 连接管理、逐条首部
- Upgrade: 升级为其他协议
- via: 代理服务器的相关信息
- Wraning: 错误和警告通知
- Transfor-Encoding: 报文主体的传输编码格式
- Trailer: 报文末端的首部一览
- Pragma: 报文指令
- Date: 创建报文的日期
请求首部字段（Reauest Header Fields）:客户端向服务器发送请求的报文时使用的首部
- Accept: 客户端或者代理能够处理的媒体类型
- Accept-Encoding:优先可处理的编码格式
- Accept-Language: 优先可处理的自然语言
- Accept-Charset: 优先可以处理的字符集
- If-Match: 比较实体标记（ETage）
- If-None-Match: 比较实体标记（ETage）与 If-Match 相反
- If-Modified-Since: 比较资源更新时间（Last-Modified）
- If-Unmodified-Since: 比较资源更新时间（Last-Modified），与 If-Modified-Since 相反
- If-Rnages: 资源未更新时发送实体 byte 的范围请求
- Range: 实体的字节范围请求
- Authorization: web 的认证信息
- Proxy-Authorization: 代理服务器要求 web 认证信息
- Host: 请求资源所在服务器
- From: 用户的邮箱地址
- User-Agent: 客户端程序信息
- Max-Forwrads: 最大的逐跳次数
- TE: 传输编码的优先级
- Referer: 请求原始放的 url
- Expect: 期待服务器的特定行为
响应首部字段（Response Header Fields）:从服务器向客户端响应时使用的字段
- Accept-Ranges: 能接受的字节范围
- Age: 推算资源创建经过时间
- Location: 令客户端重定向的 URI
- vary: 代理服务器的缓存信息
- ETag: 能够表示资源唯一资源的字符串
- WWW-Authenticate: 服务器要求客户端的验证信息
- Proxy-Authenticate: 代理服务器要求客户端的验证信息
- Server: 服务器的信息
- Retry-After: 和状态码 503 一起使用的首部字段，表示下次请求服务器的时间
实体首部字段（Entiy Header Fields）:针对请求报文和响应报文的实体部分使用首部
- Allow: 资源可支持 http 请求的方法
- Content-Language: 实体的资源语言
- Content-Encoding: 实体的编码格式
- Content-Length: 实体的大小（字节）
- Content-Type: 实体媒体类型
- Content-MD5: 实体报文的摘要
- Content-Location: 代替资源的 yri
- Content-Rnages: 实体主体的位置返回
- Last-Modified: 资源最后的修改资源
- Expires: 实体主体的过期资源

`HTTP` 的状态码有哪些？

2XX 成功
- 200(OK):表示从客户端发来的请求在服务器端被正确处理
- 201(Created):请求已经被实现，而且有一个新的资源已经依据请求的需要而建立
- 202(Accepted):请求已接受，但是还没执行，不保证完成请求
- 204(No content):表示请求成功，但响应报文不含实体的主体部分
- 206(Partial Content):进行范围请求
3XX 重定向
- 301(moved permanently):永久性重定向，表示资源已被分配了新的 URL
- 302(found):临时性重定向，表示资源临时被分配了新的 URL
- 303(see other):表示资源存在着另一个 URL，应使用 GET 方法丁香获取资源
- 304(not modified):表示服务器允许访问资源，但因发生请求未满足条件的情况
- 307(temporary redirect):临时重定向，和 302 含义相同
4XX 客户端错误
- 400(Bad request):请求报文存在语法错误
- 401(Unauthorized):表示发送的请求需要有通过 HTTP 认证的认证信息
- 403(Forbidden):表示对请求资源的访问被服务器拒绝
- 404(Not found):表示在服务器上没有找到请求的资源
- 408(Request timeout):客户端请求超时
- 409(Confict):请求的资源可能引起冲突
5XX 服务器错误
- 500(Internal sever error):表示服务器端在执行请求时发生了错误
- 501(Not Implemented):请求超出服务器能力范围，例如服务器不支持当前请求所需要的某个功能，或者请求是服务器不支持的某个方法
- 503(Service Unavailable):表明服务器暂时处于超负载或正在停机维护，无法处理请求
- 505(Http version not supported):服务器不支持，或者拒绝支持在请求中使用的 HTTP 版本

同样是重定向 307，303，302 的区别？
302 是 http1.0 的协议状态码，在 http1.1 版本的时候为了细化 302 状态码又出来了两个 303 和 307。
303 明确表示客户端应当采用 get 方法获取资源，他会把 POST 请求变为 GET 请求进行重定向。
307 会遵照浏览器标准，不会从 post 变为 get。

`AJAX`、`Axios`、`Fetch` 的区别

AJAX

Ajax 即 AsynchronousJavascriptAndXML（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
它是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

其缺点如下：

本身是针对 MVC 编程，不符合前端 MVVM 的浪潮
基于原生 XHR 开发，XHR 本身的架构不清晰
不符合关注分离（Separation of Concerns）的原则
配置和调用方式非常混乱，而且基于事件的异步模型不友好

Fetch

Fetch 号称是 AJAX 的替代品，是在 ES6 出现的，使用了 ES6 中的 Promise 对象。
Fetch 是基于 Promise 设计的。Fetch 的代码结构比起 AJAX 简单多。Fetch不是 AJAX 的进一步封装，而是原生JS，没有使用 XMLHttpRequest 对象。

Fetch 的优点：

语法简洁，更加语义化
基于标准 Promise 实现，支持 async/await 更加底层，
提供的 API 丰富（request, response）脱离了 XHR，是 ES 规范里新的实现方式

Fetch 的缺点：

Fetch 只对网络请求报错，对 400，500 都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
Fetch 默认不会带 cookie ，需要添加配置项： fetch(url, {credentials: 'include'})
Fetch 不支持 abort，不支持超时控制，使用 setTimeout 及 Promise.reject 的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费， fetch 没有办法原生监测请求的进度，而 XHR 可以。

Axios

Axios 是一种基于 Promise 封装的 HTTP 客户端，其特点如下：

浏览器端发起 XMLHttpRequests 请求
node 端发起 http 请求
支持 Promise API
监听请求和返回
对请求和返回进行转化
取消请求
自动转换 json 数据
客户端支持抵御 XSRF 攻击

对 AJAX 的理解，实现一个 AJAX 请求

AJAX 是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。

创建 AJAX 请求的步骤：

创建一个 XMLHttpRequest 对象。
在这个对象上使用 open 方法创建一个 HTTP 请求，open 方法所需要的参数是请求的方法、请求的地址、是否异步和用户的认证信息。
在发起请求前，可以为这个对象添加一些信息和监听函数。比如说可以通过 setRequestHeader 方法来为请求添加头信息。还可以为这个对象添加一个状态监听函数。
一个 XMLHttpRequest 对象一共有 5 个状态，当它的状态变化时会触发 onreadystatechange 事件，可以通过设置监听函数，来处理请求成功后的结果。
当对象的 readyState 变为 4 的时候，代表服务器返回的数据接收完成，这个时候可以通过判断请求的状态，如果状态是 2xx 或者 304 的话则代表返回正常。
这个时候就可以通过 response 中的数据来对页面进行更新了。当对象的属性和监听函数设置完成后，最后调用 send 方法来向服务器发起请求，可以传入参数作为发送的数据体。

    const url = "/server";
    let xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function () {
      if (this.readyState !== 4) return;
      if (this.status === 200) {
        return this.response;
      } else {
        console.error(this.statusText);
      }
    };

    xhr.onerror = function () {
      console.error(this.statusText);
    };

    xhr.responseText = "json";
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(null);