AJAX | 跨域与JSONP + 同源策略和跨域 + JSONP + 防抖和节流 + 案例 – 淘宝搜索

目录

同源策略和跨域

同源策略

跨域

JSONP

JSONP的实现原理

自己实现一个简单的JSONP

JSONP的缺点

jQuery中的JSONP

自定义参数及回调函数名称

jQuery中JSONP的实现过程

案例 – 淘宝搜索

获取用户输入的搜索关键词

封装getSuggestList函数

渲染建议列表的UI结构

搜索关键词为空时隐藏搜索建议列表

全部代码：

防抖

输入框的防抖

缓存搜索的建议列表

节流

节流的应用场景

节流案例 – 鼠标跟随效果

防抖和节流的区别

---

同源策略和跨域

同源策略

• 如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。

例如，下表给出了相对于 http://www.test.com/index.html 页面的同源检测：

• 端口号没有写的话 默认  80

URL	是否同源	原因
http://www.test.com/other.html	是	同源（协议、域名、端口相同）
https://www.test.com/about.html	否	协议不同（http 与 https）
http://blog.test.com/movie.html	否	域名不同（www.test.com 与 blog.test.com）
http://www.test.com:7001/home.html	否	端口不同（默认的 80 端口与 7001 端口）
http://www.test.com:80/main.html	是	同源（协议、域名、端口相同）

• 同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。

MDN 官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如：

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

跨域

• 同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域。
• 出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。

以下两个域名不一样，无法进行资源的交互

• 网页：http://www.test.com/index.html
• 接口：http://www.api.com/userlist

浏览器对跨域请求的拦截

• 注意：浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截，无法被页面获取到！

如何实现跨域数据请求

• 现如今，实现跨域数据请求，最主要的两种解决方案，分别是 JSONP 和 CORS。
• JSONP：出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持 GET 请求，不支持 POST 请求。
• CORS：出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器。

---

JSONP

• JSONP (JSON with Padding) 是 JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

JSONP的实现原理

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

  通过

  JSONP的缺点

  • 由于 JSONP 是通过

    

    自定义参数及回调函数名称

    • 在使用 jQuery 发起 JSONP 请求时，如果想要自定义 JSONP 的参数以及回调函数名称，可以通过如下两个参数来指定

    

    // 发送到服务端的参数名称，默认值为 callback    

    jsonp: 'callback',      一般不改这个，就默认叫callback

    // 自定义的回调函数名称，默认值为 jQueryxxx 格式    

    jsonpCallback: 'abc',

    

            $(function () {
                // 发起JSONP请求
                $.ajax({
                    url: 'http:/www.liulongbin.top:3006/api/jsonp?name=zs&age=20',
                    // 代表我们要发起jsonp的数据请求
                    dataType: 'jsonp',
                    jsonp: 'abc',
                    jsonpCallback: 'HAHAHA',
                    success: function (res) {
                        console.log(res);
                    }
                })
            })
    

    jQuery中JSONP的实现过程

    • jQuery 中的 JSONP，也是通过

      ---

      案例 – 淘宝搜索

      获取用户输入的搜索关键词

      为了获取到用户每次按下键盘输入的内容，需要监听输入框的 keyup 事件(每次弹起的时候触发)

            // 为输入框绑定 keyup()事件  每次键盘弹起的时候触发事件
            $("#ipt").on("keyup", function () {
              // 获取输入框的val值 然后去除两边的空格
              var keywords = $(this).val().trim();
              if (keywords.length <= 0) {
                return;
              }
      
              // TODO:获取搜索建议列表
              console.log(keywords);
            });
      

      封装getSuggestList函数

      将获取搜索建议列表的代码，封装到 getSuggestList 函数中

          // 获取搜索建议列表 的函数
          function getSuggestList(kw) {  // kw是用户搜索的关键字
            $.ajax({
              url: 'https://suggest.taobao.com/sug?q=' + kw, // q 就是淘宝中用户搜索的关键字
              // 指定要发起的是 JSONP 请求
              dataType: 'jsonp',
              // 成功的回调函数
              success: function (res) {
                console.log(res);
              }
            })
          }
      

      渲染建议列表的UI结构

      1. 导入模板引擎

      2. 定义模板结构

      

      

       

       3. 定义渲染模板结构的函数

          // 渲染UI结构
          function renderSuggestList(res) {
            // 如果没有需要渲染的数据，则直接 return
            if (res.result.length <= 0) {
              // 清空并隐藏掉
              return $('#suggest-list').empty().hide();
            }
            // 调用模板引擎 template('引用的模板id', 要渲染的数据)
            var htmlStr = template('tpl-suggestList', res);
            // 渲染html结构
            $('#suggest-list').html(htmlStr).show();
          }
      

      搜索关键词为空时隐藏搜索建议列表

              if (keywords.length <= 0) {
                // 清空并隐藏列表
                return $('#suggest-list').empty().hide();
              }
      

      全部代码：

      ---

      防抖

      输入框的防抖

      • 防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。事件被频繁触发的时候，事件只能被执行一次，提高浏览器的性能

      比如王者荣耀回城，当你开始回城的时候，会等大约六秒之后再回城，如果在这几秒内事件又被触发，就会停止回城，重新给回城计时

      • 用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；

      

       当用户再次触发输入框事件的时候，清除掉timer（定时器）

       var timer = null                    // 1. 防抖动的 timer
      
       function debounceSearch(keywords) { // 2. 定义防抖的函数
          timer = setTimeout(function() {
          // 发起 JSONP 请求
          getSuggestList(keywords)
          }, 500)
       }
      
       $('#ipt').on('keyup', function() {  // 3. 在触发 keyup 事件时，立即清空 timer
          clearTimeout(timer)
          // ...省略其他代码
          debounceSearch(keywords)
       })
      

      缓存搜索的建议列表

      

       这里第一个是apple，第二个是apple watch，第三个是apple，又重复的发起请求了，我们可以根据之前的缓存把原来一样的取出来，就不用发起重复请求了，这样提高搜索效率

      1. 定义全局缓存对象

        // 缓存对象
        var cacheObj = {}
      

      2. 将搜索结果保存到缓存对象中

       // 渲染建议列表
       function renderSuggestList(res) {
              // ...省略其他代码
      
              // 1.获取到用户输入的内容，当作键
              var k = $('#ipt').val().trim();
              // 2.需要将数据作为值，进行缓存
              cacheObj[k] = res;// cacheObj对象里属性名为k的值
       }
      

      3. 优先从缓存中获取搜索建议

       // 监听文本框的 keyup 事件
       $('#ipt').on('keyup', function() {
          // ...省略其他代码
      
          // 优先从缓存中获取搜索建议
          if (cacheObj[keywords]) {
             return renderSuggestList(cacheObj[keywords])
          }
          // 获取搜索建议列表
          debounceSearch(keywords)
        })
      
      

      ---

      节流

      节流策略（throttle），顾名思义，可以减少一段时间内事件的触发频率。

      • 防止事件在一段时间内被无限制的触发，给他一个间隔时间，在这个间隔时间内再次触发不会有效果。
      • 比如射击游戏，当你快速射击的时候，要让子弹的射出有一定间隔，所以使用了节流策略

      节流的应用场景

      • 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
      • 懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；

      节流案例 – 鼠标跟随效果

      

      不使用节流时实现鼠标跟随效果

      节流阀的概念

      

      • 节流阀为空，表示可以执行下次操作；
      • 不为空，表示不能执行下次操作。
      • 当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了。
      • 每次执行操作前，必须先判断节流阀是否为空。

      使用节流优化鼠标跟随效果 

      ---

      防抖和节流的区别

      • 防抖：如果事件被频繁触发，防抖能保证只有最有一次触发生效！前面 N 多次的触发都会被忽略！
      • 节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件！