ajax相关

-------------------------------------------
ajax无跳转刷新

访问后台的几种方式
1.直接在地址栏输入url
2.a.href
3.location.href

API（Application programming interface）和API文档

XMLHttpRequest
.open()        设置请求方式和地址  请求方式, url
.onload(){}  请求成功的回调 
.send()

执行顺序send之后执行onload

get方式传值 
url地址?key=value&key=value

post方式传值 
new XMLHttpRequest()
.open()        设置请求方式和地址  请求方式, url
.setRequestHeader('Content-Type','application/x-www-form-urlencoded') 表单提交
//onload 是非标准的w3c的方法，火狐做的，现在大多数浏览器支持了
//标准的方法是.onreadystatechange()
.onload = function(){}  请求成功的回调 
.send(`${username}&${password}`)

-------------------------------------------
导入axios
axios get

语法1
axios.get('url?key1=value1&key2=value2')
.then(res => {})
.catch(err => {})

语法2
axios.get('url',{
params:{
num:8,
key1:value1,
key2:value2
}
})
.then(res => {})
.catch(err => {})

axios的基本配置
axios({
method:
url:
//get请求参数
//params:{}
//post请求参数
//data:{}
})
.then()
.catch()

链式编程 在方法中返回该对象

-------------------------------------------

拦截器
axios.interceptors.request.use(function(config){
return config
},
function(err){
return Promise.reject(err)
})

axios.interceptors.response.use(function(config){
return config
},
function(err){
return Promise.reject(err)
})

基地址
axios.defaults.baseURL
axios中url如果没有 写基地址 则用这个axios.default.baseURL
axios中url如果写了基地址 则用自己的

readystate
0 未open
1 已open
2 已send
3 下载数据中
4 数据下载完毕

XMLHttpRequest.onreadystatechange = function(){
if(xhr.readystate == 4)
console.log(xhr.response)
}

ajax Asynchronous Javascript And XML (异步JavaScript和XML)

xml就是一个保存数据的格式
现在基本不用，现在都用json，json更优秀.

XML数据里面包含很多双标签

json更优秀.（
1. 不用双标签，用键值对，所以体积更小
2.可以转成json对象，方便操作数据）

get 与 post区别
1.传参方式不同
get请求传递的参数是在url地址上拼接
post请求传递参数是在请求体中

2.传参的大小不同
get传参的大小 2-5M
post传参的大小 一般情况下没有限制

3.传参的速度不同
get相对post快一点
post会分块传

4.安全性不同
get传参的安全性不高
post相对于get安全性更高

5.获取数据使用get
提交数据使用post

POST             向服务器新增数据
GET             从服务器获取数据
DELETE             删除服务器上的数据
PUT             更新服务器上的数据 侧重于完整更新：例如更新用户的完整信息
PATCH             更新服务器上的数据 侧重于部分更新：例如值更新用户的手机号
-------------------------------------------
头像预览
input添加onchange事件
获取图片 this.files[0]
创建预览url URL.createObjectURL

自定义‘选择图片’按钮
使用label包裹一个img，点击img后label的for去触发‘选择图片’按钮，input设置display:none

接口带文件使用FormData
1.1 input较少
let fd = new FormData()
fd.append()

1.2 input较多
let fd = new FormData(document.querySelector('form'))

FormData
可以自动获取form表单中所有的input的值

防抖：单位事件内，频繁触发一个事件，以最后一次为主（防抖函数  一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效）
应用场景：输入框输入事件
流程：声明一个全局变量，记录计时器id
每一次交互的时候先清空原来的计时器，再重新生成一个计时器

节流：单位时间内，频繁的触发事件，单位事件内只触发一次
场景：解决高频事件（鼠标移动，滚动条滚动）
流程：节流阀

域名解析 由运营商提供DNS服务器（移动、电信、联通）将域名转为ip

url输入后 按下回车
1.DNS解析, 将域名解析成IP地址
2.TCP连接: TCP三次握手
3.发送HTTP请求
4.服务器处理请求并返回HTTP报文
5.浏览器解析渲染页面
6.断开连接: TCP四次挥手

深拷贝
1.先转为字符串 再转为对象
JSON.stringfy(obj)
JSON.parse(obj)
缺点：不可以拷贝null undefined Function等

2.递归