前端常见面试题之ajax、http

发布时间:2024年01月16日

一、手写ajax请求

1. get

        // 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

        // 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状态码

状态码含义说明
200OK请求成功
301Moved Permanently资源被永久移动到新的URL
302Found资源被临时移动到新的URL
400Bad Request请求有误,服务器无法处理
401Unauthorized请求需要身份验证
403Forbidden服务器拒绝该请求
404Not Found请求的资源不存在
500Internal Server Error服务器遇到错误
502Bad Gateway服务器作为网关或代理时收到无效响应
503Service Unavailable服务器暂时不可用
504Gateway Timeout服务器作为网关或代理时在等待上游服务器响应时超时

5. xhr.open

xhr.open方法有三个参数,含义如下:

  1. method:表示HTTP请求的方法,比如GET、POST等。
  2. url:表示请求的URL地址。
  3. async:表示请求是否为异步,默认为true,即异步请求。

如果第三个参数为true,则表示异步请求,即浏览器不需要等待服务器返回响应即可继续执行后面的代码。如果第三个参数为false,则表示同步请求,即浏览器需要等待服务器返回响应后才能继续执行后面的代码。

二、跨域

大家可以看看这篇什么是跨域(浏览器同源政策),如何解决跨域

三、cookie、localStorage和sessionStorage

cookie、localStorage和sessionStorage都是用于在浏览器端存储数据的技术。它们的用途、区别和大小如下所示:

CookielocalStoragesessionStorage
用途用于在浏览器和服务器之间传递数据,包括会话管理、持久性登录状态等用于在浏览器端存储较大量的数据,包括长期保存的用户配置、个人信息等用于在浏览器端存储临时性的数据,仅在当前会话有效
存储位置存储在客户端,会自动随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状态码

状态码含义说明
200OK请求成功
301Moved Permanently资源被永久移动到新的URL
302Found资源被临时移动到新的URL
400Bad Request请求有误,服务器无法处理
401Unauthorized请求需要身份验证
403Forbidden服务器拒绝该请求
404Not Found请求的资源不存在
500Internal Server Error服务器遇到错误
502Bad Gateway服务器作为网关或代理时收到无效响应
503Service Unavailable服务器暂时不可用
504Gateway 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 有以下区别:

  1. 设计风格:RESTful API 遵循资源的风格,将每个资源都用一个唯一的 URI 表示,并使用合适的 HTTP 方法对其进行操作。而传统的 API 常常使用不同的 URI 和操作来表示不同的功能
  2. 状态无关:RESTful API 是无状态的,每个请求都应该包含足够的信息来处理请求,不依赖于之前的请求或状态。传统的 API 常常依赖于会话状态。
  3. 结果表现:RESTful API 返回的结果通常是资源的表现形式,比如 JSON 或 XML 格式的数据。传统的 API 则常常返回各种包装过的数据格式。
  4. 缓存支持:RESTful API 支持缓存,可以减少网络传输和服务器负载。传统的 API 不一定具备缓存能力。
  5. 可扩展性:RESTful API 的设计使得系统易于扩展和维护,因为它使用标准的 HTTP 协议和约束。传统的 API 可能因为实现的特定细节而难以扩展。

总的来说,RESTful API 更加简单、灵活、可扩展和易于使用,适用于不同平台和系统的集成。

4. 描述一下http的缓存机制

HTTP的缓存机制是为了提高网页加载速度,减轻服务器和网络的负载。具体过程如下:

  1. 客户端发起HTTP请求时,服务器会在响应头部的Cache-Control字段或Expires字段中设置缓存策略。常见的缓存策略有:no-cache(不缓存), no-store(不缓存和存储), public(可公开缓存), private(仅个人缓存)等。

  2. 客户端收到服务端的响应后,将响应内容以及缓存策略保存到本地缓存中。

  3. 客户端下一次请求相同资源时,先检查本地缓存,如果缓存有效则直接从本地缓存中读取响应内容,不再发送请求到服务器。

  4. 当缓存过期或者被标记为无效时,客户端会发送一个条件请求到服务器,其中会包含一个If-Modified-Since或者If-None-Match字段,用于告诉服务器上次缓存的响应的最后修改时间或者ETag。

  5. 服务器收到条件请求后,会根据请求中的If-Modified-Since或者If-None-Match字段与资源的最后修改时间或者ETag进行比较。如果资源没有更新,则返回状态码304 Not Modified,客户端可以继续使用本地缓存;如果资源已经更新,则返回新的响应内容。

  6. 当服务器返回新的响应内容时,客户端会将新的响应内容和缓存策略更新到本地缓存中,以备下一次使用。

需要注意的是,客户端和服务器之间的缓存是相互独立的,服务器可以通过在响应头中设置Cache-Control字段或Expires字段来控制客户端的缓存策略,而客户端也可以通过设置请求头中的Cache-Control字段来控制服务器的缓存策略。

HTTP的缓存机制可以用以下图示来描述:

                 ┌───────┐            ┌───────┐
           ┌────?│ Client│?──────────┤ Server│
           │     └───────┘            └───────┘
           │           ↑                    │
           ├───────────┘                    │
           │                                │
           ▼                                ▼
  ┌─────────────┐               ┌───────────────────┐
  │    Cache    │               │     Origin        │
  │    Store    │?─────?Cache-Control: max-age     │
  └─────────────┘               └───────────────────┘
           ▲                                ▲
           │                                │
           ├───────────┐                    │ Cache Miss
           │           ▼                    │
           │     ┌───────┐            ┌───────┐
           └─────│ Client│?──────────┤ Server│
                 └───────┘            └───────┘
                   Cache Hit

在这个图示中:

  1. Client发起HTTP请求,请求会经过缓存(Cache)。
  2. 如果缓存中没有对应的资源,缓存会将请求发送给Server。
  3. Server响应请求,并在响应头中携带Cache-Control指令,例如:max-age指定缓存的有效时间。
  4. 缓存将来自Server的响应存储在Cache Store中,并将响应返回给Client。
  5. 当Client再次请求相同的资源时,请求会首先发送到缓存。
  6. 如果缓存中存在对应资源且仍在有效期内(未过期),则缓存命中,缓存将直接返回该资源给Client。
  7. 如果缓存中不存在对应资源或已过期,缓存会重新向Server发起请求,重复上述过程。

这种缓存机制可以减少对服务器的请求,提高响应速度,减轻服务器负载。

5. https

HTTPS(Hypertext Transfer Protocol Secure)是HTTP协议的安全版本,用于保护网络通信的安全性。HTTPS通过使用SSL(Secure Sockets Layer)或TLS(Transport Layer Security)协议来加密HTTP通信内容,从而防止数据被窃听、篡改或伪造。

在HTTPS通信中,客户端与服务器之间建立安全的加密通道,确保数据的隐私和完整性。它使用SSL或TLS协议进行加密,以保护数据传输过程中的机密信息,例如用户敏感数据、登录凭证、付款信息等。

HTTPS的工作原理大致如下:

  1. 客户端发起HTTPS请求时,服务器会将自己的数字证书发送给客户端。
  2. 客户端收到服务器的数字证书后,会验证证书的合法性和可信任性。若验证通过,则生成一个随机的对称密钥,并使用服务器的公钥对该密钥进行加密。
  3. 客户端将加密后的对称密钥发送给服务器。
  4. 服务器收到加密的对称密钥后,使用自己的私钥进行解密得到对称密钥。
  5. 客户端和服务器之间使用对称密钥进行加密和解密通信内容。

HTTPS可以提供以下安全保护:

  1. 数据加密:通过SSL/TLS协议将通信内容加密,防止数据被窃听。
  2. 数据完整性验证:使用数字签名保证数据的完整性,防止数据被篡改。
  3. 身份验证:通过数字证书验证服务器的身份,防止伪造的服务器进行攻击。

使用HTTPS可以有效提高网络通信的安全性,特别是在涉及敏感信息传输的场景,如在线支付、个人信息提交等。

文章来源:https://blog.csdn.net/jieyucx/article/details/135619752
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。