深入理解Ajax：从基础到高级应用-CSDN博客

本文链接：https://blog.csdn.net/xiaohuichonga/article/details/122298874

本文详细介绍了Ajax的基础知识，包括jQuery中的Ajax方法、接口概念、接口测试工具和接口文档。讲解了XMLHttpRequest的使用，包括GET和POST请求，以及URL编码与解码。此外，探讨了数据交换格式，如XML和JSON的特性和区别。文章还介绍了如何封装自己的Ajax函数，以及XMLHttpRequest Level2的新特性，如文件上传和进度信息。最后，提到了jQuery的高级用法、axios库的使用，以及同源策略和跨域解决方案JSONP。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

req 请求对象，res响应对象
Ajax的实现步骤
1.创建Ajax对象
var xhr = new XMLHttpRequest();
2.告诉Ajax请求地址以及请求方式
xhr.open('get','http://www.example.com')；
3.发送请求
xhr.send();
4.获取服务器端给与客户端的响应数据
xhr.onload = function () {
    console.log(xhr.responseText);
}

2.1 ajax中的方法

JSON.parse();//将json字符串转换为json数据

2.2 jQuery中的Ajax

$.get()函数的语法：

$.get(Url,[data],[callback])

Url 是邀请球的资源地址

data 是请求资源期间要携带的参数

callback 请求成功厚的回调函数

$.post()函数的语法：

$.post(Url,[data],[callback])

Url 提交数据的地址

data 要提交的数据

callback 数据提交成功时的回调函数

$.ajax()函数的语法：

$.ajax({
    type:'',//请求的方式 GET 或POST
    url：'',//请求的url地址
    data:{ },//这次请求携带的数据
    success: function(res){ } //请求成功之后的回调函数
})

2.3 接口的概念

使用Ajax请求数据时，被请求的URL地址，就叫做数据接口（简称接口）。同时每个数据都必须有请求方式（get，post）

2.4 接口的测试工具

为了验证接口能否被正常访问，我们常常需要使用接口测试工具，求对数据接口进行检测。

好处：接口的是工具能让我们再不写任何代码的情况下，对接口进行调用和测试。PostManDownload Postman | Get Started for Free

2.5 接口文档

接口的说明书最少包含6项内容

1.接口名称：名来标识各个接口的简单说明，如登录接口，获取图书列表接口等。

2.接口URL：接口的调用地址。

3.调用方式：接口的调用方式，如GET或POST。

4.参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。

5.响应格式：接口的返回值的详细描述，一半包含数据名称、数据类型、说明3项内容。

6、返回实例（可选）：通过对象的形式，例句服务器返回数据的结构。

2.6 BootstrapCDN

StackPath 的小伙伴为 Bootstrap 的 CSS 和 JavaScript 文件提供了 CDN 的支持。直接使用这些 BootstrapCDN 提供的链接即可。

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

3. XMLHttpRequest的基本使用

3.1使用xhr发起GET请求

步骤

//1.创建 xhr 对象
var xhr = new XMLHttpRequest()
//2.调用 xhr.open()函数    指定请求方式与URL地址
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
//3.调用xhr.send()函数  发起 Ajax 请求
xhr.send()
//4.监听xhr.onreadystatechange 事件
xhr.onreadystatechange = function() {
// 4.1监听xhr对象的请求状态readyState与服务器响应的状态status
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
    }
}

3.2 了解xhr对象的readyState属性

XMLHttpRequest 对象的 readyState 属性，用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求必然处于以下状态中的一个：

0 ：XMLHttpRequest 对象已被创建，但尚未调用 open方法。

1：open() 方法已经被调用

2：send() 方法已经被调用，响应头也已经被接收。

3：数据接收中，此时 response 属性中已经包含部分数据。

4：Ajax 请求完成，这意味着数据传输已经彻底完成或失败。

3.3 使用xhr发起带参数的GET请求

xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
//这种在 URL 地址后面拼接的参数，叫做   查询字符串

3.4 什么是查询字符串

定义：查询字符串（URL 参数）是指在 URL 的末尾加上用于向服务器发送信息的字符串（变量）。格式：将英文的 ? 放在URL 的末尾，然后再加上参数＝值，想加上多个参数的话，使用 & 符号进行分隔。以这个形式，可以将想要发送给服务器的数据添加到 URL 中。

// 不带参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks
// 带一个参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks?id=1
// 带两个参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记

4.URL编码与解码

4.1 什么是URL编码

URL 地址中，只允许出现英文相关的字母、标点符号、数字，因此，在 URL 地址中不允许出现中文字符。如果 URL 中需要包含中文这样的字符，则必须对中文字符进行编码（转义）。 URL编码的原则：使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。 URL编码原则的通俗理解：使用英文字符去表示非英文字符。

4.2 如何对URL进行编码与解码

浏览器提供了 URL 编码与解码的 API，分别是：

encodeURI() 编码的函数
decodeURI() 解码的函数

关于 URL 编码的知识，请参考如下博客：

为什么要进行URL编码_Dong-CSDN博客_对url进行编码

5. 使用xhr发起POST请求

步骤：

1.创建 xhr 对象

2.调用 xhr.open() 函数

3.设置 Content-Type 属性（固定写法）

4.调用 xhr.send() 函数，同时指定要发送的数据

5.监听 xhr.onreadystatechange 事件

// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 3. 设置 Content-Type 属性（固定写法）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 调用 send()，同时将数据以查询字符串的形式，提交给服务器
xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
// 5. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
    }
}

6. 什么是数据交换格式

6.1 数据交换格式就是服务器端与客户端之间进行数据传输与交换的格式。

6.2 什么是XML

XML 的英文全称是 EXtensible Markup Language，即可扩展标记语言。因此，XML 和 HTML 类似，也是一种标记语言。

6.3 XML和HTML的区别

HTML 被设计用来描述网页上的内容，是网页内容的载体 XML 被设计用来传输和存储数据，是数据的载体

6.4 什么是JSON

JSON 的英文全称是 JavaScript Object Notation，即“JavaScript 对象表示法”。简单来讲，JSON 就是 Javascript 对象和数组的字符串表示法，它使用文本表示一个 JS 对象或数组的信息，因此，JSON 的本质是字符串。作用：JSON 是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但是 JSON 比 XML 更小、更快、更易解析。

6.5 JSON的两种结构

对象结构：对象结构在 JSON中表示为 { } 括起来的内容。数据结构为 { key: value, key: value, … } 的键值对结构。其中，key 必须是使用英文的==双引号==包裹的字符串，value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

数组结构：数组结构在 JSON 中表示为 [ ] 括起来的内容。数据结构为 [ "java", "javascript", 30, true … ] 。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

6.6 JSON语法注意事项

1.属性名必须使用双引号包裹 2.字符串类型的值必须使用双引号包裹 3.JSON 中不允许使用单引号表示字符串 4.JSON 中不能写注释 5.JSON 的最外层必须是对象或数组格式 6.不能使用 undefined 或函数作为 JSON 的值 7.JSON 的作用：在计算机与网络之间存储和传输数据。 8.JSON 的本质：用字符串来表示 Javascript 对象数据或数组数据

6.7 JSON和JS对象的互转

从 JSON 字符串转换为 JS 对象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}')
//结果是 {a: 'Hello', b: 'World'}

从 JS 对象转换为 JSON 字符串，使用JSON.stringify()方法：

var json = JSON.stringify({a: 'Hello', b: 'World'})
//结果是 '{"a": "Hello", "b": "World"}'

6.8 序列化和反序列化

把数据对象转换为字符串的过程，叫做序列化，例如：调用 JSON.stringify() 函数的操作，叫做 JSON 序列化。

把字符串转换为数据对象的过程，叫做反序列化，例如：调用 JSON.parse() 函数的操作，叫做 JSON 反序列化。

7. 封装自己ajax函数

7.1 定义options参数选项

itheima() 函数是我们自定义的 Ajax 函数，它接收一个配置对象作为参数，配置对象中可以配置如下属性： method 请求的类型 url 请求的 URL 地址 data 请求携带的数据 success 请求成功之后的回调函数

步骤：

处理data参数

需要把 data 对象，转化成查询字符串的格式，从而提交给服务器，因此提前定义 resolveData 函数如下：

function resolveData(data) {
  var arr = []
  for (var k in data) {
    arr.push(k + '=' + data[k])
  }
  return arr.join('&')
}

2. 定义itheima函数

在 itheima() 函数中，需要创建 xhr 对象，并监听 onreadystatechange 事件：

function itheima(options) {
  var xhr = new XMLHttpRequest()
  // 拼接查询字符串
  var qs = resolveData(options.data)

  // 监听请求状态改变的事件
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var result = JSON.parse(xhr.responseText)
      options.success(result)
    }
  }
}

3.判断请求的类型

不同的请求类型，对应 xhr 对象的不同操作，因此需要对请求类型进行 if … else … 的判断：

if (options.method.toUpperCase() === 'GET') {
    // 发起 GET 请求
    xhr.open(options.method, options.url + '?' + qs)
    xhr.send()
  } else if (options.method.toUpperCase() === 'POST') {
    // 发起 POST 请求
    xhr.open(options.method, options.url)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.send(qs)
  }

8. XMLHttpRequest Level2的新特性

XMLHttpRequest Level2的新功能

1.可以设置 HTTP 请求的时限

xhr.timeout = 3000

xhr.ontimeout = function(){

alert('请求超时！')

}

2.可以使用 FormData 对象管理表单数据

2.1 Ajax 操作往往用来提交表单数据。为了方便表单处理，HTML5 新增了一个 FormData 对象，可以模拟表单操作：

// 1. 新建 FormData 对象
      var fd = new FormData()
      // 2. 为 FormData 添加表单项
      fd.append('uname', 'zs')
      fd.append('upwd', '123456')
      // 3. 创建 XHR 对象
      var xhr = new XMLHttpRequest()
      // 4. 指定请求类型与URL地址
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
      // 5. 直接提交 FormData 对象，这与提交网页表单的效果，完全一样
      xhr.send(fd)

2.2 FormData对象也可以用来获取网页表单的值，示例代码如下：

<form action="" id="form1">
        <!--  autocomplete= "off"  阻止自动填充行为 -->
        <input type="text" name="uname" autocomplete="off">
        <input type="password" name="upwd" id="">
        <button type="submit">提交</button>
</form>


<script>
        //通过 DOM 操作 获取到 form1 的表单元素
        var form = document.querySelector('#form1')

        form.addEventListener('submit', function (e) {
            //阻止表单的默认行为
            e.preventDefault()

            //创建FormData 快速获取到 form 表单中的数据
            var fd = new FormData(form)

            var xhr = new XMLHttpRequest()
       xhr.open('POST','http://www.liulongbin.top:3006/api/formdata')
xhr.send(fd)
xhr.onreadystatechange = function () {
     if (xhr.readyState === 4 && xhr.status === 200) {                      console.log(JSON.parse(xhr.responseText))
                }
            }
        })



</script>

3. 上传文件

新版 XMLHttpRequest 对象，不仅可以发送文本信息，还可以上传文件。实现步骤： 3.1 定义 UI 结构

<!-- 1. 文件选择框 -->
    <input type="file" id="file1" />
    <!-- 2. 上传按钮 -->
    <button id="btnUpload">上传文件</button>
    <br />
    <!-- 3. 显示上传到服务器上的图片 -->
    <img src="" alt="" id="img" width="800" />

3.2 验证是否选择了文件

 // 1. 获取上传文件的按钮
 var btnUpload = document.querySelector('#btnUpload')
 // 2. 为按钮添加 click 事件监听
 btnUpload.addEventListener('click', function() {
     // 3. 获取到选择的文件列表
     var files = document.querySelector('#file1').files
     if (files.length <= 0) {
         return alert('请选择要上传的文件！')
     }
     // ...后续业务逻辑
 })

3.3 向 FormData 中追加文件

// 1. 创建 FormData 对象
 var fd = new FormData()
 // 2. 向 FormData 中追加文件
 fd.append('avatar', files[0])

3.4 使用 xhr 发起上传文件的请求

// 1. 创建 xhr 对象
 var xhr = new XMLHttpRequest()
 // 2. 调用 open 函数，指定请求类型与URL地址。其中，请求类型必须为 POST
 xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
 // 3. 发起请求
 xhr.send(fd)

3.5 监听 onreadystatechange 事件

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText)
    if (data.status === 200) { // 上传文件成功
      // 将服务器返回的图片地址，设置为 <img> 标签的 src 属性
      document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
    } else { // 上传文件失败
      console.log(data.message)
    }
  }
}

4. 可以获得数据传输的进度信息

4.1 显示文件上传进度

// 创建 XHR 对象
 var xhr = new XMLHttpRequest()
 // 监听 xhr.upload 的 onprogress 事件
 xhr.upload.onprogress = function(e) {
    // e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
    if (e.lengthComputable) {
        // e.loaded 已传输的字节
        // e.total  需传输的总字节
        var percentComplete = Math.ceil((e.loaded / e.total) * 100)
    }
 }

4.2 基于Bootstrap渲染进度条

//导入需要的库
<link rel="stylesheet" href="./lib/bootstrap.css" />
    <script src="./lib/jquery.js"></script>

//基于Bootstrap渲染进度条
<!-- 进度条 -->
    <div class="progress" style="width: 500px; margin: 10px 0;">
      <div class="progress-bar progress-bar-info progress-bar-striped active" id="percent" style="width: 0%">
        0%
      </div>
    </div>

4.3 监听上传进度的事件

 xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
    // 1. 计算出当前上传进度的百分比
    var percentComplete = Math.ceil((e.loaded / e.total) * 100)
    $('#percent')
        // 2. 设置进度条的宽度
        .attr('style', 'width:' + percentComplete + '%')
        // 3. 显示当前的上传进度百分比
        .html(percentComplete + '%')
    }
 }

4.4 监听上传完成的事件（进度条颜色的转换）

xhr.upload.onload = function() {
     $('#percent')
         // 移除上传中的类样式
         .removeClass()
         // 添加上传完成的类样式
         .addClass('progress-bar progress-bar-success')
 }

9. jQuery高级用法

9.1 jQuery实现文件上传

9.1.1 定义UI结构

<!-- 导入 jQuery -->
    <script src="./lib/jquery.js"></script>

    <!-- 文件选择框 -->
    <input type="file" id="file1" />
    <!-- 上传文件按钮 -->
    <button id="btnUpload">上传</button>

9.1.2 验证是否选择了文件

 $('#btnUpload').on('click', function() {
     // 1. 将 jQuery 对象转化为 DOM 对象，并获取选中的文件列表
     var files = $('#file1')[0].files
     // 2. 判断是否选择了文件
     if (files.length <= 0) {
         return alert('请选择图片后再上传！‘)
     }
 })

9.1.3 向FormData中追加文件

// 向 FormData 中追加文件
 var fd = new FormData()
 fd.append('avatar', files[0])

9.1.4 使用jQuery发起上传文件的请求

$.ajax({
     method: 'POST',
     url: 'http://www.liulongbin.top:3006/api/upload/avatar',
     data: fd,
     // 不修改 Content-Type 属性，使用 FormData 默认的 Content-Type 值
     contentType: false,
     // 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
     processData: false,
     success: function(res) {
         console.log(res)
     }
 })

9.2 jQuery实现loading效果

Ajax 请求开始时，执行 ajaxStart 函数。可以在 ajaxStart 的 callback 中显示 loading 效果，示例代码如下：

// 自 jQuery  版本 1.8 起，该方法只能被附加到文档
 $(document).ajaxStart(function() {
     $('#loading').show()
 })
 
//Ajax 请求结束时，执行 ajaxStop 函数。可以在 ajaxStop 的 callback 中隐藏 loading 效果，示例代码如下：
 $(document).ajaxStop(function() {
     $('#loading').hide()
 })

注意： $(document).ajaxStart() 函数会监听当前文档内所有的 Ajax 请求。

10. axios

10.1 axios发起GET请求

axios 发起 get 请求的语法

axios.get('url', {params: {/*参数*/}}).then(callback)

具体的请求示例如下:

document.querySelector('#btn1').addEventListener('click', function(){
// 请求的 URL 地址
 var url = 'http://www.liulongbin.top:3006/api/get'
 // 请求的参数对象
 var paramsObj = { name: 'zs', age: 20 }
 // 调用 axios.get() 发起 GET 请求
 axios.get(url, { params: paramsObj }).then(function(res) {
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(res)
 })
})

10.2 axios发起POST请求

axios 发起 post 请求的语法：

axios.post('url', { /*参数*/ }).then(callback)

具体的请求示例如下:

document.querySelector('#btn2').addEventListener('click', function(){
  // 请求的 URL 地址
 var url = 'http://www.liulongbin.top:3006/api/post'
 // 要提交到服务器的数据
 var dataObj = { location: '北京', address: '顺义' }
 // 调用 axios.post() 发起 POST 请求
 axios.post(url, dataObj).then(function(res) {
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(result)
 })
})

10.3 直接使用axios发起请求

axios 也提供了类似于 jQuery 中 $.ajax() 的函数，语法如下：

//直接使用axios发起GET请求
document.querySelector('#btn3').addEventListener('click', function () {
    axios({
     method: 'GET',
     url: 'http://www.liulongbin.top:3006/api/get',
     params: { // GET 参数要通过 params 属性提供
         name: 'zs',
         age: 20
     }
 }).then(function(res) {
     console.log(res.data)
 })
})

//直接使用axios发起POST请求
document.querySelector('#btn3').addEventListener('click', function () {
    axios({
     method: 'POST',
     url: 'http://www.liulongbin.top:3006/api/post',
     data: { // POST 数据要通过 data 属性提供
         bookname: '程序员的自我修养',
         price: 666
     }
 }).then(function(res) {
     console.log(res.data)
 })
})

11. 同源策略

11.1 什么是同源

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

11.1.2 什么是同源策略

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

通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如： 1.无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB 2.无法接触非同源网页的 DOM 3.无法向非同源地址发送 Ajax 请求

11.2 跨域

11.2.1 什么是跨域

同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域。

11.2.2 . 如何实现跨域数据请求

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

11.3 什么是JSONP

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

11.4 自己实现一个简单的JSONP

定义一个 success 回调函数：

<script>
   function success(data) {
     console.log('获取到了data数据：')
     console.log(data)
   }
 </script>

通过 <script> 标签，请求接口数据：

<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=zs&age=20"></script>

11.5 jQuery中的JSONP

11.5.1 jQuery 提供的 $.ajax() 函数，除了可以发起真正的 Ajax 数据请求之外，还能够发起 JSONP 数据请求，例如：

$.ajax({
    url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    // 如果要使用 $.ajax() 发起 JSONP 请求，必须指定 datatype 为 jsonp
    dataType: 'jsonp',
    success: function(res) {
       console.log(res)
    }
 })

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

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

jsonp: 'callback' : 定义jsonp参数名称

jsonpCallback: 'abc' ：定义回调函数名称

例如：

$.ajax({
    url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    dataType: 'jsonp',
    // 发送到服务端的参数名称，默认值为 callback
    jsonp: 'callback',
    // 自定义的回调函数名称，默认值为 jQueryxxx 格式
    jsonpCallback: 'abc',
    success: function(res) {
       console.log(res)
    }
 })

11.5.3 jQuery中JSONP的实现过程

jQuery 中的 JSONP，也是通过 <script> 标签的 src 属性实现跨域数据访问的，只不过，jQuery 采用的是动态创建和移除 <script> 标签的方式，来发起 JSONP 数据请求。在发起 JSONP 请求的时候，动态向 <header> 中 append 一个 <script> 标签；在 JSONP 请求成功以后，动态从 <header> 中移除刚才 append 进去的 <script> 标签；

12. 输入框的防抖

12.1 什么是防抖

==防抖策略==（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。

12.2 防抖的应用场景

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

12.3 3. 实现输入框的防抖

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)
 })

12.4 缓存搜索的建议列表

定义全局缓存对象

// 缓存对象
var cacheObj = {}

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

// 渲染建议列表
 function renderSuggestList(res) {
    // ...省略其他代码
    // 将搜索的结果，添加到缓存对象中
    var k = $('#ipt').val().trim()
    cacheObj[k] = res
 }

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

// 监听文本框的 keyup 事件
 $('#ipt').on('keyup', function() {
    // ...省略其他代码

    // 优先从缓存中获取搜索建议
    if (cacheObj[keywords]) {
       return renderSuggestList(cacheObj[keywords])
    }
    // 获取搜索建议列表
    debounceSearch(keywords)
  })

12.5 什么是节流

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

12.5.2 节流的应用场景

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

12.5.3 节流案例 – 鼠标跟随效果

渲染UI结构并美化样式

<!-- UI 结构 -->
<img src="./assets/angel.gif" alt="" id="angel" />

/* CSS 样式 */
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}#angel {
  position: absolute;
}

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

$(function() {
   // 获取图片元素
   var angel = $('#angel')
   // 监听文档的 mousemove 事件
   $(document).on('mousemove', function(e) {      // 设置图片的位置
      $(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px')
   })
})

3. 节流阀的概念

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

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

$(function() {
  var angel = $('#angel')
  var timer = null // 1.预定义一个 timer 节流阀
  $(document).on('mousemove', function(e) {
    if (timer) { return } // 3.判断节流阀是否为空，如果不为空，则证明距离上次执行间隔不足16毫秒
    timer = setTimeout(function() {
      $(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px')
      timer = null // 2.当设置了鼠标跟随效果后，清空 timer 节流阀，方便下次开启延时器
    }, 16)
  })
})

12.5.4 总结防抖和节流的区别