前端常见面试题之ajax、http

这篇具有很好参考价值的文章主要介绍了前端常见面试题之ajax、http。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、手写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状态码

状态码 含义 说明
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方法有三个参数,含义如下:

  1. method:表示HTTP请求的方法,比如GET、POST等。
  2. url:表示请求的URL地址。
  3. 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 有以下区别:

  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://www.toymoban.com/news/detail-797870.html

到了这里,关于前端常见面试题之ajax、http的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端常见面试题

    HTML语义化的理解 b 和 strong 的区别 link 和 @import 有什么区别 defer 和 async HTML5离线储存 盒子模型 居中常见方法 BFC flex布局 em 和 rem的区别 CSS 中哪些属性可以继承 CSS中position定位 三栏布局 闭包 原型和原型链 继承 this Promise async 和 await 深拷贝 和 浅拷贝 防抖 和 节流 cookie、s

    2024年02月10日
    浏览(48)
  • web前端常见面试题

    DOCTYPE(文档类型)是 HTML 文档的开头,它指定了 HTML 文档使用的 HTML 版本及文档类型,告诉浏览器以哪种规范来解析 HTML 文档。它的作用有以下几个方面: 声明 HTML 版本:DOCTYPE 声明可以让浏览器知道使用哪个 HTML 版本来解析当前文档,从而根据规范来处理文档中的元素和属

    2024年02月07日
    浏览(39)
  • 高级前端常见面试题合集

    常见的图片格式及使用场景 (1) BMP ,是无损的、既支持索引色也支持直接色的点阵图。这种图片格式几乎没有对数据进行压缩,所以BMP格式的图片通常是较大的文件。 (2) GIF 是无损的、采用索引色的点阵图。采用LZW压缩算法进行编码。文件小,是GIF格式的优点,同时,

    2024年02月07日
    浏览(43)
  • web前端常见面试题归纳

    概念 块元素:默认独占一行,页面中垂直排列,宽高和内外边距可控 行内元素:默认同行排列,宽高由内容决定 行内元素和块元素举例 块元素: div、p、table、ul 行内元素: span、img、a、input 行内元素和块元素的相互转换 display:inline;将块元素转换为行内元素 display:block;将行

    2024年02月12日
    浏览(54)
  • java面试常问,zookeeper常见面试题

    什么是 Spring Boot? 为什么要用 Spring Boot? Spring Boot 的核心配置文件有哪几个?它们的区别是什么? Spring Boot 的配置文件有哪几种格式?它们有什么区别? Spring Boot 的核心注解是哪个?它主要由哪几个注解组成的? 开启 Spring Boot 特性有哪几种方式? Spring Boot 需要独立的容器

    2024年03月15日
    浏览(66)
  • 程序员面试系列,docker常见面试题

    原文链接 什么是Docker?它的主要作用是什么? Docker和虚拟机之间有什么区别? Docker的主要组件有哪些? Docker镜像和容器的区别是什么? 如何构建Docker镜像?请简要描述构建过程。 如何创建和启动一个Docker容器? 如何在Docker容器内运行后台任务? Docker的网络模式有哪些?

    2024年02月15日
    浏览(47)
  • 程序员面试系列,golang常见面试题

    原文链接 make(chan int, 1) 和 make(chan int) 之间有区别。 make(chan int, 1) 创建了一个有缓冲的通道,容量为1。这意味着通道可以缓存一个整数元素,即使没有接收方,发送操作也不会被阻塞,直到通道已满。如果没有接收方,发送操作会立即完成。如果通道已满,发送操作会被阻塞

    2024年02月16日
    浏览(46)
  • 程序员面试系列,kafka常见面试题

    原文链接 Kafka是什么?它的主要作用是什么? 什么是Kafka的主题(Topic)和分区(Partition)? Kafka中的消息是如何被生产者发送和消费者接收的? Kafka中的分区有什么作用?为什么分区是Kafka的基本并行单位? 什么是Kafka生产者和消费者?如何创建和配置它们? Kafka中的消息保

    2024年02月15日
    浏览(47)
  • 前端常见面试题之vue2

    在Vue2中,组件的生命周期钩子函数包括: beforeCreate :在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用 created :实例已经创建完成之后被调用 beforeMount :在挂载开始之前被调用:相关的 render 函数首次被调用 mounted:el 被新创建的 vm.$el 替换,并挂

    2024年02月22日
    浏览(45)
  • 程序员面试系列,k8s常见面试题

    原文链接 Kubernetes(通常简称为K8s)是一个开源的容器编排平台,用于自动化部署、扩展和管理容器化应用程序。它最初由谷歌开发,并于2014年捐赠给了云原生计算基金会(CNCF)。Kubernetes 提供了一个强大的容器化应用程序管理系统,使开发人员和运维团队能够更轻松地构建

    2024年02月06日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包