原生AJAX
1.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对象
*/
onreadystatechange
XMLHttpRequest对象的两个事件 + 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
}
}防抖---王者荣耀回城 节流---王者荣耀释放技能
最新回复