Ajax：跨域、防抖和节流、HTTP协议

在善意的"双向奔赴"中，每个普通人都如星辰，微小但释放着自己的光芒，交织成灿烂的星河

文章目录

跨域

同源策略
- 概念：协议，域名，端口都一样
  - 协议：例如 http或者https
  - 域名：例如 www.bai.com
  - 端口：http协议默认端口是80，https默认端口是443
两个非同源的URL带来的影响
- 无法读取非同源网页的cookie、LocalStorage和IndexedDB
- 无法接触非同源网页的dom
- 无法向非同源地址发送ajax请求 (可以去请求，浏览器会阻止接收结果)
跨域
- 概念：违反了同源策略的ajax请求
- 实现跨域
  - JSONP
    - 步骤
      1. 随便准备一个函数，用于接收服务器返回的结果
        
        函数要有一个形参，形参就是服务器返回的结果
      2. 定义一个script标签，标签的src指向接口地址
        
        必须执行callback函数，函数的值是前面准备好的函数名
    - 原理：当请求接口之后，接口返回一段调用函数的代码，调用的函数(就是我们准备好的函数)就是向接口发送请求时携带的callback函数
  - 安装第三方包
  - CORS (跨资源共享)
  - 服务器代理
  - 用node.js中间件代理跨域 Access-Control-Allow-Origin: '*'

防抖和节流

防抖
- 概念：防抖策略是当事件被触发后，延迟n秒在执行回调，如果在n秒内事件又被触发，则重新计时
- 实现步骤
  1. 设置 var timer = null 放抖动的timer
  2. 判断timer是否为null，如果不为null则清除定时器
  3. 设置定时器，约定一段时间后执行某些功能函数
节流
- 概念：节流策略可以减少一段时间内事件的触发频率 (减少事件内部代码的执行次数)
- 实现步骤
  1. 设置节流阀 var timer = null
  2. 事件内部判断timer，如果timer不为null (说明有一个定时器正在执行)，则return
  3. 设置定时器，在定时器内部编写程序代码，并且打开节流阀 timer = null
总结
- 防抖：如果事件被频繁触发，防抖能保证只有最后一次触发生效，前面N多次的触发都会被忽略
- 节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性的执行一部分事件

HTTP协议

概念：HTTP是超文本传输协议，协议规定了客户端与服务器交互数据时，数据的格式
请求消息
- 请求行 (请求方式、请求的url、协议的版本)
- 请求头 (由多行键值对组成)
  - Content-Type 告诉服务器提交的数据是什么格式的
  - User-Agent 告诉服务器发送到请求的浏览器是什么浏览器
- 请求体 (提交的数据就是请求体 GET方式没有请求体，POST方式才有请求体)
响应消息
- 响应行 (协议及版本)
- 响应头 (Content-Type:application/json;charset=utf-8 服务器告诉浏览器返回的数据是什么格式的)
- 响应体 (返回的主要内容就是返回的数据，可以在network->请求->response查看)

HTP状态码以及代表意义

200：请求成功
201：添加成功
304：请求的资源没有改变 (去缓存中取数据即可)
400：请求的格式不对 (最有可能得原因是请求参数写错了)
404：请求的资源不存在 (url地址可能错误)
500：服务器内部错误

错误代码的影响

分类
- 解析代码时的错误 (语法、词法错误)
- 运行代码时的错误 (调用函数等等)
错误对当前script代码段的影响
- 解析代码时的错误会导致整个script代码全部瘫痪
- 运行代码时的错误会导致错误之前的代码能够执行，错误之后的代码不能执行
  注意：两个没有关系的script代码段前一个script代码段无论发生什么都不会影响后面的script代码段

移动的小天使

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="jquery.js"></script>
  <style>
    img {
      position: absolute;
    }
  </style>
</head>

<body>
  <img src="angel.gif" alt="">

  <script>
    // 1.设置节流阀
    var timer = null
    // 2.事件内部,判断timer,如果不为null(说明有一个定时器正在执行),return
    $(document).on('mousemove', function (e) {
      if (timer != null) {
        return
      }
      // 3.设置定时器,定时器内部,编写程序代码.并且打开节流阀 (timer = null)
      timer = setTimeout(function () {
        var x = e.pageX // 鼠标距离页面左边的位置
        var y = e.pageY // 鼠标距离页面上边的位置
        // 设置img的位置
        $('img').css({ left: x + 'px', top: y + 'px' })
        console.log('今天星期三')
        // 重置timer为null,相当于打开节流阀
        timer = null
      }, 30)
    })
  </script>
</body>

</html>