跨域、防抖、节流

1.同源：就是两个url的协议、域名、端口一致，反之，就是跨域；
2.出现跨域的原因：浏览器的同源策略不允许非同源的url之间进行资源交互。
3.同源策略：是两个url的协议、域名、端口不一致，就会阻止数据的接收；
4.浏览器对跨域请求的拦截：

如何实现跨域请求

1.JSONP:只支持get请求，不支持post，前端
2.CORS：支持get和post，缺点不支持底版浏览器；后端已经解决好的

JSONP实现原理

通过

  function abc(obj) {
      console.log(obj);
      console.log('abc被调用了');
    }
  </script>
  <script src="https://suggest.taobao.com/sug?q=a&callback=abc"></script>

jquery中的JSONP

记得引入jquery.js文件

  $.ajax({
          url: 'https://suggest.taobao.com/sug?q=a&callback=abc',//传参的话，以？形式添加；
          dataType: 'jsonp',//将ajax请求转换成jsonp请求；
          success: function (res) {
            console.log(res);
          }
        })

1.自定义服务端参数名称：
jsonp：‘callback’,

  $.ajax({
          url: 'https://suggest.taobao.com/sug?q=a&callback=abc',//传参的话，以？形式添加；
          dataType: 'jsonp',//将ajax请求转换成jsonp请求；
          jsonp：'callback';
          success: function (res) {
            console.log(res);
          }
        })

2.自定义回调函数名称：
jsonpCallback：’abc’;

  $.ajax({
          url: 'https://suggest.taobao.com/sug?q=a&callback=abc',//传参的话，以？形式添加；
          dataType: 'jsonp',//将ajax请求转换成jsonp请求；
          jsonp：'callback';//自定义回调函数名称
          jsonpCallback：'abc';//自定义服务端参数名称：
          success: function (res) {
            console.log(res);
          }
        })

输入框的防抖

1.防抖策略：是事件被触发后，延迟n秒后在执行回调，如果在这n秒内事件被触发，则重新计时。

var item = null;
        var bun = document.querySelector('button');
        bun.onclick = function () {
            clearTimeout(item)
            item = setTimeout(function () {
                alert(1111)
            }, 200)
        }

节流

先定义一个节流阀
再定义一个定时器

var bun = document.querySelector('button');
        var flag = true;
        bun.onclick = function () {
            if (flag) {
                flag = false;
                setTimeout(function () {
                    flag = true;
                }, 1000)
                console.log(111111);
            }
        }