这是我参与「第五届青训营」伴学笔记创作活动的第 12 天

跨域和JSONP

同源策略

如果两个页面的协议、域名和端口都相同，则两个页面具有相同的源（任何一个不同则是跨域）

同源策略：是浏览器提供的一个安全功能，限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互（A网站的javascript，不允许和非同源的C网站之间进行资源交互）

无法读取非同源网页的Cookie、LocalStorage和IndexedDB
无法接触非同源网页的DOM
无法向非同源地址发送Ajax请求

跨域数据请求

JSONP ：兼容性好；只支持GET请求
CORS ：是跨域ajax请求的根本解决方案，支持GET和POST请求；不兼容某些低版本浏览器

CORS跨源资源共享

在默认情况下，xhr只能访问与发起请求的页面在同一个域内的资源
cors定义了浏览器和服务器如何实现跨源通信
对于简单的请求，在发送请求时会有一个额外的头部Origin

Origin:www.nczonline.net

如果服务器决定响应请求，那么该发送Access-Control-Allow-Origin头部

Access-Control-Allow-Origin:www.nczonline.net

图片探测

利用img标签src属性
拿不到任何数据，只能通过监听onload和onerror事件知道什么时候接收响应
缺点：只能发送GET请求、无法获取服务器响应的内容

JSONP实现原理

由于浏览器同源策略的限制，网页中无法通过Ajax请求非同源的接口数据
但是

所以JSONP的实现原理：就是通过script标签src属性，通过函数调用的形式，接收跨域请求响应的数据

jQuery中提供的$.ajax（）函数，不仅能发起ajax请求，还可以发起JSONP数据请求

默认情况下，使用jQuery发起JSONP请求，会自动携带callback=jQueryxxx的参数（随机生成的回调函数名字）

在发起jsonp请求的时候，动态向中append一个script标签
在jsonp请求成功以后，动态移除刚添加的script标签

        $.ajax({
          url: "http://www.liulongbin.top:3006/api/jsonp?name=ls&age=30",
          // 代表我们发起的是jsonp请求，非ajax请求
          dataType: "jsonp",
          success: function (res) {
            console.log(res);
          },
        });

 http://www.liulongbin.top:3006/api/jsonp?name=ls&age=30&callback=jQuery360028652225697760847_1651734336799&_=1651734336800


        $.ajax({
          url: "http://www.liulongbin.top:3006/api/jsonp?name=ls&age=30",
          // 代表我们发起的是jsonp请求，非ajax请求
          dataType: "jsonp",
        //   发送到服务器的参数名称    默认callback
          jsonp: "callback",
        //   自定义回调函数的名称   默认jQueryxxx
          jsonpCallback: "abc",
          success: function (res) {
            console.log(res);
          },
        });

http://www.liulongbin.top:3006/api/jsonp?name=ls&age=30&callback=abc&_=1651734567327

防抖和节流

防抖：延迟请求，每次发起请求都等到一定延迟时间后再请求，在此期间如果再次发起请求，会重新计时延迟时间（只有最后一次生效）
节流：减少一段时间内事件的触发频率，如果在一段时间内再次触发，不会被执行

节流阀 flag=true or false控制

网络请求资源5 | 青训营笔记