ajax第四天笔记

1.jquery 上传文件

 $.ajax({
                    method: 'POST',
                    url: 'http://www.liulongbin.top:3006/api/upload/avatar',
                    data: fd,
                    contentType: false,
                    processData: false,
                    success: function (res) {
                        console.log(res);
                    },
                });

注意：在$.ajax({})配置项里需要加contentType: false processData: false 两行代码

用$(document).ajaxStart()和$(document).ajaxStop() 可以监听ajax开始和结束事件

2.axios请求（重点）

 document
                .querySelector('#btn1')
                .addEventListener('click', function () {
                    var url = 'http://www.liulongbin.top:3006/api/get';
                    var data = { name: 'ls', age: 20 };
                    axios.get(url, data).then(function (res) {
                        console.log(res.data);
                    });
                });

在点击事件中，通过axios语法axios.get(url, data).then(function (res) { console.log(res)})发起axios请求;

1.axios get请求：axios.get('url', { params: { /参数/ } }).then(callback)

2.axios post请求：axios.post('url', { /参数/ }).then(callback)

3.直接使用axios发起请求：

发起get请求

 document
                .querySelector('#btn3')
                .addEventListener('click', function () {
                    axios({
                        method: 'GET',
                        url: 'http://www.liulongbin.top:3006/api/get',
                        data: {
                            name: 'zs',
                            age: 22,
                        },
                    }).then(function (res) {
                        console.log(res.data);
                    });
                });

发起post请求

document
                .querySelector('#btn4')
                .addEventListener('click', function () {
                    axios({
                        method: 'POST',
                        url: 'http://www.liulongbin.top:3006/api/post',
                        data: {
                            name: 'zs',
                            age: 2222,
                        },
                    }).then(function (res) {
                        console.log(res.data);
                    });
                });

3.同源与跨域

1.定义：协议，地址，端口都相同的即为同源，否则即是跨域

2.跨域：不同源的情况下ajax请求会被浏览器的同源策略所拦截，无法使用数据，所以要解决跨域的问题

3.跨域解决方法：

• jsonp 临时想出的解决方法，只支持get请求，

• CORS: 支持get和post两种请求方式，但存在兼容性问题

• 后端可以添加白名单，我们之前的ajax请求其实也有跨域的问题，是通过后端添加白名单解决的

4.jsonp跨域原理：

script标签请求外部资源没有跨域问题，通过客户端定义函数的声明，服务端调用这个定义的函数，

利用src属性请求服务端JS文件

5.jquery发起jsonp请求：添加配置项: dataType: 'jsonp'

4.防抖与节流

1、防抖

概念：短时间内的多次事件触发是没必要的，通过定时器，让短时间内的一系列会触发多次的事件

最终只执行最后一次，在定时器所规定的时间内再次触发会重新计时

使用场景：搜索栏防抖 浏览器大小的调整

好处：节省了不必要的资源请求，减轻服务器等的压力

2.节流

概念：单位时间内多次触发的事件只执行一次，

使用场景：轮播图 懒加载

好处：降低计算频率，减轻cpu负荷