原生AJAX1.ajax技术:可以在网页不跳转的情况下 向服务器发送请求 应用:局部刷新 2.ajax语法:使用内置对象XMLHttpRequst 请求方法get和post区别： 传参方式不同 get请求： 直接在url后面拼接参数 * 参数在url中，安全性不高 post请求： 1.需要设置请求头（固定语法）：xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded') * 注意：这是固定格式，错一个字母都不行，强烈建议复制粘贴 2.使用xhr的send方法发送参数： xhr.send('参数名=参数值'); * 注意：不要加前面的? get请求参数//(1)创建XMLHttpRequest对象(小黄人) const xhr = new XMLHttpRequest() //(2)设置请求方法和地址 xhr.open('get', 'https://autumnfish.cn/api/joke') //(3)发送请求 xhr.send() //(4)注册响应回调事件 /* 这个事件不是立即执行,而是过一会执行. 取决于很多因素:带宽 天气 服务器 网络运营商 */ xhr.onload = function () { console.log(xhr.responseText); }post请求//(1).实例化ajax对象 let xhr = new XMLHttpRequest() //(2).设置请求方法和地址 xhr.open('post', 'https://autumnfish.cn/api/user/register') //(3).设置请求头（post请求才需要设置） xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded') //(4).发送请求 ： 参数格式 'key=value' xhr.send('key=value') //(5).注册回调函数 xhr.onload = function () { console.log(xhr.responseText) } ajax工作原理http协议 : 网络传输协议* 协议 : 规定网络数据传输格式 http协议组成 : 请求报文 + 响应报文* 浏览器发请求 必须是 ： 请求报文 * 服务器响应 必须是 ： 响应报文 请求报文 由三部分组成3.1 请求行 : 请求方法 + 请求地址 3.2 请求头 : 浏览器告诉服务器,我发送给你的数据是什么格式 (文本、json、图片、音视频等等) 3.3 请求体 : 请求参数 响应报文 由三部分组成4.1 响应行 : 服务器状态码、 服务器地址等2xx : 请求成功 200:成功 3xx : 重定向 302 服务端重定向(服务器主动修改浏览器网址) 4xx : 前端的问题 404 : url错误 400: 参数错误 403/402 : 没有权限 405：请求方法错误 5xx : 服务器的问题 500 服务器挂了(后台java代码像js一样爆红了)4.2 响应头 : 服务器告诉浏览器，我响应给你的数据是什么格式 (文本、json、图片、音视频等等) 4.3 响应体 : 服务器响应数据 5.ajax原理 ： 发送请求报文过程* 给服务器发请求，其实发的就是请求报文 从网页输入url到呈现过程 1.DNS解析 : 把域名解析成ip地址 2.TCP连接三次握手 : 建立 安全可靠的传输协议 2.1 什么是TCP : 一种 传输控制协议 2.2 TCP作用 : 保证HTTP网络传输是 安全 + 可靠的 （检测客户端 与 服务器的网卡是不是通的） 2.3 TCP三次握手 : 第一次: 浏览器 -> 服务器 (你能听到我说话吗?,检测浏览器:发送) 第二次: 服务器 -> 浏览器 (我听到了,你能听到我说话吗。 检测浏服务器: 接收 + 发送) 第三次: 浏览器 -> 服务器 (嗯,我听到了. 检测浏览器: 接收) 3.HTTP请求 : 网络传输协议 3.1 浏览器发送请求 3.2 服务器处理请求 3.3 服务器响应请求 4.服务器响应数据之后,渲染引擎开始渲染页面 4.1 解析html生成：dom树 4.2 解析css生成：样式树 4.3 dom树 与 样式树 合并得到 渲染树 4.4 呈现页面 AXIOS框架axios语法 : axios .get('url') .then( res=>{ //请求成功 } ) .catch( err=>{ //请求错误} ) .then( ()=>{ //请求完成 } )axios基本使用//基本使用 document.querySelector('.btn1').onclick = function() { axios({ url: "https://autumnfish.cn/api/joke/list?num=10", method: "get" }).then(res => { console.log(res) }) } //get请求 document.querySelector('.btn2').onclick = function() { axios({ url: `https://autumnfish.cn/api/joke/list`, method: "get", params:{ num:10 } }).then(res => { console.log(res) }) } //post请求 document.querySelector('.btn3').onclick = function() { axios({ url: "http://www.liulongbin.top:3009/api/login", method: "post", data: { username: "admin", password: "123456" } }).then(res => { console.log(res) }) }第三钟写法axios({ url:'请求路径', method:'get', data: { 'post请求参数'}, params: { 'get请求参数'}}).then(res=>{ //成功回调 console.log(res)})js链式语法/* 1.链式语法 : 对象可以连续调用方法 axios.get().then().catch() 2.链式语法底层原理 : 在对象的方法中返回自身 */ let obj = { name:'张三', age:20, sex:'男' } //给对象添加方法 obj.setName = function(str){ this.name = str return this } obj.setAge = function(num){ this.age = num return this } obj.setSex = function(str){ this.sex = str return this } //调用方法 obj .setName('李四') .setAge(22) .setSex('女') console.log( obj )查询参数和请求体查询参数 get delete (params)请求体 post put patch (data)FormData 对象/*文件上传 1.前置知识点 1.1 file表单, 默认自带点击事件，作用是选择文件 1.2 上传文件‘必须’要使用原生内置的FormData对象 (1)文件需要设置单独的请求头 : multipart/form-data (2)文件以二进制方式传输（文本是utf8编码，但是文件不是） 1.3 file表单有一个特殊的事件onchange事件 ： 用户选择了文件就会执行 2.文件上传流程 2.1 在file表单的onchange事件中获取用户选择的图片 this.files[0] 2.2 创建FormData对象,将图片添加到fd对象中 let fd = new FormData() fd.append('接口参数',文件数据) 2.3 ajax发送请求 : 参数必须是formdata对象 */ onreadystatechangeXMLHttpRequest对象的两个事件 + xhr对象的请求状态 1. onload事件 : 服务器响应之后执行 ( 一次请求,只会执行一次 ) 2. onreadystatechange事件 : xhr请求状态变化会执行 ( 一次请求，会执行多次 ) 0: 请求未初始化 (open之前) 1: 服务器连接已建立 (open之后) 2: 请求已接收 ( 服务器已经收到你的请求 ) 3: 请求处理中 ( 服务器正在处理你的请求 ) 4: 请求已完成，且响应已就绪 ( 服务器完成响应, onload事件就是在这里执行 )let xhr = new XMLHttpRequest() //请求未初始化 console.log( xhr.readyState )//0 //(2).设置请求方法和地址(请求行) xhr.open('post', 'http://www.liulongbin.top:3009/api/login') //服务器连接已建立 console.log( xhr.readyState )//1 //(3).设置请求头（post请求才需要设置） xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded') //(4).发送请求 ： 参数格式 'key=value' xhr.send('username=admin&password=123456') //(5).注册回调函数 xhr.onreadystatechange = function () { console.log( xhr.readyState )//2 3 4 //当readyState为4,表示响应数据了 if( xhr.readyState == 4 ){ console.log( xhr.response ) } } axios拦截器1.axios拦截器作用 : 拦截 请求 + 响应 2.axios拦截器执行流程 2.1 axios发送请求 2.2 执行请求拦截器 (发送服务器之前执行) 2.3 发送给服务器 2.4 服务器响应请求 2.5 执行响应拦截器 (then方法之前执行) 2.6 执行axios的then方法 // 添加请求拦截器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);});函数防抖 1.函数防抖 : 单位时间内，频繁触发一个事件， 以'最后一次'触发为准 2.防抖应用场景: 输入框输入事件 3.防抖流程 : 3.1 声明一个全局变量存储定时器ID 3.2 每一次触发交互的时候，先清除上一次定时器。 然后把本次事件处理代码放入定时器中let timeID = null //输入框输入事件 document.querySelector('input').oninput = function(){ //1.先清除之前的定时器 clearTimeout(timeID) //2.开启本次定时器 timeID = setTimeout(()=>{ //function函数： this->window //箭头函数 this->上级this 表单 console.log(`发送ajax,搜索内容是${this.value}`) },500) } 函数节流1.函数节流 : 单位时间内，频繁触发一个事件， 只会触发一次 2.节流场景 : 解决高频事件 （滚动条事件高频触发） 3.节流实现: 3.1 声明一个全局变量存储触发时间 let lastTime = null 3.2 每一次触发事件，获取当前时间 let currentTime = Date.now() 3.3 判断 当前时间 与 上一次触发时间，是否超过间隔 currentTime-lastTime>=500 3.4 如果超过触发间隔，则执行事件处理代码。 然后存储本次触发事件 lastTime = currentTime //声明一个全局变量存储触发时间 let lastTime = null window.onscroll = function(){ //1.每一次触发，先获取本次时间戳 let currentTime = Date.now() //2.判断当前时间 与 上一次触发时间 是否超过间隔 if( currentTime - lastTime >= 500 ){ console.log( document.documentElement.scrollTop) //3.存储本次触发时间 lastTime = currentTime } }防抖---王者荣耀回城 节流---王者荣耀释放技能