Ajax

客户端与服务器

服务器：负责存放和对外提供资源的电脑

客户端：负责获取和消费资源的电脑

URL地址：统一资源定位符（看作身份证号），表示互联网上每一个资源的唯一存放位置

由三部分组成

通信协议
服务器名称
具体的存放位置

客户端与服务器的通信过程：请求-处理-响应

在网页中请求服务器上的数据资源，需要使用XMLHttpRequest对象

用法：var xhrObj=new XMLHttpRequest()

常见的两种请求方式

get请求用于获取服务器资源

例如获取图片，音频等

post请求常用语向服务器提交数据

例如：登陆、注册等

Ajax可以实现网页与服务器之间的数据交互

应用场景：

用户名检测：注册时，通过ajax形式，动态监测用户名是否被占用。

搜索提示：当输入关键字，通过ajax形式，动态提供列表。

数据的增删改查，实现数据的交互

$.get()函数

<button id="btnGET">发起不带参数的Get请求</button>
    <script>
        $(function () {
            $("#btnGET").on("click", function () {
                $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
                    console.log(res);
                })
            })
        })
    </script>

通过XHR页签监听请求

<button id="btnGET">发起带参数的Get请求</button>
    <script>
        $(function () {
            $("#btnGET").on("click", function () {
                $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 2 }, function (res) {
                    console.log(res);
                })
            })
        })
    </script>

$.post()函数

<button id="btnPOST">发起post请求</button>
    <script>
        $(function () {
            $("#btnPOST").on("click", function () {
                $.post("http://www.liulongbin.top:3006/api/addbook", {
                    bookname: '活出生命的意义',
                    author: '美国人',
                    publisher: '天津出版社'
                }, function (res) {
                    console.log(res);
                })
            })
        })

    </script>

$.ajax()函数

功能综合

使用$.ajax()发起get请求

   <button id="btnGET">发起get请求</button>
    <script>
        $(function () {
            $("#btnGET").on("click", function () {
                $.ajax({
                    type: 'GET',
                    url: 'http://www.liulongbin.top:3006/api/getbooks',
                    data: {
                        id: 1
                    },
                    success: function (res) {
                        console.log(res);
                    }
                })
            })
        })
    </script>

使用$.ajax()发起post请求

    <button id="btnPOST">发起post请求</button>
    <script>
        $(function () {
            $("#btnPOST").on("click", function () {
                $.ajax({
                    type: 'POST',
                    url: 'http://www.liulongbin.top:3006/api/addbook',
                    data: {
                        bookname: '活出生命的意义',
                        author: '美国人',
                        publisher: '天津出版社'
                    },
                    success: function (res) {
                        console.log(res);
                    }
                })
            })
        })
    </script>

接口

使用ajax请求数据时，被请求的URL地址，就叫做数据接口，同时每个接口必须有请求方式。

获取图书的接口：http://www.liulongbin.top:3006/api/getbooks

添加图书的接口：http://www.liulongbin.top:3006/api/addbook

Postman测试接口过程

选择请求方式
填写请求的URL地址
填写请求的参数
点击Send按钮发起GET请求
查看服务器相应的结果

Postman测试POST接口

步骤：

选择请求的方式
填写请求的URL地址
选择Body面板并勾选数据格式
填写要发送到服务器的数据
点击Send按钮发起POST请求
查看服务器响应的结果

接口文档

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

接口文档的组成部分

接口名称：标识接口

接口URL：接口调用地址

调用方式：如get和post

参数格式：接口需压迫传递的参数，每个参数必须包括参数名称、参数类型、是否必选、参数说明这四项内容

响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明

返回事例（可选）：通过对象的形式，例举返回数据的结构

案例：图书的增删改查

<link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>

<body style="padding: 15px;">
    <!-- //添加图书的panel面板 -->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加新图书</h3>
        </div>
        <div class="panel-body form-inline">

            <div class="input-group">
                <div class="input-group-addon">书名</div>
                <input type="text" class="form-control" id="iptBookname" placeholder="请输入书名">
            </div>
            <div class="input-group">
                <div class="input-group-addon">作者</div>
                <input type="text" class="form-control" id="iptAuthor" placeholder="请输入作者">
            </div>
            <div class="input-group">
                <div class="input-group-addon">出版社</div>
                <input type="text" class="form-control" id="iptpublisher" placeholder="请输入出版社">
            </div>
            <button id="btnAdd" class="btn btn-primary">添加</button>
        </div>
    </div>
    <!-- 图书的表格 -->

    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tb">
        </tbody>
    </table>


    <script>
        $(function () {
            //获取图书列表的数据
            function getBookList() {
                $.get("http://www.liulongbin.top:3006/api/getbooks", function (res) {
                    // console.log(res);
                    if (res.status !== 200) return alert("获取数据失败");
                    var rows = [];
                    $.each(res.data, function (i, item) {
                        rows.push("<tr><td>" + item.id + "</td><td>"
                            + item.bookname + "</td><td>" + item.author +
                            "</td><td>" + item.publisher +
                            "</td ><td><a href='javascript:;' class='del' data-id='" + item.id + "'>删除</a></td></tr > ");

                    })
                    $("#tb").empty().append(rows.join(''));
                })
            }
            getBookList();
            $("tbody").on("click", ".del", function () {
                var id = $(this).attr("data-id");
                $.get('http://www.liulongbin.top:3006/api/delbook', { id: id }, function (res) {
                    if (res.status !== 200) return alert("删除失败！");
                    getBookList();
                });
            })
            $("#btnAdd").on("click", function () {
                var bookname = $("#iptBookname").val().trim();
                var author = $("#iptAuthor").val().trim();
                var publisher = $("#iptpublisher").val().trim();
                if (bookname.length <= 0 || author.length <= 0 || publisher.length <= 0) {
                    return alert('请填写完整的图书信息！');
                };
                $.post("http://www.liulongbin.top:3006/api/addbook",
                    {
                        bookname: bookname, author: author, publisher: publisher
                    }, function (res) {
                        if (res.status !== 201) { return alert("添加错误") }
                        getBookList();
                        $("#iptBookname").val('');
                        $("#iptAuthor").val('');
                        $("#iptpublisher").val('');

                    });
            })

        })
    </script>
</body>

form表单

在网页中负责数据采集，HTML中form标签，用于采集用户输入的信息，并通过form标签提交操作，把采集到的信息提交到服务器端处理。

action属性：规定当提交表单时，提交的地址.

当form表单未指定URL，那么则将数据提交到当前页面的URL

也可以理解action的默认值为当前页面的URL

target属性：规定在何处打开action URL

一般情况下给target设置两种值：

_blank :在新窗口中打开

_self：默认在相同的框架中打开

method属性：规定以何种方式把表单提交到action URL

可选值为get和post

默认情况的值为get

enctype属性：规定在发送表单之前如何对数据进行编码

默认情况下值：application/x-www-form-urlencoded

如果涉及文件上传，必须要将enctype值设置为：multipart/form-data

表单的同步提交

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

缺点：

页面跳转
页面之前的状态和数据会丢失

采用ajax将数据提交到服务器，表单值负责采集数据

监听表单提交事件

两种方法

<form id="f1" action="/login" target="_blank" method="post">
        <input type="text" name="email_or_mobile" />
        <input type="password" name="password" />
        <button type="submit">提交</button>
    </form>
    <script>
        $(function () {
            //one
            // $("#f1").submit(function () {
            //     alert("监听到表单提交");
            // })
            //two
            $("#f1").on("submit", function () {
                alert("监听到表单提交");
            })
        })
    </script>

阻止表单默认行为

当监听到表单的提交事件后，可以调用事件对象的event.preventDefault()函数，来阻止表单的提交和页面的跳转。

//阻止表单的默认提交行为
            //one
            // $("#f1").submit(function (e) {
            //     e.preventDefault();
            // });
            //two
            $("#f1").on("submit", function (e) {
                e.preventDefault();
            })

快速获取表单中的数据

//快速获取表单的值
            //one
            $("#f1").submit(function (e) {
                e.preventDefault();
                var data = $(this).serialize();
                console.log(data);
            });

案例：评论发表

<body style="padding: 15px;">
    <!-- //1.评论面板 -->

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">发表评论</h3>
        </div>
        <form class="panel-body" id="formAddcmt">
            <div>评论人：</div>
            <input type="text" class="form-control" name="username" />
            <div>评论内容：</div>
            <textarea class="form-control" name="content"></textarea>
            <button type="submit" class="btn btn-primary">发表评论</button>
        </form>
    </div>
    <!-- //评论列表 -->

    <ul class="list-group" id="cmt-list">
        <li class="list-group-item">
            <span class="badge" style="background-color:#f0ad4e;">评论时间</span>
            <span class="badge" style="background-color: #5bc0de;">评论人</span>
            Item 1
        </li>

    </ul>

    <script>
        function getComment() {
            $.ajax({
                method: 'GET',
                url: 'http://www.liulongbin.top:3006/api/cmtlist',
                data: {},
                success: function (res) {
                    console.log(res);
                    if (res.status != 200) return alert('获取失败');
                    // console.log('success');
                    var rows = [];
                    $.each(res.data, function (i, item) {
                        var str = '<li class="list-group-item"><span class="badge" style="background-color:#f0ad4e;">评论时间' + item.time +
                            '</span><span class="badge" style="background-color: #5bc0de;">评论人'
                            + item.username + '</span>' + item.content + '</li > ';
                        rows.push(str);
                    });
                    $("#cmt-list").empty().append(rows.join(''));
                }
            })
        }
        getComment();

        $(function () {
            $("#formAddcmt").submit(function (e) {
                e.preventDefault();
                var data = $(this).serialize();
                $.post('http://www.liulongbin.top:3006/api/addcmt', data, function (res) {
                    if (res.status !== 201) {
                        return alert("发表评论失败");
                    }
                    getComment();
                    $("#formAddcmt")[0].reset();//转成原生的dom对象
                })
            })
        })
    </script>


</body>

模版引擎

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

优点：

减少字符串的拼接操作

使代码结构更清晰

使代码更易于阅读与维护

art-template

简约、超快的模版引擎

<body>
    <div id="container"></div>
    <!-- 定义模版 -->
    <script type="text/html" id="tpl">
        <h1>{{name}}----{{age}}</h1>
        <!-- //双花括号代表占位符 -->
    </script>

    <script>
        // 定义需要渲染的数据
        var data = { name: "ss", age: 20 };

        //调用template函数
        var str = template('tpl', data);
        console.log(str);
        //渲染html结构
        $("#container").html(str);
    </script>
</body>

Art-template标准语法

{{}}内可以进行变量输出、对象属性的输出、三元表达式的输出，逻辑或输出、加减乘除表达式的输出、过滤器

   <div id="container"></div>
    <!-- 定义模版 -->
    <script type="text/html" id="tpl">
        <h1>{{name}}----{{age}}</h1>
        {{@test}}
        <!-- //双花括号代表占位符 -->
        <!-- 1.条件语句 -->
        <div>
            {{if flag===0 }}
            flag的值是0
            {{else if flag===1}}
            flag的值是1
            {{/if}}
        </div>
        <!--2. 循环输出 -->
        <ul>
            {{each hobby}}
            <li>索引是：{{$index}}:{{$value}}</li>
            {{/each}}
        </ul>
        <h3>{{regTime | dateFormat}}</h3>
    </script>

    <script>
        //3.过滤器函数
        template.defaults.imports.dateFormat = function (date) {
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            return y + '-' + m;
        }
        // 定义需要渲染的数据
        var data = {
            name: "ss", age: 20, test: '<h3>测试原文输出</h3>', flag: 1, hobby: ['吃饭', '看书', '写代码']
            , regTime: new Date()
        };

        //调用template函数
        var str = template('tpl', data);
        console.log(str);
        //渲染html结构
        $("#container").html(str);
    </script>

正则与字符串操作

    <script>
        var str = '<div>我是{{name}}</div>';
        var pattern = /{{([a-zA-Z]+)}}/;
        var patternResult = pattern.exec(str);
        console.log(patternResult);
    </script>

replace函数

    <script>
        var str = '<div>我是{{name}}</div>';
        var pattern = /{{([a-zA-Z]+)}}/;
        var patternResult = pattern.exec(str);
        str = str.replace(patternResult[0], patternResult[1]);
        console.log(patternResult);
        console.log(str);
    </script>

多次replace操作

   <script>
        var str = '<div>我是{{name}}年龄{{age}}</div>';
        var pattern = /{{\s*([a-zA-Z]+)\s*}}/;
        var patternResult = pattern.exec(str);
        //第一次替换
        str = str.replace(patternResult[0], patternResult[1]);
        console.log(patternResult);
        console.log(str);
        var patternResult = pattern.exec(str);
        //第二次替换
        str = str.replace(patternResult[0], patternResult[1]);
        console.log(patternResult);
        console.log(str);
    </script>

换种思路：循环使用

        var str = '<div>我是{{name}}年龄{{age}}</div>';
        var pattern = /{{\s*([a-zA-Z]+)\s*}}/;
        //循环replace
        var patternResult = null;
        while (patternResult = pattern.exec(str)) {
            str = str.replace(patternResult[0], patternResult[1]);
        }
        console.log(str);

replace替换为真值

        var data = { name: '张三', age: 20 };
        var str = '<div>我是{{name}}年龄{{age}}</div>';
        var pattern = /{{\s*([a-zA-Z]+)\s*}}/;
        //循环replace
        var patternResult = null;
        while (patternResult = pattern.exec(str)) {
            str = str.replace(patternResult[0], data[patternResult[1]]);
        }
        console.log(str);

调用自己的模版引擎

html文件

<div id="user-box"></div>
    <script type="text/html" id="tpl">
    <div>姓名：{{name}}</div>
    <div>年龄：{{age}}</div>
    <div>性别：{{gender}}</div>
    <div>地址：{{address}}</div>
    </script>

    <script>
        //定义数据
        var data = {
            name: '张三', age: 20, gender: '男',
            address: 'shanghai'
        };
        //调用引擎模版
        var htmlstr = template("tpl", data);
        //渲染html结构
        document.getElementById("user-box").innerHTML = htmlstr;

    </script>

自己的template.js文件

function template(id, data) {
    var str = document.getElementById(id).innerHTML;
    var pattern = /{{\s*([a-zA-Z]+)\s*}}/;
    //循环replace
    var patternResult = null;
    while (patternResult = pattern.exec(str)) {
        str = str.replace(patternResult[0], data[patternResult[1]]);
    }
    return str;

}

XMLHttpRequest的基本使用

可以请求服务器上的数据资源，ajax函数就是基于xhr对象封装出来的

<script>
        //使用XHR进行get请求
        //1.创建XHR对象
        var xhr = new XMLHttpRequest();
        //2.调用open函数
        xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");
        //3.调用send函数
        xhr.send();
        //4.监听
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //获取响应结果
                console.log(xhr.responseText);
            }
        }
    </script>

带参数的get请求

xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=1");

如何对URL进行编码和解码

    <script>
        var str = '黑马程序员';
        //编码
        var str2 = encodeURI(str);
        console.log(str2);
        //解码
        var str3 = decodeURI(str2);
        console.log(str3);
    </script>

使用XHR进行POST请求

        //使用XHR进行post请求
        //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.监听
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //获取响应结果
                console.log(xhr.responseText);
            }
        }

数据交换格式

服务器端与客户端进行数据传输与交换的格式

主要使用JSON 和 XML

XML：可扩展标记语言

HTM L是用来描述网页上的内容，是网页内容的载体
XML是用来传输和存储数据，是数据的载体

缺点：格式复杂，和数据无关的代码多，体积大，传输效率低，在js中解析XML比较麻烦。

JSON：js对象和数组的字符串表示法，一种轻量级的文本数据交换格式，主流交换格式。

JSON的两种结构

对象结构和数组结构，字符串用双引号，数据类型可以是数字、字符串、布尔值、null、数组、对象

JSON的作用：在计算机与网络之间存储和传输数据

JSON的本质：用字符串来表示js对象数据和数组数据

JSON和JS对象的互转

        //JSON-->JS
        var jsonStr = '{"a":"hello","b":"hi"}';
        var jsStr = JSON.parse(jsonStr);
        console.log(jsStr);
        //JS-->JSON
        var jsStr = { a: 'hello', b: 'hi' };
        var jsonStr = JSON.stringify(jsStr);
        console.log(jsonStr);
//应用场景
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
                var result = JSON.parse(xhr.responseText);
                console.log(result);
            }
        }

序列化和反序列化

把数据对象转换为字符串的过程叫做序列化，

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

封装自己的Ajax函数

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

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

// var res = resolveData({ name: "ss", age: 20 });
// console.log(res);
function itheima(options) {
    var xhr = new XMLHttpRequest();
    //把外界传递过来的参数对象转换为查询字符串
    var qs = resolveData(options.data);
    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-urlencode');
        xhr.send(qs);
    }
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var result = JSON.parse(xhr.responseText);
            options.success(result);
        }
    }
}

测试

    <script>
        // //测试get
        // itheima({
        //     method: 'GET',
        //     url: 'http://www.liulongbin.top:3006/api/getbooks',
        //     data: {
        //         id: 1
        //     },
        //     success: function (res) {
        //         console.log(res);
        //     }
        // })
        //测试post
        itheima({
            method: 'POST',
            url: 'http://www.liulongbin.top:3006/api/addbook',
            data: {
                bookname: '水浒传',
                author: '施耐庵',
                publisher: '上海出版社'
            },
            success: function (res) {
                console.log(res);
            }
        })
    </script>

XMLHttpRequest level2的新特性

1.设置HTTP请求时限

<script>
        var xhr = new XMLHttpRequest();
        //设置超时函数
        xhr.timeout = 3;
        //设置超时后的处理函数
        xhr.ontimeout = function () {
            console.log('请求超时');
        }
        //  1.创建XHR对象
        var xhr = new XMLHttpRequest();
        //2.调用open函数
        xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=1");
        //3.调用send函数
        xhr.send();
        //4.监听
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //获取响应结果
                console.log(xhr.responseText);
            }
        }
    </script>

使用Form Data对象管理表单数据

   <script>
        //1.创建formdata实例
        var fd = new FormData();
        //2.调用append函数 向fd中追加数据
        fd.append('uname', 'ss');
        fd.append('upwd', '123456');

        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(xhr.responseText);
            }
        }
    </script>

获取网页表单的值

    <form id="form1">
        <input type="text" name="uname" autocomplete="off" />
        <input type="password" name="upwd" />
        <button type="submit"></button>
    </form>
    <script>
        var form = document.querySelector("#form1");
        form.addEventListener('submit', function (e) {
            e.preventdefault();
            //1.创建formdata实例
            var fd = new FormData();
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '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));
                }
            }
        })

axios

专注于网络数据请求的库，只专注于网络数据请求

使用axios发送get请求

    <button id="btn1">发起get请求</button>
    <script>
        document.querySelector("#btn1").addEventListener("click", function () {
            var url = "http://liulongbin.top:3306/api/get";
            var paramsobj = { name: 'ss', age: 20 }
            axios.get(url, { params: paramsobj })
                .then(function (res) {
                    console.log(res);
                })

        })
    </script>

使用axios发送post请求

    <button id="btn2">发起post请求</button>
    <script>
        document.querySelector("#btn2").addEventListener("click", function () {
            var url = "http://liulongbin.top:3306/api/post";
            var dataobj = { address: '上海', location: '浦东' };
            axios.post(url, { params: dataobj })
                .then(function (res) {
                    console.log(res.data);
                })
        })
    </script>

直接使用axios发送get请求

    <button id="btn3">直接发起get请求</button>
    <script>
        document.querySelector("#btn3").addEventListener("click", function () {
            var url = "http://liulongbin.top:3306/api/get";
            var paramsobj = { name: 'ss', age: 20 };
            axios({
                method: 'get',
                url: url,
                params: paramsobj
            }).then(function (res) {
                console.log(res.data);
            })
        })
    </script>

直接使用axios发送post请求

    <button id="btn4">直接发起post请求</button>
    <script>
        document.querySelector("#btn4").addEventListener("click", function () {
            var url = "http://liulongbin.top:3306/api/post";
            var dataobj = { name: 'ss', age: 20 };
            axios({
                method: 'post',
                url: url,
                data: dataobj
            }).then(function (res) {
                console.log(res.data);
            })
        })
    </script>

同源

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

同源策略

浏览器提供的一个安全功能

跨域

与同源相反的就是跨域

出现跨域的根本原因：浏览器不允许非同源的URL之间进行资源交互

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

实现跨域请求JSONP和CORS

JSONP：出现早，兼容性好，只支持get

CORS：出现晚，W3C标准，支持get和post，兼容性不好

JSONP

实现原理：通过script标签的src属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。

<body>
    <script>
        function success(data) {
            console.log('JSONP响应回来的数据是');
            console.log(data);
        }
    </script>
    <script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=ls&age=30"></script>
</body>

jQuery中的JSONP

   <script>
        $(function () {
            //发起JSONP的请求
            $.ajax({
                url: "http://ajax.frontend.itheima.net:3006/api/jsonp?name=ss&age=20",
                //代表我们发起JSONP的数据请求
                dataType: 'jsonp',
                success: function (res) {
                    console.log(res);
                }
            })
        })
    </script>

节流

指减少一段时间内事件的处罚频率

应用场景：当鼠标连续不断的触发某事件（如点击），只在单位时间内只触发一次；

懒加载要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必浪费CPU的资源。

节流案例-鼠标跟随效果

节流阀：节流阀为空，表示可以执行下一次操作；不为空，表示不能执行下次操作。

当前操作操作执行完，必须将节流阀重置为空，表示可以执行下次操作了。

每次执行操作前，必须先判断节流是否为空。

<img src="cmq.JPG" id="cmq">
    <script>
        $(function () {
            //不使用节流
            //1.获取图片
            var cmq = $('#cmq');
            //(1)定义节流阀
            var timer = null;
            //2.绑定事件
            $(document).on('mousemove', function (e) {
                //(3)判断节流阀是否为空
                if (timer) {
                    return
                }
                //(2)开启延时器
                timer = setTimeout(function () {
                    $(cmq).css("top", e.pageY + 'px').css("left", e.pageX + 'px');
                    timer = null;
                }, 16)

            })
        })
    </script>