04-Ajax第四天学习笔记

1. 同源策略和跨域

1. 同源：如果两个页面的协议，域名和端口都相同，则两个页面同源

2. 同源策略：限制不同源的网站进行资源交互，是浏览器提供的一个安全功能。

3. 浏览器规定：

   1. 无法读取非同源网页的cookie，localstorage和indexedDB
   2. 无法接触非同源网页的DOM
   3. 无法向非同源地址发送Ajax请求

4. 跨域:指协议，域名或端口不同，则为跨域

5. 浏览器对跨域的拦截：

   1. 注意：浏览器允许发送Ajax请求，但请求回来的数据会被浏览器拦截
   2. 实现跨域的方法：(1)JSONP:出现较早，只支持get请求，不支持post请求(2)CORS:出现较晚，支持get和post请求，不兼容低版本浏览器。

2. JSONP

1. JSONP的实现原理：由于<script>标签不受同源策略的影响，所以JSONP就是通过<script>标签的src属性，请求跨域的数据接口，并通过函数调用的形式，接受跨域接口响应回来的数据

    <script>
        function success(data) {
            console.log(data)
        }
    </script>
    <script src="http://www.liulongbin.top:3006/api/jsonp?callback=success&name=ls&age=30"></script>

2. jQuery中的jsonp:使用jQuery发起jsonp请求，会自动携带一个callback=jQueryxxx的参数，是随机生成的回调函数名称

    $(function() {
            $.ajax({
                url: 'http://www.liulongbin.top:3006/api/jsonp?name=ls&age=30',
                dataType: 'jsonp',
                // jsonp: '自定义callback参数名称',
                // jsonpCallback: '自定义回调函数名称',
                success: function(res) {
                    console.log(res)
                }
            })
        })

淘宝搜索案例

    $(function() {
        let timeid = null

        // 定义一个全局的缓存对象
        let cacheobj = {}

        // 定义防抖函数
        function debouse(words) {
          timeid = setTimeout(function() {
            getSuggestList(words)
          },1000)
        }

        // 为搜索框绑定事件
        $('.ipt').on('keyup', function() {
          clearTimeout(timeid)
          const words = $(this).val().trim()

          
          if(words.length <= 0) {
            return $('#suggest-list').empty().hide()
          }

          // 判断缓存对象中是否存在数据
          if(cacheobj[words]) {
            return renderSuggestList(cacheobj[words])
          }
          // console.log(words)
          // 搜索框防抖
          // getSuggestList(words)
          debouse(words)
        })

        // 封装获取建议列表函数
        function getSuggestList(words) {
          $.ajax({
            url: 'https://suggest.taobao.com/sug?q=' + words,
            dataType: 'jsonp',
            success: function (res) {
              console.log(res)
              renderSuggestList(res)
            }
          })
        }

        // 封装渲染函数
        function renderSuggestList(res) {
          if(res.length <= 0) {
            return $('#suggest-list').empty().hide()
          }
          const htmlStr = template('tpl-suggestList',res)
          $('#suggest-list').html(htmlStr).show()

          // 获取用户输入的内容
          const k = $('.ipt').val().trim()
          // 存入缓存对象
          cacheobj[k] = res
        }
      })
    </script>

    
    <script type="text/html" id="tpl-suggestList">
      {{each result}}
        <div class="suggest-item">{{$value[0]}}</div>
      {{/each}}
    </script>

// 鼠标移动节流
    $(function() {
            const angel = $('#angel')
            // 定义一个节流阀
            let timer = null
            $(document).on('mousemove', function(e) {
                if(timer) {return}
                timer = setTimeout(function() {
                    $(angel).css('top',e.pageY + 'px').css('left',e.pageX + 'px')
                    console.log(1)
                    timer = null
                },10)
            })
        })

1. http协议简介

1. 通信协议：通信双方采用约定好的规则进行发送消息，这种规则就是通信协议
2. HTTP协议：超文本传输协议

1.1 HTTP请求消息(报文)

1. 组成部分：
   1. 请求行：由请求方式，url，协议版本组成。由空格隔开
   2. 请求头部：用来描述客户端的基本信息。由多行键值对组成，由英文冒号分隔键和值
   3. 空行：最后一个请求头字段的后面是一个空行，用来分隔请求头部和请求体
   4. 请求体：请求体中存放的是通过post请求要发送到服务器的数据

1.2 HTTP响应消息(报文)

1. 组成部分：
   1. 状态行：由HTTP协议版本，状态码，状态码的描述组成。由空格隔开
   2. 响应头部：用来描述服务器的基本信息。由多行键值对组成，由英文冒号分隔键和值
   3. 空行：最后一个响应头字段的后面是一个空行，用来分隔响应头部和响应体
   4. 响应体：响应体中存放的是服务器响应给客户端的资源内容

1.3 HTTP请求方法

方法	描述
GET	(查询)获取服务器资源，请求体不会包含请求数据，请求数据放在协议头中
POST	(新增)向服务器提交资源，提交数据包含在请求体中
PUT	(修改)向服务器提交资源，使用提交的新资源，替换掉服务器对应的旧资源
DELETE	(删除)请求服务器删除指定资源

1.4 HTTP响应状态码

1. 100-199 用于指定客户端应相应的某些动作
2. 200-299 用于表示请求成功。
3. 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
4. 400-499 用于指出客户端的错误
5. 500-599 用于支持服务器错误