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. 同源策略

跨域 :
- 协议、域名、端口号相同就是同源，只要有一个不一至就是跨域，浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是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请求；

开发环境的跨域会影响生产环境吗？
- 不会，开发是开发，生产是生产，互相没有关系；

4. 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安全，毕竟参数不可见；

5. HTTP 和 HTTPS 的区别

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

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

浏览器查找域名对应的IP地址（DNS查询：浏览器缓存->系统缓存->路由器缓存->ISPDNS 缓存->根域名服务器）；
浏览器向Web服务器发送一个HTTP请求（TCP三次握手）；
服务器301重定向（从 example.com 重定向到 www.example.com）；
浏览器跟踪重定向地址，请求另一个带www的网址；
服务器处理请求（通过路由读取资源）；
服务器返回一个HTTP响应（报头中把 Content-type 设置为 'text/html'）；
浏览器进DOM树；
浏览器发送请求获取嵌套在HTML中的资源（如：图片、音频、视频、CSS、JS等）；
浏览器显示完成页面；
浏览器发送异步请求；

7. 你知道的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	在不改动协议的前提下，可增加另外的方法

8. HTTP缓存机制

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

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

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

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

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

11. 介绍一下WebSocket

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

前端面试题 ===> 【Ajax】

Ajax 面试题总结

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

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

3. 同源策略

4. GET 和 POST 的区别

5. HTTP 和 HTTPS 的区别

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

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

8. HTTP缓存机制

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

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

11. 介绍一下WebSocket