前后端交互流程
1. 了解服务器
提供某种服务的机器(计算机)
- 谷歌 web服务器
- 爱奇艺 视频服务器
- qq邮箱 邮件服务器
- 迅雷 文件服务器
- qq音乐 音频服务器
2. 了解前端 访问 服务器的几种方式
- 直接在地址栏输入网址
- a标签的href属性
- location.href = 'url'
- AJAX(页面不会跳转)
3. 了解什么是ajax
(1) ajax技术 : 在网页不跳转的情况下 向服务器请求数据
(2）ajax应用场景： 局部刷新
4. 前后端交互三个流程
(1) 请求(前端)
(2) 处理(后端)
(3) 响应(后端)
ajax的工作原理
1.ajax工作流程
(1)创建xhr对象
let xhr = new XMLHttpRequest()
(2)设置请求方法和地址
xhr.open('请求方法','请求地址')
(3)发送请求
xhr.send()
(4)注册响应事件
xhr.onload = function(){}
2. xhr对象的请求状态
- 0: 请求未初始化 (open之前)
- 1: 服务器连接已建立 (open之后)
- 2: 请求已接收 ( 服务器已经收到你的请求 )
- 3: 请求处理中 ( 服务器正在处理你的请求 )
- 4: 请求已完成，且响应已就绪 ( 服务器完成响应, onload事件就是在这里执行 )
3.ajax组成部分 (A J A X)
Ajax(阿贾克斯)：全称 Asynchronous Javascript And XML(异步的js与xml)
用js发送异步的网络请求
- A : Asynchronous 异步
- 同步 ： 指的是代码按照从上往下顺序执行
- 异步 ： 代码不会立即执行,而是要等一会儿执行
目前我们学过的ECMAScript只有两个语法是异步的： 定时器 与 ajax
DOM事件也是属于异步的，但是这个是属于DOM的执行机制。所以一般在讨论js同步和异步的时候，主要以js为主，DOM一般不讨论。
- J：Javascript
- A ：And
- X : XML 与 XMLHttpRequest
- XML ： 解决跨平台数据传输。
- 在JSON没有出来以前, 网络传输主要以XML格式数据为主。 后来JSON问世，逐渐取代XML。
HTTP工作原理(常见面试点)
1. get与post区别
(1)传参方式不同
get请求直接在url传参
'url?key=value'
post在请求体传参
xhr.send('key=value')
xhr.setReauestHeader('Content-type','application/x-www-form-urlencoded')
(2)数据大小不同
* get有大小限制, 一般 2-5 MB
* post没有大小限制 (文件上传)
(3)传输速度不同
* get传输速度快
* post传输速度慢
(4)安全性不同
* get安全性低
* post安全性高 (登录、注册必须是post请求)
2. put与patch区别
- put: 全局更新
- patch: 局部更新
3.HTTP原理 : 网络传输协议
发送请求 ： 请求报文
请求行
请求地址 + 请求方法
请求头
浏览器告诉服务器，发给你的数据是什么格式
Content-type: application/x-www-form-urlencoded
请求体
请求参数
响应请求： 响应报文
响应行
响应状态码
2xx : 成功
200成功
3xx : 重定向
302 重定向
4xx : 前端问题
400参数错误 403没有权限 404 路径错误 413文件超过最大限制
5xx : 服务器问题
500服务器内部错误
服务器ip地址
响应头
服务器告诉浏览器，发给你的数据是什么格式
Content-Type: application/json; charset=utf-8
响应体
响应数据
4. 发送ajax原理：
发送请求报文
5. 网页从输入url到渲染的流程
1. DNS解析
域名解析成ip
2. TCP三次握手
保证数据传输的 安全 + 可靠
3.HTTP连接
请求
处理
响应
4.渲染引擎渲染返回的HTML文件
6.函数防抖和节流
防抖
单位时间内，频繁触发事件。 以最后一次为准
应用： 输入框输入事件
流程 ：
节流
单位时间内，频繁触发事件。只触发一次
应用：解决高频事件（ 滚动条事件 ）
流程 ：
