AJAX 重点知识总结

尼古拉斯_大雄
210 阅读9分钟

第一板块

前端访问服务器的几种方式

  1. 直接在浏览器地址栏输入网址url
  2. HTML的a标签的href属性
  3. location.href = 'url'
  4. AJAX

前后端交互流程

  1. 请求(浏览器发起请求，服务器接收)
  2. 处理（服务器处理这个请求）
  3. 响应（服务器响应数据给浏览器） image.png

服务器分类

  1. 数据库服务
  2. 文件服务
  3. 多媒体服务(音视频)
  4. 邮件服务
  5. Web服务

ajax

ajax是什么

  • 描述：让浏览器跟服务器交互的一套API。 它的作用就是可以让浏览器和服务器进行交互。
  • 说人话： ajax 是一种 用于向服务器请求数据的 技术
  • 特点：在不刷新页面的情况下向服务器请求数据
  • 应用：局部刷新

ajax语法：使用内置对象XMLHttpRequest发送ajax请求（重要）

  1. 创建xhr对象
  2. 设置请求方法和地址
  3. 发送请求
  4. 注册响应事件：不是立即执行，而是等服务器响应数据才会执行 image.png

为什么学ajax

  1. 以前我的写的页面全部都是固定的假数据，其实网页的数据都是从服务器获取的，一旦服务器数据变化，网页上的内容也会发生变化
  2. 虽然可以通过在浏览器地址栏直接输入网址（url）的方式向服务器获取数据，但是我们的网页会刷新
  3. 学会ajax：就可以做到在不刷新网页的情况下向服务器请求数据，让网站数据内容动态变化。

get 和 post 区别（HTTP工作原理）

### 传参方式不一样
  1. get请求直接在url传参('url?key=value')
  2. post
  • 需先设置请求头，xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
  • 再在send中写传参(xhr.send('key=value'))

注意

  1. 后台给的img网址有可能会省略前面的域名，需要自己加上

第二板块

axios

描述：

  • 基本使用：res是axios库对响应数据做了一层包装
  • res.data 才是服务器响应的数据，axios库自动把json转js

axios基本语法：

  1. get() : 写url和请求参数
  2. then(res=>{}) : 成功回调， 相当于以前jq的success
  3. catch(err=>{}):失败回调， 一般可以省略不写
  4. then(()=>{}):完成回调， 表示请求完成，无论成功失败都会执行。一般可以省略不写 image.png

axios推荐使用语法（平时就不要用上面那种了）

axios({
    url:'请求路径',
    method:'请求方式',
    data:{ post请求参数 },
    params:{ get请求参数 }
}).then(res=>{
    //成功回调
    //console.log(res)
});

image.png

注意：这里的data和params根据后台要求的是get还是post进行二选一

  • 请求方式为get时用params
  • 请求方式为post时用data

链式语法

image.png

image.png

url路径传参（重要）

  1. 给按钮添加行内js跳转（动态新增按钮不能直接获取，但是可以注册行内事件）
  2. 在url路径的后面拼接参数（页面跳转只由路径决定，参数不影响跳转） 
    <button onclick="location.href='url?id=参数值' "></button>
  3. 在B页面解析location.search参数 
    let id = location.search.split('=')[1]

补充

  1. 动态新增的元素，无法直接注册事件的。解决方案有两种
  • 最常用：事件委托技术
  • 偶尔用：行内式js注册事件（事件处理只有1行代码）
  1. url传参：url跳转只由路径决定，参数不会影响页面跳转（所有一般可以利用url来在当前页面设置参数，在另一个页面获取参数）
  2. 网络请求loading效果
  • 原理：gif动图
  • 显示loading：发送ajax之前
  • 隐藏loading：服务器响应之后

注意

  1. 服务器只传回res中的data数据，其他不是服务器数据
  2. ·location.search() 能拿到网页的参数，并且配合location.search().split('=')[1] 获取目标参数
  3. 利用数据驱动的方式进行数据渲染的思路（比较重要，机器人案例，将自己和服务器数据创建对象并放入数组中，再用map进行数据渲染）

第三板块

拦截器（用的时候去复制就行，不用记住）

作用：拦截 请求+响应（类似保安的作用，在请求开始和结束的时候运行，一般写在script标签的顶部）

执行流程：

  1. axios发送请求
  2. 执行请求拦截器（发送到服务器之前）
  3. 发送给服务器
  4. 服务器响应请求
  5. 执行响应拦截器（then方法之前执行）
  6. 执行axios的then方法 image.png

官网代码——

// 添加请求拦截器

axios.interceptors.request.use(function (config) {

// 在发送请求之前做些什么

return config;

}, function (error) {

// 对请求错误做些什么

return Promise.reject(error);

});

// 添加响应拦截器

axios.interceptors.response.use(function (response) {

// 对响应数据做点什么

return response;

}, function (error) {

// 对响应错误做点什么

return Promise.reject(error);

});

基地址

描述：可以在最前面加基地址，在每次的get或post请求中只需要补齐后一段url，比如/api/getbooks，如果在请求中书写了完整的地址，则基地址不生效

axios.defaults.baseURL = 'http://www.liulongbin.top:3006';

异步

  • 同步：按照顺序从上往下依次执行
  • 异步：不会立即执行，而是过一会儿执行
    • ECMAScript只有两个语法是异步：定时器 +ajax
    • 事件也是异步的，只是事件属于dom语法，一般讨论同步异步不包含事件

补充

  1. XHR对象的请求状态码 image.png
//(1)实例化ajax对象
let xhr = new XMLHttpRequest()

image.png

注意：状态码有0，1，2，3，4 其中234都在xhr.onreadystatechange事件中

get与post区别（面试）

image.png

注意：get是一次性传输，post切分成很多分传输

注意

  1. 注意这里的Object.values(data)，利用Object对象的values方法实现提取对象当中的所有属性值，并且将所有属性值放到一个数组中，进而使用some进行非空判断（当然用Object对象的key方法提取对象当中所有属性名）
// 利用some对象进行非空判断,data为对象

if(Object.values(data).some(item=>item=='')){

return console.log('请输入有效信息');

}
  1. 思路：利用布尔类型转化实现非空判断，第一种为标准写法，第二种其中的!item（意思为：当item为空字符串时，表达式为true）

image.png

  1. 在书写逻辑较为复杂，代码较多的页面时，一般写在script标签的顶部，将函数排序写在上面，页面逻辑代码写在下面

  2. 自定义属性一般用在删除订单时，给商品设置自定义属性，点击哪个按钮就给服务器传递哪个商品的自定义属性

第四板块

ajax工作原理

  • 浏览器请求 必须是：请求报文
  • 服务器响应 必须是：响应报文 image.png
  1. HTTP : 网络传输协议
  • 协议 ： 约定 数据传输格式
  1. HTTP协议组成部分
  • 请求报文
  • 响应报文
  1. 请求报文三个组成部分
  • 请求行 ： 包含请求方法, URL, 协议版本
  • 请求头 ： 浏览器告诉服务器，我给的数据是什么格式 （content-type在请求头中）
  • 请求体 ： post请求参数在请求体中
  1. 响应报文三个组成部分
    1. 响应行 ： 包含协议版本, 状态码, 状态码描述
    • 2开头 ： 请求成功 200
    • 3开头 ： 重定向 302（服务器直接篡改浏览器地址，一般用来处理输入错误的情况）
    • 4开头 ： 前端问题 400参数错误 401/402/403 没有权限 404 url错误 413 传递的文件过大
    • 5开头 ： 后台问题 500 服务器bug,可以理解为后台java代码爆红
    1. 响应头 ： 浏览器告诉服务器，我给你的数据是什么格式 （浏览器会自动识别）
    2. 响应体 ： 后台响应的数据，一般是json格式
  2. ajax原理： 设置http请求报文的过程

image.png

  • 请求报文 image.png
  • 响应报文 image.png

网页从输入url到呈现过程（从1-5）

  1. DNS域名解析： 将url中的域名解析成ip地址

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

  • 什么是TCP：一种传输控制协议
  • TCP作用：保证HTTP网络传输是 安全 + 可靠的（检测客户端与服务器的网卡是不是通的）
  • TCP三次握手：
    • 第一次：浏览器->服务器（确定浏览器的发送+服务器的接收）
    • 第二次：服务器->浏览器（确定服务器的发送）
    • 第三次：浏览器->服务器（确定浏览器的接收） image.png
  1. HTTP建立连接
  • 客户端发送请求
  • 服务器处理请求
  • 服务器响应请求
  1. 服务器响应数据之后，渲染引擎开始渲染DOM树
    1. 解析html生成：dom树
    2. 解析css生成：样式树
    3. dom树 与 样式树 合并得到渲染树
    4. 呈现页面 image.png
  2. 断开连接

过程：DNS解析 -> TCP握手 -> HTTP向后台拿数据 -> 渲染浏览器 -> 断开连接

文件上传

  1. 给file表单注册onchange事件
  • 当用户选择图片之后执行
  1. 获取用户选择的图片
  • this.files[0]
  1. 创建FormData对象
  • 只有FormData才可以上传文件
  1. 将图片添加到FormData对象中
  • fd.append('参数名', this.files[0])
  1. 发送ajax请求
  • 文件上传请求方法一定是post, 且请求参数为FormData对象

image.png

描述：对文件按钮注册onchange事件，创建FormDate对象，将this.files[0]作为属性值，放入对象中，将对象作为参数放入post请求参数中，以此得到文件的信息

注意：

  1. file表单，默认自带点击事件，作用是选择文件
  2. 上传文件必须要使用原生内置的FormData对象
  3. file表单有一个特殊的事件onchange事件，选择了文件才会触发事件

点击自定义按钮

两种方式：

  1. 将label标签的for属性与input标签id属性绑定，可以实现点击图片上传文件的功能 image.png

  2. 对目标元素绑定点击事件，然后利用dom对象.click()触发上传按钮，实现点击图片上传文件的功能 image.png

补充

  • dom对象.onclick()：只能触发注册的点击事件，没有注册则无法触发
  • dom对象.click()：会触发标签的默认点击事件（a标签、form按钮、file表单）

文件预览的四个固定步骤（就是file表单按钮选到图片能看到）

image.png

防抖

image.png

注意：这里的箭头函数，能够使其中的this指向注册点击事件的标签，如果是function函数，那么就会指向window

防抖思路：减少服务器压力，设置定时器，每次触发事件时，只要在上一次事件的定时器时间内，就先清除定时器，再重新开启新的定时器。

节流

image.png

注意：其中null在计算中隐式转换成了0，空字符串也能转为0，但字符串为NaN

注意

  1. tcp是检测设备硬件是否存在问题（检测发送和接收网口是否起作用）
  2. 拿到当前时间的时间戳Date.now()或者+new Date()
avatar
文章
阅读
粉丝