Ajax-服务器,Ajax,form表单与模板引擎,跨域与JSONP,HTTP

get请求通常用于获取服务端资源(向服务器要资源) e.g:根据URL地址,从服务器获取 HTML 文件、css 文件、js文件、图片文件、数据资源等
post请求通常用于向服务器提交数据(往服务器发送资源) e.g:登录时向服务器提交的登录信息,注册时向服务器提交的注册信息,添加用户时向服务器提交的用户信息等各种数据提交操作

二.Ajax

1.简介

Ajax的全称是 Asynchronous Javascript And XML(异步JavaScript和XML), 在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式,就是Ajax
实现网页与服务器之间的数据交互
典型应用场景: 用户名检测, 搜索提示, 数据分页显示

2.JQuery中的Ajax

浏览器中提供的XMLHttpRequest 用法比较复杂,所以 jQuery对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数,极大地降低了 Ajax 的使用难度
jQuery 中发起 Ajax 请求最常用的三个方法： $.get() $.post() $.ajax()

(1)$.get()函数

$.get(url, [data], [callback]); 专门用来发起 get 请求,将服务器上的资源请求到客户端来使用 [ ]可省

url: 要请求的资源地址 (string类型)
data: 请求资源期间要携带的参数(object)
callback: 请求成功时的回调函数 (function)

(2)$.post()函数

$.post(url, [data], [callback]); 专门用来发起 post 请求,从而向服务器提交数据

(3)$.ajax()函数

是一个功能比较综合的函数,允许对 Ajax 请求进行更详细的配置

    $(function(){
		$('.ajaxget').on('click',function(){
		    // ajax发起get请求
			$.ajax({
				type: 'get',  //请求方式  get/post
				url:'http://www.liulongbin.top:3006/api/getbooks',  //请求的URL地址  接口
				data:{  id: 2 },      //携带的数据   有参/无参 没有则可省略
				success: function(res) {   //添加成功的回调函数
						console.log(res);
				}
			})
		})
	});

2.接口

(1)概念

使用Ajax请求数据时,被请求的URL地址,就叫做数据接口(简称接口).同时,每个接口必须有请求方式

(2)接口请求过程

(3)接口测试工具

在不写任何代码的情况下，对接口进行调用和测试
PostMan 官方下载网址 https://www.getpostman.com/downloads/

(4)接口文档

接口的说明文档,它是调用接口的依据. 好的接口文档包含了对接口URL,参数以及输出内容的说明,参照接口文档就能方便的知道接口的作用,以及接口如何进行调用.

一个合格的接口文档，应该包含以下6项内容，从而为接口的调用提供依据：

接口名称：用来标识各个接口的简单说明, 如登录接口，获取图书列表接口等
接口URL：接口的调用地址
调用方式：接口的调用方式，如 GET 或 POST
参数格式：接口需传递的参数,每个参数必须包含参数名称,参数类型,是否必选,参数说明这4项
响应格式：接口的返回值的详细描述,一般包含数据名称,数据类型,说明3项内容
返回示例(可选)：通过对象的形式, 例举服务器返回数据的结构

三.form表单与模板引擎

1.表单

(1)概念

表单在网页中主要负责数据采集功能
HTML中的<form>标签,就是用于采集用户输入的信息,并通过<form>标签的提交操作,把采集到的信息提交到服务器端进行处理

(2)组成

表单标签
表单域: 包含了文本框,密码框,隐藏域,多行文本框,复选框,单选框,下拉选择框和文件上传框等
表单按钮: <button type="submit">提交</button> 点击按钮将信息发送至服务器

(3)标签的属性

<form>标签用来采集数据, <form>标签的属性则是用来规定如何把采集到的数据发送到服务器

①action属性

用来规定当提交表单时,向何处发送表单数据
action属性的值是后端提供的一个 URL 地址, 这个URL地址专门负责接收表单提交过来的数据
当<form>表单在未指定action属性值的情况下,action 的默认值为当前页面的 URL 地址
注意：当提交表单后，页面会立即跳转到 action 属性指定的 URL 地址

②target属性

用来规定在何处打开 action URL
它的可选值有5个,默认值是 _self,表示在相同的框架中打开action URL

③method属性

用来规定以何种方式把表单数据提交到action URL
可选值有两个:get和post, 默认值为 get,表示通过URL地址的形式,把表单数据提交到action URL
注意:get适合提交少量的,简单的数据; post适合提交大量,复杂或包含文件上传的数据
实际开发中,<form>表单post提交方式用的最多,很少用 get, e.g:登录,注册,添加数据等表单操作

④enctype属性

用来规定在发送表单数据之前如何对数据进行编码
可选值3个,默认值为application/x-www-form-urlencoded,表在发送前编码所有的字符
注意: 在涉及到文件上传的操作时,必须将值设置为multipart/form-data; 如果不涉及则直接将 enctype 的值设置为 application/x-www-form-urlencoded 即可

(4)表单的同步提交

通过点击submit按钮,触发表单提交的操作,从而使页面跳转到action URL 的行为,叫表单的同步提交

缺点:

页面会发生跳转, 跳转到 action URL 所指向的地址，用户体验很差
页面之前的状态和数据会丢失

解决方案：

表单只负责采集数据，Ajax 负责将数据提交到服务器

2.Ajax提交表单数据

(1)监听表单提交事件

在 jQuery 中,可以使用两种方式,监听到表单的提交事件

$('f1').submit(function(){ }); 使用submit()
$('.f1').on('submit',function(){ }); 使用submit事件监听

(2)阻止表单默认提交行为

event.preventDefault(); 阻止表单的提交和页面的跳转

(3)快速获取表单中的数据

$(selector).serialize();
jQuery提供了serialize()函数, 可以一次性获取到表单中的所有的数据
使用该函数快速获取表单数据时,必须为每个表单元素添加name属性

3.模板引擎

(1)简介

可以根据程序员指定的模板结构和数据, 自动生成一个完整的HTML页面

好处:

减少了字符串的拼接操作
使代码结构更清晰
使代码更易于阅读与维护

(2)art-template模板引擎

①简介

art-template 是一个简约,超快的模板引擎
中文官网首页为 http://aui.github.io/art-template/zh-cn/index.html 找到下载链接后,鼠标右键“链接另存为”,下载到本地, 通过 <script> 标签加载到网页上进行使用

②使用步骤

导入 art-template, 定义数据, 定义模板, 调用template函数, 渲染HTML结构

    <script src="./lib/jquery.js"></script>
    <!-- 1.导入模板引擎   template('模板id',需要渲染的数据对象) -->
    <script src="./lib/template-web.js"></script>
</head>
<body>
    <div class="box"></div>
    <!-- <script>标签默认type="text/javascript" 将代码按js解析-->
    <!-- 3.定义模板  模板的HTML结构必须定义到script中  将type属性值改为html -->
    <script type="text/html" id="tpl-user">
        <!-- {{}} 双花括号: 占位符,此处之后会填充数据   将name属性放此处 -->
        <h1>{{name}}</h1>  
    </script>
    <script>
        // 2.定义数据
        var data = {
            name: 'mm'
        };
        // 4.调用template函数
        var str = template('tpl-user',data);
        // 5.渲染HTML结构
        $('.box').html(str);
    </script>
</body>

(2)art-template标准语法

提供了{{ }}这种语法格式, 在{{ }}内可进行变量输出,循环数组等操作,这种{{ }}语法在art-template中称为标准语法

输出 {{value}}

在 {{ }} 语法中, 可以进行变量的输出,对象属性的输出,三元表达式输出,逻辑或输出,加减乘除等表达式输出

原文输出 {{@ value }}

要输出的value值中,含HTML标签结构,则需使用原文输出语法,才能保证HTML标签被正常渲染

条件输出

{{if value}} 按需输出的内容 {{/if}}
{{if v1}} 按需输出的内容 {{else if v2}} 按需输出的内容 {{/if}}

循环输出

{{each arr}} {{$index}} {{$value}} {{/each}}
each语法循环数组,当前循环的索引使用$index进行访问,当前的循环项使用$value进行访问

过滤器

过滤器的本质是一个function处理函数,语法类似管道操作符, 它的上一个输出作为下一个输入
调用过滤器 {{ value | filterName }} 待处理值value传给filterName处理,处理完毕返回新值
定义过滤器 template.defaults.imports.filterName = function(value){/*return处理的结果*/}

4.模板引擎的实现原理

(1)正则与字符串操作

基本语法

exec()函数用于检索字符串中的正则表达式的匹配
RegExpObject.exec(string); 如果字符串中有匹配的值,则返回该匹配值,否则返回null

分组

正则表达式中( )包起来的内容表示一个分组,可以通过分组来提取想要的内容

替换

replace()函数用于在字符串中用一些字符替换另一些字符
多次replace操作若字符串中有多个{{}}内容,可一次一次replace操作进行替换,直至全部替换

        // 替换 replace()
        var str2 = '<div>我是{{name}}</div>';
        var  reg3 = /{{([a-z]+)}}/;
        var result3 = reg3.exec(str2);
        console.log(result3);  //得到name相关信息  ['{{name}}', 'name', index: 7, input: '<div>我是{{name}}</div>', groups: undefined]
        str3 =  str2.replace(result3[0],result3[1]);   //将得到name相关信息的数组中,索引为0的替换为1的
        console.log(str3);   //<div>我是name</div>
        //多次replace操作  若字符串中有多个{{}}内容,可一次一次replace操作进行替换,直至全部替换    

        // while实现多次replace操作
        var data = {name:'mm' , age: 18 } 
        var str = '<div>{{name}}今年{{ age }}岁了</div>';  //1.定义待提取字符串
        var pat = /{{\s*([a-zA-Z]+)\s*}}/;    //2.定义正则表达式
        var patRes = null;   //匹配结果
        while(patRes = pat.exec(str)) {    //3.将exec()结果赋值给patRes,成功执行,当exec()值为null,结束循环
            str = str.replace(patRes[0], data[patRes[1]]); //4.替换  patRes[1]指name/age, 直接用属性取data中的值即可
        }
        console.log(str) // 输出 <div>name今年age岁了</div>

(2)实现简易的模板引擎

定义模板结构
预调用模板引擎 (定义数据, 调用模板函数, 渲染HTML结构)
封装template函数
导入并使用自定义的模板引擎

四.Ajax加强

1.XMLHttpRequest

(1)简介

简称xhr,是浏览器提供的Javascript对象,通过它,可以请求服务器上的数据资源.
能直接使用xhr对象发起Ajax请求; jQuery中Ajax函数,就是基于xhr对象封装出来的

(2)xhr发起GET/POST请求

get: ①创建xhr对象 ②调用open()函数 ③调用send()函数 ④监听xhr.onreadystatechange事件
post: ①创建对象 ②open() ③定义Content-Type属性 ④send() ⑤监听

    // 利用xhr对象发起 get请求 和 post请求
        // xhr发起get请求:
        // 1.创建XHR对象
        var xhrGet = new XMLHttpRequest();
        // 2.调用open函数 创建请求      指定请求方式及url地址   带参数:url地址?id=1 多个参数用&连接即可
        xhrGet.open('get',"http://www.liulongbin.top:3006/api/getbooks");   //不带参数
        // xhr.open('get',"http://www.liulongbin.top:3006/api/getbooks?id=1");   //带参数
        // 3.调用send函数 发起请求
        xhrGet.send();
        // 4.监听 onreadystatechange 事件
        xhrGet.onreadystatechange = function(){
            if(xhrGet.readyState === 4 && xhrGet.status === 200) {  //判断服务器是否响应成功,固定条件
                // 获取服务器响应回来的数据    返回的是JSON结构字符串
                console.log(xhrGet.responseText);  // 返回中的status是服务器响应回来的一个属性(是数据中的一部分), 与上边xhr.status===200的status(不是数据中的一部分),是http请求状态的一部分
                console.log( typeof xhrGet.responseText); //string
                console.log(JSON.parse(xhrGet.responseText)); //转换为对象
            }
        }
        // xhr发起post请求: 1.创建XHR对象  2.调用open函数
        // 3.设置 Content-Type 属性(固定写法)
        xhrPost.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        // 4.调用 send()，同时将数据以查询字符串的形式，提交给服务器
        xhrPost.send('bookname=水浒传&author=施耐庵&publisher=陕西出版社');
        // 5.监听 onreadystatechange 事件

(3)readyState属性

XHR对象的readyState属性,表示当前Ajax请求所处的状态.每个Ajax请求必然处于以下某个状态

(4)查询字符串

查询字符串(URL参数), 在url的末尾加上用于向服务器发送信息的字符串(变量)
url+?+参数=值&参数=值... 多个参数的话,使用&分隔,可将想发给服务器的数据添加到url中

(5)get携带参数本质

使用$.ajax(), $.get(), 直接使用xhr对象发起GET请求,当需要携带参数时,本质上都是直接将参数以查询字符串的形式,追加到url地址后面,发送到服务器
e.g: $.get('url', {name: 'zs'}, function() {}) // 等价于 $.get('url?name=zs', function() {})

(6)url编码与解码

①简介

URL地址中,只允许出现英文相关的字母,标点符号,数字
在URL地址中不允许出现中文字符,若需要则必须对中文字符进行编码(转义)
编码原则: 用安全的字符(无特殊用途/意义可打印字符)表示不安全字符(英文表非英文字符)

②编码与解码API

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

2.数据交换格式

(1)简介

数据交换格式,就是服务器端与客户端之间进行数据传输与交换的格式
前端,常有两种数据交换格式分别是JSON和XML(用的少)

(2)XML

EXtensible Markup Language,即可扩展标记语言. XML和HTML 类似,也是一种标记语言

XML和HTML区别

都是标记语言,但两者之间没有任何的关系
HTML 用来描述网页上的内容, 是网页内容的载体
XML 用来传输和存储数据, 是数据的载体

XML缺点

XML格式臃肿, 和数据无关的代码多, 体积大, 传输效率低
在Javascript中解析比较麻烦

(3)JSON

①简介

JavaScript Object Notation,即“JavaScript 对象表示法”, JSON就是Javascript 对象和数组的字符串表示法,它使用文本表示一个JS对象或数组的信息,因此,JSON 的本质是字符串
作用: 轻量级的文本数据交换格式,作用上类似 XML,专门用于存储和传输数据,但 JSON比XML更小,更快,更易解析。
现状: JSON是在 2001年开始被推广和使用的数据格式,到现今为止,JSON 已经成为了主流的数据交换格式
JSON中包含对象和数组两种结构,通过这两种结构的相互嵌套,可以表示各种复杂的数据结构

②对象结构

{ } 括起来的内容,数据结构为 { key: value, key: value, … } 的键值对结构
key 必须是使用双引号包裹的字符串，value 的数据类型可以是数字,字符串,布尔值,null,数组,对象6种类型

③数组结构

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

④语法注意事项

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

⑤JSON和JS对象

JSON是JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串
JSON.parse() 方法 JSON 字符串转换为 JS 对象
JSON.stringify() 方法 JS对象转换为JSON 字符串

⑥序列化与反序列化

序列化: 把数据对象转换为字符串的过程
反序列化: 把字符串转换为数据对象的过程

3.封装自定义Ajax函数

定义options参数选项

自定义的Ajax函数,它接收一个配置对象作为参数
配置对象中可以配置如下属性： method, url ,data, success回调函数

处理data参数

需要把data对象(用户以对象形式提交参数), 转化成查询字符串(键值对形式)的格式, 从而提交给服务器

    <script>
        // 处理data参数   返回拼接好的查询字符串(键值对)
        function resolveData(data){
            var arr = [];
            for(let k in  data){
                var str = k + '=' + data[k];
                arr.push(str);
            }
            return arr.join('&');  //拼接字符串
        }

        // 封装自定义函数
        function tmFun(options){  //options参数对象
            // 1.创建xhr对象
            var xhr = new XMLHttpRequest();
            // 2.把外界传递过来的参数对象转换为查询字符串
            var str = resolveData(options.data);
            // 3.判断发起请求方式
            if(options.method.toUpperCase() === 'GET'){  //toUpperCase()大写
                // 发起GET请求
                xhr.open(options.method, options.url + "?" + str);
                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(str);
            }
            // 4.监听事件
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4 && xhr.status === 200){
                    var result = JSON.parse(xhr.responseText);
                    options.success(result); //调用成功回调函数
                }
            }
        }

        // 测试
        tmFun({
            method: 'get',
            url: "http://www.liulongbin.top:3006/api/getbooks",
            data: {
                id: 1
            },  //未写data,则返回所有结果
            success: function(res){
                console.log(res)
            }
        })
    </script>

4.XHR Level2的新特性

XHR Level2指新版XHR

(1)新旧版比较

XHR缺点

只支持文本数据的传输,无法用来读取和上传文件
传送和接收数据时,没有进度信息,只能提示有没有完成

XHR Level2 新功能:

可以设置 HTTP 请求的时限
可以使用 FormData 对象管理表单数据
可以上传文件
可以获得数据传输的进度信息

(2)设置HTTP请求时限

timeout属性 xhr.timeout = 3000; //设置超时时间
timeout事件 xhr.ontime = function(){ alert('超时') } //超时则自动停止HTTP请求,调用函数

(3)FormData对象管理表单数据

提交表单数据

新建FormData对象
添加表单项 append()
创建 XHR 对象
指定请求类型与URL地址 open()
提交对象 send()

快速获取表单数据

DOM获取元素 form
添加事件 submit
创建FormData对象 var fr = new FormData(form); //将表单中的数据填充给fr,不用再一个个调用填充数据
xhr发送post请求

(4)上传文件

定义 UI 结构
验证是否选择了文件
向 FormData 中追加文件
使用 xhr 发起上传文件的请求
监听 onreadystatechange 事件

(5)显示文件上传进度

监听 xhr.upload.onprogress 事件，来获取到文件的上传进度

5.JQuery高级用法

(1)文件上传

定义 UI 结构
验证是否选择了文件
向 FormData 中追加文件
使用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)
                     }
                })

(2)实现loading效果

ajaxStart(callback) 请求开始时,执行 ajaxStart函数,可在callback中显示loading 效果
ajaxStop(callback) 请求结束时,执行 ajaxStop函数,可在callback中隐藏loading 效果

            // 自 jQuery 版本 1.8 起，该方法只能被附加到文档
            // 监听Ajax 请求被发起
            $(document).ajaxStart(function() {
                $('#loading').show()
            })
            // 监听Ajax 完成的事件
            $(document).ajaxStop(function() {
                $('#loading').hide();
            })

6.axios

(1)简介

Axios是专注于网络数据请求的库
相比于原生的XMLHttpRequest 对象, axios 简单易用, 相比于 jQuery
axios 更加轻量化,只专注于网络数据请求

(2)axios发起GRT/POST请求

请求的 URL 地址
请求的参数对象
get请求: axios.get('url', { params: { /*参数*/ } }).then(callback)
post 请求： axios.post('url', { /*参数*/ }).then(callback)

 // 请求的 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)
 })

(3)直接使用axios发起请求

 // GET 参数要通过 params 属性提供    POST 数据要通过 data 属性提供
     axios({
         method: '请求类型',
         url: '请求的URL地址',
         data: { /* POST数据 */ } 或  params: { /* GET参数 */ }
     }) .then(callback)

五.跨域与JSONP

1.同源策略和跨域

(1)同源

同源: 两个页面的协议,域名和端口(:数字默认80)都相同,则两个页面具有相同的源

(2)同源策略

Same origin policy, 是浏览器提供的一个安全功能
MDN 官方给定的概念: 同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互. 这是一个用于隔离潜在恶意文件的重要安全机制

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

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

(3)跨域

两个 URL 的协议,域名,端口任何一项或多项不一致,则是跨域
出现跨域的根本原因:浏览器的同源策略不允许非同源的 URL 之间进行资源的交互

浏览器对跨域请求的拦截

实现跨域数据请求

JSONP: 出现早,兼容性好(兼容低版本IE), 是前端程序员为了解决跨域问题,被迫想出来的一种临时解决方案. 缺点是只支持GET请求,不支持POST请求
CORS: 出现较晚, W3C 标准, 属于跨域Ajax请求的根本解决方案. 支持GET和POST请求. 缺点是不兼容某些低版本的浏览器

2.JSONP

(1)概念

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

(2)实现原理

由于浏览器同源策略的限制,网页中无法通过Ajax请求非同源的接口数据, 但 <script> 标签不受浏览器同源策略的影响,可以通过 src 属性,请求非同源的 js 脚本
JSONP 的实现原理: 通过<script>标签的src属性，请求跨域的数据接口,并通过函数调用的形式,接收跨域接口响应回来的数据

		<script>
			// JSONP实现原理
			// 1. 定义函数
			function success(data){
				console.log('OK');
				console.log(Object);
			}
		</script>
        <!-- 通过 <script> 标签，请求接口数据       查询字符串(后可接参数)形式告诉服务器需要调用哪个函数,服务器根据函数名返回函数调用 -->
		<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=mm">
			// 2. 调用函数     放入单独的js文件, 通过<script>标签src属性动态请求执行代码
			// success({name: 'mm', age: 18});
		</script>

(3)缺点

由于JSONP是通过 <script> 标签的 src 属性,来实现跨域数据获取的,所以,JSONP 只支持 GET 数据请求,不支持 POST 请求
注意：JSONP 和 Ajax 之间没有任何关系, 不能把JSONP请求数据的方式叫做Ajax,因为JSONP 没有用到XMLHttpRequest这个对象

(4) jQuery中的JSONP

    <script>
        $(function(){
            // jq发起JSONP请求
            $.ajax({
                url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
                // 如果要使用 $.ajax() 发起 JSONP 请求，必须指定 datatype 为 jsonp
                dataType: 'jsonp',
                // 发送到服务端的参数名称，默认值为 callback
                jsonp: 'call',    //自定义属性       callback --> call
                // 自定义的回调函数名称，默认值为 jQueryxxx 格式      默认情况下，使用jQuery发起JSONP请求，会自动携带一个callback=jQueryxxx的参数，jQueryxxx 是随机生成的一个回调函数名称
                jsonpCallback: 'abc',
                success: function(res){
                    console.log(res); 
                }
            })
        })
    </script>

(5)jQuery中JSONP实现过程

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

3.防抖和节流

(1)防抖

防抖策略(debounce)是当事件被触发后,延迟 n 秒后再执行回调,如果在这 n 秒内事件又被触发,则重新计时
应用场景: 用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源

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

(2)节流

节流策略(throttle),可以减少一段时间内事件的触发频率
应用场景: 鼠标连续不断地触发某事件(如点击), 只在单位时间内只触发一次; 懒加载时要监听计算滚动条的位置,但不必每次滑动都触发,可以降低计算的频率,而不必去浪费 CPU 资源

节流阀

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

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