前端面试题 ===＞【Ajax、请求】

Ajax 面试题总结

1. 什么是Ajax，原理是什么？

定义：
- 在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式称为Ajax；
  - XMLHttpRequest是Ajax的核心机制，他是IE5首先引入的，是一种支持异步请求的技术，简单来说就是JS可以及时向服务器提出请求和处理响应，而不阻塞用户，达到无刷新的效果；
原理：
- 通过XMLHttpRequest对象向服务器发异步请求，从服务器获得数据，然后利用JS来操作DOM进而更新页面；
优点：
- 最大的一点就是页面无刷新，用户体验非常好；
- 使用异步方式与服务器通信，具有更加迅速的响应能力；
- 基于标准化的并被广泛支持的技术，不需要下载插件；
缺点：
- Ajax不支持浏览器返回按钮；
- 对搜索引擎的支持比较弱；
- 安全问题：Ajax暴露了与服务器交互的细节；
- 破坏了程序的异常机制；

2. 常见的HTTP状态码以及代表的意义

状态码	意义
200	请求成功
201	成功请求并创建新的资源
301	永久移动（请求的资源已被永久的移动到新的URL，返回信息会包括新的URL，浏览器会自动定向到新的URL，今后任何新的请求都应使用新的URL代替）
302	临时重定向/临时转移（一般用来做服务器负载均衡）
304	本次获取的内容是读取缓存中的数据，会每次区服务器校验
400	语义有误，请求参数有误
401	当前请求需要客户验证
403	没有权限，禁止访问
404	请求地址有误（服务器无法根据客户端提供的地址找到资源）
408	请求超时
500	服务器内部错误
501	服务器不支持某种请求方式
503	服务器超负荷
505	服务器不支持请求的HTTP协议的版本，无法完成处理

3. 同源策略

同源：
- 协议、域名、端口号一致就是同源；
同源策略 ：
- 浏览器提供的一种安全机制，限制了从同一个源加载的文件或脚本如何与来自另一个源的资源进行交互，这是一个隔离潜在恶意文件的重要安全机制；
- 简单来说，同源策略就是一种安全机制；

4. 跨域

跨域 :
- 协议、域名、端口号相同就是同源，只要有一个不一至就是跨域，浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是JS施加的安全限制，防止他人恶意攻击网站；
为什么会出现跨域？
- 当下最流行的就是前后端分离的项目，就是前端项目和后端接口并不在同一域名之下，在前端项目访问后端接口的时候，就必然存在跨域问题；
跨域是哪里的限制 / 谁的行为？
- 跨域只存在于浏览器（前端项目在访问另一个服务器后端接口的时候）；

解决方式 ：

开发环境 ：

配置代理服务器，Vue 配置 devServe.proxy 去实现开发环境下的代码；

js 复制代码

module.exports = {
    devServer: {
        // 代理配置
        proxy: {
            // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
            // localhost:8888/api/abc  => 代理给另一个服务器
            // 本地的前端  =》 本地的后端  =》 代理我们向另一个服务器发请求 （行得通）
            // 本地的前端  =》 另外一个服务器发请求 （跨域 行不通）
            '/api': {
                target: 'www.baidu.com', // 我们要代理的地址
                changeOrigin: true, // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
                // 路径重写
                pathRewrite: {
                    // 重新路由  localhost:8888/api/login  => www.baidu.com/api/login
                    '^/api': '' // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 
                }
            },
        }
    }
}

生产环境 ：
- 反向代理 ：借助Nginx的反向代理来实现（后端服务实现）；
- CORS ：
  - 后端服务器允许跨域，后端实现；
  - 两次请求，第一次是OPTIONS请求（预检请求），第二次是根据预检请求的结果确定是否跨域以及如何跨域；
  - 原理：服务器设置Access-Control-Allow-OriginHttp响应头后，浏览器会允许跨域请求；
  - 限制：浏览器需要支持HTML5，可以支持POST、PUT的等方法；
  js 复制代码
```
// 以下方式二选一
Acccess-Control-Allow-Origin: * // 允许所有域名访问
Access-Control-Allow-Origin: HTTP://a.com // 只允许所有域名访问
```

拓展：
- JSONP：
- 动态创建一个script标签，利用script标签的stc属性不受同源策略限制，因为所有的src和href属性都不收同源策略限制，可以请求第三方服务器数据内容；
- 缺点：只能发起GET请求；
开发环境的跨域会影响生产环境吗？
- 不会，开发是开发，生产是生产，互相没有关系；

5. GET 和 POST 的区别

GET 和 POST 本质上没什么区别，都是TCP；
参数可见性 ：
- get：参数可见；
- post：参数不可见；
产生的TCP数据包 ：
- get：产生一个TCP数据包，浏览器会把http header 和 data 一并发送出去，服务器响应200 ok；
- post：产生两个TCP数据包，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok；
数据传输 ：
- get：通过拼接url或使用cookie进行参数的传递（查询字符串）；
- post：通过body体传输参数；
缓存性 ：
- get：可以缓存
- post：不可以缓存，也就是说post请求服务端都会返回一次新的内容（内容的值可能一样，但是是新的请求）；
后退页面的反应 ：
- get：不产生任何影响；
- post：需要重新提交请求；
传输数据大小 ：
- get：一般数据的传输不超过2k~4k，根据浏览器的不同，限制可能不一样，但相差不大；
- post：传输数据的大小根据配置文件设定；
安全性 ：
- 原则上post肯定比get安全，毕竟参数不可见；

6. HTTP 和 HTTPS 的区别

HTTPS需要申请证书，一般免费的证书很少，因而需要一定的费用；
HTTP是超文本传输协议，信息是明文传输；HTTPS则是具有安全性的SSL加密传输协议；
HTTP和HTTPS使用的是完全不同的连接方式，用的端口不一样，HTTP默认端口是80，HTTPS默认端口是443；
HTTP的连接很简单，是无状态的，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网路协议，比HTTP协议更安全；

7. 一个页面从输入URL到页面加载显示完成，这个过程中发生了什么

浏览器查找域名对应的IP地址（DNS查询：浏览器缓存->系统缓存->路由器缓存->ISPDNS 缓存->根域名服务器）；
- DNS查询：
  - 这个过程实际上是浏览器将输入的url发送到DNS服务器进行查询，DNS服务器会返回当前查询url的IP地址；
  - 它实际上充当了一个翻译角色，实现了网址到IP地址的转换；
  - DNS解析是一个递归查询的过程；
浏览器向Web服务器发送一个HTTP请求（TCP三次握手）；
服务器301重定向（从 HTTP://example.com 重定向到 HTTP://www.example.com）；
浏览器跟踪重定向地址，请求另一个带www的网址；
服务器处理请求（通过路由读取资源）；
服务器返回一个HTTP响应（报头中把 Content-type 设置为 'text/html'）；
浏览器进DOM树；
浏览器发送请求获取嵌套在HTML中的资源（如：图片、音频、视频、CSS、JS等）；
浏览器显示完成页面；
浏览器发送异步请求；

8. 你知道的HTTP请求方式有几种？

请求当时	意义
✅ GET	请求指定的页面信息，并返回实体信息
✅ POST	向指定资源体骄傲数据进行处理请求，数据被包含在请求体中，post请求可能会导致新的资源的建立和已有资源的修改
✅ PUT	从客户端向服务器传送的数据取代指定的文档的内容
✅ DELETE	请求服务器删除指定页面
✅ OPTIONS	允许客户端查看服务器的性能
✅ PATCH	实体中包含一个表，表中说明与该URL所表示的原内容的区别
HEAD	类似于get请求，只不过返回的响应中没有具体内同，用于获取报头
CONNECT	HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器
TRACE	回显服务器收到的请求，主要用于测试或诊断
MOVE	请求服务器将指定的页面移至另一个网络地址
COPY	请求服务器将指定的页面拷贝至另一个网络地址
LINK	请求服务器建立链接关系
UNLINK	断开链接关系
WRAPPED	允许客户端发送经过封装的请求
LOCK	允许用户锁定资源，比如可以再编辑某个资源时将其锁定，以防别人同时对其进行编辑
MKCOL	允许用户创建资源
Extension-mothed	在不改动协议的前提下，可增加另外的方法

9. HTTP缓存机制

浏览器缓存分为两种：
- 强缓存：
- 协商缓存；
浏览器加载一个页面的简单流程如下：
- 浏览器先根据这个资源的http头信息来判断是否命中强缓存，如果命中则直接加载缓存中的资源，并不会将请求发送到服务器；
- 如果未命中强缓存，则浏览器会将资源加载请求发送到服务器，服务器来判断浏览器本地缓存是否失效，若可以使用，则服务器并不会返回资源信息，浏览器继续从缓存中加载资源；
- 如果未命中协商缓存，则浏览器会将完成的资源返回给浏览器，浏览器加载新资源，并更新缓存；

10. 什么是TCP连接的三次握手？

TCP是因特网中的传输层协议，使用建立连接，完成三次握手，与服务器开始传送；
第一次握手：
- 建立连接时，发送包（syn = j）到服务器，并进入等待状态，等待服务器确认；
- SYN：同步序列编号；
第二次握手：
- 收到SYN包，必须确认客户的SYN（sybn = j + 1），同时自己也发送一个SYN包（syn = k），即SYN + ACK包，此时服务器进入等待状态；
第三次握手：
- 客户端收到服务器的SYN + ACK包，向服务器确认包ACK（ack = k + 1），此包发送完毕，客户端和服务器进入（TCP连接成功）状态，完成三次握手；

11. 为什么TCP连接需要三次握手四次挥手

TCP协议是全双工通信，这意味着客户端和服务器都可以向彼此发送数据，所以关闭连接是双方都需要确认的共同行为，假设是三次握手时，首先释放了客户端到服务器方向的连接，此时TCP连接处于半关闭状态，这时客户端不能向服务器发送数据，而服务器还是可以向客户端发送数据，如果此时客户收到了服务器的确认报文段后，就立即立即发送一个确认报文段，这会导致服务器向客户端还在发送数据时连接就被关闭，这样会导致客户没有完整收到服务器所发的报文段；

12. 介绍一下WebSocket

websocket是一种网络通信协议，是HTML5开始提供的一种在单个TCP连接上进行全双工通信的协议；
这个对比着HTTP协议来说，HTTP协议是一种无状态的、无连接、单向的应用层协议，通信请求只能由客户端发起，服务端对请求做出应答处理；
HTTP协议无法实现服务器主动向客户端发消息，webSocket链接允许客户端和服务器之间进行全双工通信，以便任一方都可以通过建立的连接将数据推送到另一端；
webSocket只需建立一次连接，就可以一直保持连接状态；
连接⽅式也⾮常简单，new WebSocket（后台地址）实例化⼀个socket对象,其中open建⽴连接，send可以发送消息，onmessage可以接收消息，close可以关闭连接

前端面试题 ===＞ 【Ajax、请求】

Ajax 面试题总结

1. 什么是Ajax，原理是什么？

2. 常见的HTTP状态码以及代表的意义

3. 同源策略

4. 跨域

5. GET 和 POST 的区别

6. HTTP 和 HTTPS 的区别

7. 一个页面从输入URL到页面加载显示完成，这个过程中发生了什么

8. 你知道的HTTP请求方式有几种？

9. HTTP缓存机制

10. 什么是TCP连接的三次握手？

11. 为什么TCP连接需要三次握手四次挥手

12. 介绍一下WebSocket

前端面试题 ===＞【Ajax、请求】