一.什么是Ajax

在网页不跳转的情况下向服务器请求数据实现异步请求做局部刷新

二.Ajax的工作流程

1.创建XMLHttpRequest对象（俗称小黄人）

   `let xhr = new XMLHttpRequest();`

2.设置请求

   `xhr.open('get', 'https://autumnfish.cn/api/joke');`

3.发送请求

  `xhr.send();`

4.注册回调函数

这个函数不是立即执行的，而是等服务器把数据响应返回才会执行（PS：什么时候执行取决于你的网速快慢） xhr.onload = function () {console.log(xhr.responseText);}

    //1创建xhr对象
    let xhr = new XMLHttpRequest()
    //2设置请求方法和地址
    xhr.open('请求方法', 'url')
    //3发送请求
    xhr.send()
    //4注册响应事件
    xhr.onload = function () {
      console.log(xhr.responseText)
    }

三.get和post的区别

1.传参方式不同

get 请求直接在url中传参

post 在请求体中传参

2.数据大小不同

get有大小限制

post没有大小限制(文件上传)

3.传输速度不同

get传输速度快

post传输速度慢

4.安全性不同

get安全性低

post安全性高(登录注册必须是post请求)

四.HTTP原理 : 网络传输协议

发送请求

请求报文

请求行请求地址和请求方法
请求头浏览器告诉服务器发给你的数据是什么格式
请求体请求参数

响应请求

响应报文

响应行响应状态码 + 服务器ip地址

响应状态码

2xx 成功(绿色) 200成功 204 post请求体持续传输

3xx重定向(黄色) 302重定向(服务器主动修改浏览器地址)

4xx前端问题(红色) 400参数错误 401 未身份验证(没登录)403没有权限 404路径错误 413 文件超过最大限制

5xx服务器问题(红色) 500服务器内部错误 503 服务器维护或超载

响应头服务器告诉浏览器发给你的数据是什么格式
响应体响应数据

五.网页从输入url到渲染的过程

1.浏览器查找域名对应的 IP 地址(DNS 查询：浏览器缓存->系统缓存->路由器缓存->ISP

DNS 缓存->根域名服务器)

2.TCP三次握手建立安全的网络传输协议

2.1 什么是TCP : 一种传输控制协议
2.2 TCP作用 : 保证HTTP网络传输是安全 + 可靠的（检测客户端与服务器的网卡是不是通的）
2.3 TCP三次握手 :

第一次: 浏览器 -> 服务器 (你能听到我说话吗?,检测浏览器:发送)

第二次: 服务器 -> 浏览器 (我听到了,你能听到我说话吗。检测浏服务器: 接收 + 发送)

第三次: 浏览器 -> 服务器 (嗯,我听到了. 检测浏览器: 接收)

3.HTTP建立连接

3.1 客户端发送请求
3.2 服务器处理请求
3.3 服务器响应请求

4.渲染引擎渲染返回HTML文件

4.1 解析html生成：dom树
4.2 解析css生成：样式树
4.3 dom树与样式树合并得到渲染树
4.4 呈现页面

六.Ajax注意事项

Ajax 开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应，没有恰当的预读数据，或者对 XMLHTTPRequest 的不恰当处理，都会使用户感到延迟，这是用户不希望看到的，也是他们无法理解的。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。

Ajax 适用场景

1、表单驱动的交互

2、深层次的树的导航

3、快速的用户与用户间的交流响应

4、类似投票、yes/no 等场景

5、对数据进行过滤和操纵相关数据的场景

6、普通的文本输入提示和自动完成的场景

Ajax 不适用场景

1、部分简单的表单

2、搜索

3、基本的导航

4、替换大量的文本

5、对呈现的操纵

Ajax面试必备技能,你都知道吗?