2. ajax

1.同源策略

1.1 同源:

协议(http//),域名,端口(默认80)都一致

1.2 跨域:

协议,域名,端口有一个或多个不一致

网页：http://www.test.com/index.html

接口：http://www.api.com/userlist

1.3 同源策略:

非同源的网站之间,不允许进行资源交互

1.4 跨域请求拦截:

浏览器对服务器的跨域请求可以正常发起,跨域响应回来的数据,因同源策略关系被浏览器拦截,获取不到

1.5如何实现跨域请求:

JSONP 和 CORS。

2.JSONP (只支持get请求):

1.1 概念 理解: 

解决跨域数据访问问题,是js的脚本 不是ajax

script src 不是一个ajax请求,实现跨域请求数据

发送请求时指定回调函数的名字,响应的数据是一个函数的调用,调用函数时会传入数据

1.2代码实例:

①定义success回调函数:
 <script>
     function success(data) {
     console.log('获取到了data数据：')
     console.log(data)
     }
 </script>



②通过<script>标签,请求接口数据:

<script 
src="http://ajax.frontend.itheima.net:3006/api/jsonpcallback=success&name=zs&a
ge=20">
// 根据指定的callback的函数名 不能写成固定的引入js
</script>

1.3使用 jq发起jsonp请求

    <script>
      $(function () {
        $.ajax({
          url: 'http://www.liulongbin.top:3006/api/jsonp?&name=a&age=30', //这是后端写好的接口我们直接调用
          dataType: 'jsonp',
          jsonp: 'callback',
          jsonpCallback: 'success',
          success: function (res) {
            console.log(res)
          },
        })
      })
    </script>

3 防抖和节流区别

① 防抖:

只有最有一次触发生效！

• 应用:输入框

② 节流:

减少事件触发的频率,选择性地执行一部分事件！

• 应用:懒加载:计算滚动事件的位置, 鼠标连续点击事件