ajax介绍以及方法示例

最新推荐文章于 2022-09-20 00:30:54 发布

苑谁谁

最新推荐文章于 2022-09-20 00:30:54 发布

阅读量732

点赞数

文章标签： ajax ajax跨域问题

本文链接：https://blog.csdn.net/weixin_42322529/article/details/111876796

版权

1. Ajax基础

传统网站中存在的问题

网速慢的情况下，页面加载时间长，用户只能等待
表单提交后，如果一项内容不合格，需要重新填写所有表单内容
页面跳转，重新加载页面，造成资源浪费，增加用户等待时间

概述

https://www.runoob.com/ajax/ajax-tutorial.html

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

应用场景

页面上拉加载更多数据
列表数据无刷新分页
表单项离开焦点数据验证
搜索框提示文字下拉列表

运行环境

Ajax 技术需要运行在网站环境中才能生效，当前课程会使用 Node 创建的服务器作为网站服务器。

2. Ajax 运行原理及实现

运行原理

Ajax 相当于浏览器发送请求和接收响应的代理人，以实现在不影响用户浏览页面的情况下，拒不更新页面数据，从而提高用户体验。

在这里插入图片描述

实现步骤

创建 Ajax 对象

// XML 指的是服务器端和客户端传输数据的内容格式，现在都是 json 格式
var xhr = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

var xhr =new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

// 第一个参数是数据传输方式，第二个参数是请求地址，即路由请求地址
xhr.open('get','http://www.example.com');
xhr.send();

获取服务器端给客户端的响应数据

// 由于请求受网络快慢影响，是需要一定时间才能完成的，并不确定
xhr.onload = function(){
    console.log(xhr.responseText);
}

html

 
<script>
        // 1.创建 ajax 对象
        var xhr = new XMLHttpRequest();

        // 2.告Ajax 对象要想哪发送请求，以什么方式发送请求
        //      2.1 第一个参数是请求方式
        //      2.2 第二个参数是请求地址
        xhr.open('get', 'http://localhost:3000/first');

        // 发送请求
        xhr.send();

        // 4.获取服务器端响应到客户端的数据
        xhr.onload = function() {
            console.log(xhr.responseText);
        }
    </script>

app.js

   
   // 为 Ajax 添加路由
   app.get('/first', (req, res) => {
       res.send('Hello Ajax');
   })

服务器端响应的数据格式

在真实的项目中，服务器端大多数情况下会以 JSON 对象作为响应数据的格式。当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，然后将拼接的结果展示在页面中。

在 http 请求响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。

JSON.parse();// 将字符串转换为 json 对象

请求参数传递

get 请求参数的传递

传统网站表单提交

<form method="get" action="http://www.example.com">
    <input type="text" name="username"/>
    <input type="password" name="password"/>
</form>
<!- http://wwwexamplecom?username=yuanshuai&password=123456 -->

Ajax 中 get 请求方式的参数传递方法

xhr.open('get','http://example.com?username=yuanshuai&age=20');

示例

<body>
    <p>
        <input type="text" id="username">
    </p>
    <p>
        <input type="text" id="age">
    </p>
    <p>
        <input type="button" value="提交" id="btn">
    </p>
    <script>
        // 获取按钮
        var btn = document.getElementById('btn');
        // 获取年龄文本框
        var age = document.querySelector('#age');
        // 获取姓名文本框和
        var username = document.querySelector('#username');
        // 为按钮添加点击事件
        btn.onclick = function() {
            // 创建 Ajax 对象
            var xhr = new XMLHttpRequest();
            // 获取用户在文本框中输入的值
            var ageValue = age.value;
            var nameValue = username.value;
            // 拼接请求参数
            var params = 'username=' + nameValue + '&age=' + ageValue
                // 配置 ajax 对象
            xhr.open('get', 'http://localhost:3000/get?' + params);
            // 发送请求
            xhr.send();
            // 获取服务器点响应的数据
            xhr.onload = function() {
                console.log(JSON.parse(xhr.responseText));
            }
        }
    </script>
</body>

app.js

app.get('/get', (req, res) => {
    res.send(req.query)
})

post 请求参数的传递

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send('name=zhangsan&age=20');

示例：

 
// body-parser 需要use


<body>
    <p>
        <input type="text" id="username">
    </p>
    <p>
        <input type="text" id="age">
    </p>
    <p>
        <input type="button" value="提交" id="btn">
    </p>
    <script>
        // 获取按钮
        var btn = document.getElementById('btn');
        // 获取年龄文本框
        var age = document.querySelector('#age');
        // 获取姓名文本框和
        var username = document.querySelector('#username');
        // 为按钮添加点击事件
        btn.onclick = function() {
            // 创建 Ajax 对象
            var xhr = new XMLHttpRequest();
            // 获取用于在文本框中输入的值
            var nameValue = username.value;
            var ageValue = age.value;
            // console.log(nameValue, ageValue);
            // 拼接请求参数
            var params = 'username=' + nameValue + '&age=' + ageValue;
            // console.log(params);
            // 配置 Ajax 对象
            xhr.open('post', 'http://localhost:3000/post');
            // 设置请求参数格式的类型 （post 请求必须要设置）
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            // 发送请求
            xhr.send(params);
            // 获取服务器端响应的数据
            xhr.onload = function() {
                console.log(xhr.responseText);
            }
        }
    </script>
</body>

请求报文

在 http 请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守规定好的格式。

在这里插入图片描述

请求参数的格式

application/x-www-form-urlencoded
```
name=zhangsan&age=20
```
application/json
```
{name="zhangsan",age="20",sex:'男'}
```
在请求头中指定 Content-Type 属性的值是 application/json ，告诉服务器端当前请求参数的格式是 json。
```
xhr.setHeaderRequest('Content-Type','application/json');
```
因为向服务器端传递的数据类型为字符串，所以需要调用 JSON.stringify 方法来讲 json 对象转换为字符串。
```
JSON.stringify({name='zhangsan',age='20'});
```

注意：get 请求时不能提交 json 对象数据格式的，传统网站的表单提交也是不支持 json 对象数据格式的。

获取服务器端的响应

Ajax 状态码

在创建 Ajax 对象、配置 ajax 对象、发送请求以及接收完服务器端响应数据的整个过程中，没一个步骤都会对应一个数值，这个数值就是 ajax 状态码。

状态码 0 ：请求未初始化（已经创建了 Ajax 对象，还没有调用 open() ）
状态码 1 ：请求已经建立，但是还没有发送（还没有调用send() ）
状态码 3 ：请求已经发送（就是已经调用了send() ）
状态码 3 ：请求正在处理中，通常响应中已经有部分数据可以用了（正在接收服务器端的响应数据）
状态码 4 ：响应已经完成，可以获取并使用服务器的响应数据了

xhr.readyState  // 获取 Ajax 状态码

onreadystatechange 事件

当 Ajax 状态码发生变化时将自动触发该事件。

        // 1. 创建 Ajax 对象
        var xhr = new XMLHttpRequest();
        console.log(xhr.readyState); // 0 已经创建了 Ajax 对象，但是还没有对 ajax 对象进行配置

        // 2. 配置 Ajax 对象，告诉服务器端 是什么请求方式以及请求的地址
        xhr.open('get', 'http://localhost:3000/readystate');
        console.log(xhr.readyState); // 1 已经对 ajax 对象进行了配置，但是还没有发送请求

        // 3. 当 ajax 状态码发生变化的时候触发 onreadystatechange,该事件需要放在 send 发送请求之前
        xhr.onreadystatechange = function() {
            // 2 ：请求已经发送
            // 3 ：已经接收到服务器端的部分数据了
            // 4 ：服务器端的响应数据已经接收完成
            console.log(xhr.readyState);

            // 对 Ajax 状态码进行判断
            // 如果状态码的值为 4 ，就代表数据已经接收完成了
            if (xhr.readyState == 4) {
                console.log(xhr.responseText);

            }
        }

        // 4. 发送请求
        xhr.send();

两种获取服务器端响应方式的区别：

区别描述	onload 事件	onreadystatechange 事件
是否兼容 IE 低版本	不兼容	兼容
是否需要判断 Ajax 状态码	不需要	需要
被调用次数	一次	多次

如果不需要兼容 IE 低版本浏览器的时候，推荐使用 onload 事件

错误处理

网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期的结果。

可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http 状态码

html:

<body>
    <button id="btn">发送 Ajax 请求</button>
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function() {
            // 创建 Ajax 对象
            var xhr = new XMLHttpRequest();
            // 配置 Ajax 对象
            xhr.open('get', 'http://localhost:3000/error');
            // 发送请求
            xhr.send();
            // 获取服务器端响应到客户端的数据
            xhr.onload = function() {
                console.log(xhr.responseText);
                // xhr.status 获取 http 状态码
                if (xhr.status == 400) {
                    alert('请求出错')
                };
            }
        }
    </script>
</body>

app:

app.get('/error', (req, res) => {
    res.status(400).send('not ok')
})

网络畅通，服务器端没有接收到请求，返回状态码 404，代表请求地址不存在。

检查请求地址是否错误
```
 xhr.open('get', 'http://localhost:3000/error11');
```

网路畅通，服务器端能接收到请求，服务器端返回 500 状态码。

服务器端错误，找后端程序员进行沟通。

app.get('/error', (req, res) => {
    console.log(abc);// 服务器端操作不存在的变量，此时返回的是500状态码
})

当网络中断，请求无法发送到服务器端。

无法触发 onload 事件，而会触发 xhr 对象下面的 onerror 事件，在 onerror 事件处理函数中对错误进行处理。
```
   xhr.onerror = function() {
                alert('网络中断，无法发送 Ajax 请求，请连接网络后重试。')
            }
```

Http 状态码和 Ajax状态码区别

Ajax 状态码：表示 Ajax 请求的过程状态，由 Ajax 对象返回的

Http 状态码：表示请求的处理结果，是由服务器端返回的

低版本 IE 浏览器的缓存问题

问题：在低版本的 IE 浏览器中，Ajax 请求有点严重的缓存问题，即在请求地址不发生改变的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端依然拿到的是从缓存中获取的旧数据。

解决方案：在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同。

xhr.open('get','http://www.example.com?t=' + Math.random())

  var btn = document.getElementById('btn');
        btn.onclick = function() {
            var xhr = new XMLHttpRequest();
            // 解决方案：在请求地址后面加上请求参数，保证每一次请求中的请求参数不相同，但是参数不能和本身需要传递的参数相同
            // Math.random()  随机生成一个 0-1 之间的数字
            xhr.open('get', 'http://localhost:3000/cache?t=' + Math.random()); 
            xhr.send();
            // 因为低版本不支持 onload 所以此处使用 onreadystatechange
            xhr.onreadystatechange = function() { 
                 // 只有当 Ajax 状态码为 4 并且 http 状态码为 200 时，才能说明这次请求是成功的
                if (xhr.readyState == 4 && xhr.status == 200) { 
                    console.log(xhr.responseText);
                }
            }
        }

3. Ajax 异步编程

同步异步概述

同步编程

一个人同一时间只能做一件事情，只有一件事情做完，才能做另一件事情，也就是需要一件一件的做，比如先坐车，到家了再看书，看完书再做饭。

console.log('first');
console.log('second');

异步编程

一个人同一时间同时做几件事，比如坐车的同时看书，做饭的同时听英语等等

落实到代码上，就是异步代码虽然需要花费时间去执行，但程序不会等待异步代码执行完成后再继续执行后续代码，而是直接执行后续代码，当后续代码执行完成后再回头看异步代码是否返回结果，如果已有返回结果，再调用事先准备好的回调函数处理异步代码执行的结果。

console.log('first');
setTimeout(()=>{
    console.log('third')
},2000);
console.log('second')

Ajax 封装

问题：发送一次请求代码过多，发送多次请求代码冗余且重复。

解决方案：将请求代码封装到函数中，发送请求时调用函数即可。

  
        function ajax(options) {

            // 声明默认值对象
            var defaults = {
                type: 'get',
                url: '',
                data: {},
                header: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                success: function() {},
                error: function() {}
            }

            // 对象覆盖:使用 options 对象中的属性覆盖 defaults 对象中的属性
            Object.assign(defaults, options)
                // 创建对象
            var xhr = new XMLHttpRequest();

            // 拼接请求参数的变量
            var params = "";

            // 循环用户传递进来的对象格式参数，因为是对象格式，所以用 for in 循环
            for (var attr in defaults.data) {
                // 将参数转换为字符串格式
                params += attr + '=' + defaults.data[attr] + '&';
            }

            // 将参数最后面的 & 截取掉
            // 将截取后的结果重新赋值给 params 变量
            params = params.substr(0, params.length - 1);

            //判断请求方式
            if (defaults.type == 'get') {
                // 如果请求方式为 get ，就把请求参数拼接到地址栏后面
                defaults.url = defaults.url + "?" + params;
            }
            // 配置 Ajax 对象
            xhr.open(defaults.type, defaults.url);
            if (defaults.type == 'post') {
                // 用户希望的向服务器端传递的请求参数的类型
                var contentType = defaults.header['Content-Type'];
                // 如果请求方式是 post 首先要设置请求头的内容类型为
                xhr.setRequestHeader('Content-type', contentType);
                // 判断用户希望的请求参数格式的类型
                // 如果类型为 json
                if (contentType == 'application/json') {
                    // 向服务器端传递 json 数据格式的参数
                    xhr.send(JSON.stringify(defaults.data));
                } else {
                    // 想服务器端传递普通类型的请求参数
                    xhr.send(params);
                }
            } else {
                // 发送请求
                xhr.send();
            }

            // 监听 xhr 对象下面的 onload 事件
            // 当 xhr 对象接收完响应数据后触发
            xhr.onload = function() {

                // 获取服务器端返回时，响应头重的数据xhr.getResponseHeader()
                var contentType = xhr.getResponseHeader('Content-Type');
                // 服务器端返回的数据
                var responseText = xhr.responseText;
                // 服务器端返回数据的类型
                console.log('服务器端返回数据的类型是 ' + typeof responseText);


                // 如果响应类型中包含 application/json
                if (contentType.includes('application/json')) {
                    // 将 json 字符串转换为 json 对象
                    responseText = JSON.parse(responseText);
                    console.log('转换后的数据类型是  ' + typeof responseText);
                }
                // 当 http 状态码等于 200 的时候
                if (xhr.status == 200) {
                    // 请求成功 调用处理成功情况的函数
                    defaults.success(responseText);
                } else {
                    // 请求失败 调用处理失败情况的函数
                    defaults.error(responseText, xhr)
                }

            }
        }
        ajax({
            // 请求方式
            // type: 'get',
            // 请求地址
            url: 'http://localhost:3000/responseData',
            // data: {
            //     name: 'zhangsan',
            //     age: '20'
            // },
            // header: {
            //     'Content-Type': 'application/json'
            // },
            success: function(data) {
                console.log('这里是 success 函数打印的 ');
                console.log(data);
            },
            error: function(data, xhr) {
                console.log('这里是 error 的函数' + data);
                console.log(xhr);

            }
        });
        /*
        请求参数要考虑的问题
        1. 请求参数位置的问题
            请求参数传递到 ajax 函数内部，在函数内部根据请求方式的不同将请求参数防止在不同的位置
                get 方式：防止在请求地址后面
                post 方式 ：放在 send 方法中

        2. 请求参数格式
            2.1 application/x-www-form-urlencoded
                参数名称=参数值&参数名称=参数值   name=zhangsan&age=20

            2.2 application/json
                json 的格式 对象形式              {name:'zhangsan',}


        总结：1.传递对象数据类型对于函数的调用者更加友好
             2. 在函数内部对象数据类型转换为字符串数据类型 更加方便
         */

4. 模板引擎

模板引擎概述

作用：使用模板引擎提供的模板语法，可以将数据和HTML 拼接起来。

官方地址：http://aui.github.io/art-template/zh-cn/index.html

使用步骤

下载 art-template 模板引擎库文件并在 HTML 页面中引入库文件
```
<script src="./js/template-web.js"></script>
```

准备 art-template 模板

<script id="tpl" type="text/html"> // 为了方便写html 代码片段，所以将类型设置成 text/html
	<div class="box"></div>
</script>

告诉模板引擎将那一个模板和那个数据进行拼接

var html = template('tpl',{username:'zhangsan',age:'20'});

将拼接好的 html 字符串添加到页面中

document.getElementById('container').innerHTML = html;

通过模板语法告诉模板引擎，数据和 html 字符串要如何拼接

<script id="tpl" type="text/html">
	<div class="box"> {{ username }} </div>
</script>

 <div id="container"></div>
    <!-- 2. 准备 art-template 模板 -->
    <script id="tpl" type="text/html">
        <h1>{{username}}{{age}}</h1>
    </script>

    <!-- 3. 告诉模板引擎将哪个数据和哪个模板进行拼接 -->
    <!--    template 方法 -->
    <!--    3.1 第一个参数是模板的id -->
    <!--    3.2 第二个参数是对象类型的数据 -->
    <!--    3.3 方法的返回值是拼接好的 html 字符串 -->

    <script type="text/javascript">
        var html = template('tpl', {
            username: 'zhangsan',
            age: 20
        });
        console.log(html);
        document.getElementById('container').innerHTML = html;
    </script>

5. 案例

验证邮箱地址唯一性

获取文本框并为其添加离开焦点事件
离开焦点时，检测用户输入的邮箱地址是否符合规则
如果不符合规则，阻止程序向下执行并给出提示信息
向服务器端发送请求，检测邮箱地址是否被注册
根据服务器返回值决定客户端显示哪种信息

浏览器端：


    <!-- 引入 ajax 封装函数 -->
    <script src="./js/ajax.js"></script>
    <script>
        // 获取页面中的元素
        var emailInp = document.querySelector('#email');
        var info = document.getElementById('info');

        // 当文本框离开焦点后 onblur
        emailInp.onblur = function() {

            // 获取用户输入的邮箱地址
            var email = this.value;

            // 验证邮箱地址的正则表达式
            var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
            if (!reg.test(email)) {

                // 给出用户提示
                info.innerHTML = '当前地址不符合邮箱规则';

                // 让提示信息显示为错误提示信息的样式
                info.className = 'bg-danger';

                // 阻止程序向下执行
                return;
            }

            // 向服务器端发送请求
            ajax({
                type: 'get',
                url: 'http://localhost:3000/verifyEmailAdress',
                data: {
                    email: email
                },
                success: function(result) {
                    info.innerHTML = result.message;
                    info.className = 'bg-success';
                },
                error: function(result) {
                    info.innerHTML = result.message;
                    info.className = 'bg-danger';
                }
            })

        }
    </script>

服务器端：


app.get('/verifyEmailAdress', (req, res) => {
    // 接收客户端传递过来的邮箱地址
    const email = req.query.email;

    // 判断邮箱地址是否被注册
    if (email == 'ysh@ysh.com') {

        // 设置 http 状态码并对客户端做出响应
        res.status(400).send({
            message: '邮箱地址已经被注册，请更换其他邮箱'
        });
    } else {
        // 邮箱地址可用的情况
        // 对客户端做出响应
        res.send({ message: '恭喜，邮箱地址可用' });
    }

});

搜索框内容自动提示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-57GF4916-1609167180304)(C:\Users\YS\Desktop\微信截图_20200606162249.png)]

获取搜索框并为其添加用户输入事件
获取用户输入的关键字
向服务器端发送请求并携带关键字作为请求参数
将服务器端的响应数据显示在搜索框底部

浏览器端：


<body>
    <div class="container">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入搜索关键字" id="search">
            <ul class="list-group" id="list-box">

            </ul>
        </div>
        <script src="./js/ajax.js"></script>
        <script src="./js/template-web.js"></script>
        <script type="text/html" id="tpl">
            {{each result}}
            <li class="list-group-item">{{$value}}</li>
            {{/each}}
        </script>
        <script>
            // 获取用户搜索框
            var searchInp = document.getElementById('search');
            // 获取提示信息的文本框
            var listBox = document.getElementById('list-box');
            // 存储定时器的变量
            var timer = null;
            searchInp.oninput = function() {
                // 清楚上一次的定时器
                clearTimeout(timer);
                // 获取用户输入的内容
                var key = this.value;
                // 如果用户没有在搜索框中输入内容
                if (key.trim().length == 0) {
                    // 将提示下拉框隐藏掉
                    listBox.style.display = 'none';
                    // 阻止程序向下执行
                    return;
                }
                // 开启定时器 让请求延迟发送
                timer = setTimeout(function() {
                    // 向服务器端发送请求
                    // 向服务器端索取和用户输入关键字相关的内容
                    ajax({
                        type: 'get',
                        url: 'http://localhost:3000/searchAutoPrompt',
                        data: {
                            key: key
                        },
                        success: function(result) {
                            console.log(result);
                            // 使用模板引擎拼接字符串
                            var html = template('tpl', {
                                result: result
                            });
                            // 将拼接好的字符串显示页面中
                            listBox.innerHTML = html;
                            // 显示 ul 容器
                            listBox.style.display = 'block';
                        }
                    })
                }, 800);
            }
        </script>
    </div>
</body>

服务器端：


// 搜索框内容自动提示
app.get('/searchAutoPrompt', (req, res) => {

    // 搜索关键字
    const key = req.query.key;

    // 提示文字列表
    const list = [
        '黑马程序员',
        '黑马王子',
        '黑马程序员官网',
        '黑马程序员顺义校区',
        '黑马程序员学院报名系统',
        '传智播客',
        '传智博客前端与移动端开发',
        '传智播客大数据',
        '传智播客python',
        '传智播客java',
        '传智播客c++',
        '传智播客怎么样',
        '你好坏',
        '你好傻',
        '你好北京',
        '你好中国',
        '各国你好的说法'
    ];

    // 搜索结果
    let result = list.filter(item => item.includes(key));

    // 将查询的结果返回给客户端
    res.send(result);
});

省市区三级联动

通过接口获取省份信息
使用javascript 获取到省市区下拉框元素
将服务器端返回的省份信息显示在下拉框中
为下拉框元素添加表单值改变时间( onchange )
当用户选择省份时，根据省份 id 获取城市信息
当用户选择城市时，根据城市 id 获取县城信息

html:



<body>
    <div class="container">
        <div class="form-inline">
            <div class="form-group">
                <select class="form-control" id="province">
    </select>
            </div>
            <div class="form-group">
                <select class="form-control" id="city">
        <option value="">请选择城市</option>
    </select>
            </div>
            <div class="form-group">
                <select class="form-control" id="area">
        <option value="">请选择区域</option>
    </select>
            </div>
        </div>
    </div>

    <script src="./js/ajax.js"></script>
    <script src="./js/template-web.js"></script>

    <!-- 省份模板 -->
    <script type="text/html" id="provinceTpl">
        <option>请选择省份</option>
        {{each province}}
        <option value={{$value.id}}>{{$value.name}}</option>
        {{/each}}
    </script>

    <!-- 城市模板 -->
    <script type="text/html" id="cityTpl">
        <option>请选择城市</option>
        {{each city}}
        <option value={{$value.id}}>{{$value.name}}</option>
        {{/each}}
    </script>

    <!-- 区域模板 -->
    <script type="text/html" id="areaTpl">
        <option>请选择区域</option>
        {{each area}}
        <option value={{$value.id}}>{{$value.name}}</option>
        {{/each}}
    </script>


    <script>
        // 获取省市区下拉框元素
        var province = document.getElementById('province');
        var city = document.getElementById('city');
        var area = document.getElementById('area');
        // 获取省份信息
        ajax({
            type: 'get',
            url: 'http://localhost:3000/province',
            success: function(data) {
                // 将服务器端返回的数据和html进行拼接
                var html = template('provinceTpl', {
                    province: data
                });
                // 将拼接好的html字符串显示在页面中
                province.innerHTML = html;
            }
        });

        // 为省份的下拉框添加值改变事件
        province.onchange = function() {
            // 获取省份id
            var pid = this.value;

            // 清空县城下拉框中的数据
            var html = template('areaTpl', {
                area: []
            });
            area.innerHTML = html;

            // 根据省份id获取城市信息
            ajax({
                type: 'get',
                url: '/cities',
                data: {
                    id: pid
                },
                success: function(data) {
                    var html = template('cityTpl', {
                        city: data
                    });
                    city.innerHTML = html;
                }
            })
        };

        // 当用户选择城市的时候
        city.onchange = function() {
            // 获取城市id
            var cid = this.value;
            // 根据城市id获取县城信息
            ajax({
                type: 'get',
                url: 'http://localhost:3000/areas',
                data: {
                    id: cid
                },
                success: function(data) {
                    var html = template('areaTpl', {
                        area: data
                    });
                    area.innerHTML = html;
                }
            })
        }
    </script>
</body>

app 文件：



// 省市区联动
// 获取省份
app.get('/province', (req, res) => {
    res.json([{ id: '001', name: '黑龙江省' }, { id: '002', name: '四川省' }, { id: '003', name: '河北省' }, { id: '004', name: '江苏省' }])
});

// 获取城市
app.get('/cities', (req, res) => {
    // 获取省份id
    const id = req.query.id;
    // 城市信息
    const cities = {
            '001': [{
                id: '300',
                name: '哈尔滨市'
            }, {
                id: '301',
                name: '齐齐哈尔市'
            }],
            '002': [{
                id: '400',
                name: '成都市'
            }, {
                id: '401',
                name: '绵阳市'
            }, {
                id: '402',
                name: '德阳市'
            }, {
                id: '403',
                name: '攀枝花市'
            }]
        }
        // 响应
    res.send(cities[id]);
});


// 根据城市id获取县城
app.get('/areas', (req, res) => {
    // 获取城市id
    const id = req.query.id;
    // 县城信息
    const areas = {
        '300': [{
            id: '20',
            name: '道里区',
        }, {
            id: '21',
            name: '南岗区'
        }, {
            id: '22',
            name: '平房区',
        }, {
            id: '23',
            name: '松北区'
        }],
        '301': [{
            id: '30',
            name: '龙沙区'
        }, {
            id: '31',
            name: '铁锋区'
        }, {
            id: '32',
            name: '富拉尔基区'
        }]
    };
    // 响应
    res.send(areas[id] || []);
});

6. FormData

作用

模拟 HTML 表单，相当于将 HTML 表单映射成表单对象，自动将表单对象中的数据进行拼接成请求参数的格式。
支持异步二进制文件上传

使用方法

准备 HTML 表单


<form id="form">
    <!-- 不需要设置请求地址和请求方式，也不用提交按钮，因为不是传统的表单提交，而是Ajax -->
    <input type="text" name="username" />
    <input type="password" name="password" />
    <input type="button" />
</form>

将 HTML 表单转换为 FormData 对象


var form = document.getElementById('form');
var formData = new FormData(form);

提交表单对象,FormData 只能用在post请求
```
xhr.send(formData);
```

实例方法

get() 方法来获取表单对象中属性的值


formData.get('key');  // key 是表单的名称，也就是 name 值

set() 方法设置表单对象中属性的值



//如果设置的表单属性存在，那么就会覆盖当前值；
//如果设置的表单属性不存在，那么就会创建新的表单属性
set('key','value');  // key 为表单的 name 的值，value 是想要设置的值

delete() 方法删除表单对象中的键值对
```
formData.delete('key');
```
append() 方法想表单对象中追加属性值
```
formData.append('key','value');
```

注意：set 方法和 append 方法的区别是，在属性名已存在的情况下，set 方法会覆盖已有键名的值；append 方法会保留两个值。

FormData 二进制文件上传


/* 在html 中准备文件上传控件 */
<input type="file" id="file">


 <div class="container">
        <div class="form-group">
            <label>请选择上传文件</label>
            <input type="file" id="file">
            <div class="padding" id="box">
            	
            </div>
            <div class="progress">
                <div class="progress-bar" style="width:0%;" id="bar">0%</div>
            </div>
        </div>
    </div>
    <script>
        // 获取文件上传文件按钮
        var file = document.getElementById('file');
        var bar = document.getElementById('bar');
        // 获取图片预览窗口
        var box = document.getElementById("box");
        // 为文件上传按钮添加 onchange 事件
        file.onchange = function() {
            // 创建 FormData 表单对象
            var formData = new FormData();
            // 将用户选择的文件追加到 formData 表单对象中
            formData.append('attrName', this.files[0]);
            // 创建 ajax 对象
            var xhr = new XMLHttpRequest();
            //配置  ajax 对象
            xhr.open('post', 'http://localhost:3000/upload');
            //在文件上传过程中持续触发，直至文件上传完成
            xhr.upload.onprogress = function(ev) {
                    // ev.loaded 文件已经上传了多少
                    // ev.total  上传文件的总大小
                    var result = (ev.loaded / ev.total) * 100 + "%";
                    // 设置进度条的宽度
                    bar.style.width = result;
                    // 将百分比显示在进度条中
                    bar.innerHTML = result;
                }
                // 发送 ajax 请求
            xhr.send(formData);
            // 监听服务器端响应给客户端的数据
            xhr.onload = function() {
                // 如果 服务器端返回的 http 状态码为 200
                if (xhr.status == 200) {
                    // 将服务器返回的字符串类型数据转换成JSON对象数据
                    var result = JSON.parse(xhr.responseText);
                    // 为了避免用户看到图片加载过程导致用户体验下降，所以动态生成 img 标签
                    var img = document.createElement('img');
                    // 设置 img 的 src 属性
                    img.src = result.path;
                    // 当图片加载完时 ，触发 onload 事件
                    img.onload = function (){
                        // 将图片显示在页面中
                        box.appendChild(img);
                    }
                }
            }
        }
    </script>

服务器端：


app.post('/upload',(req,res)=>{
    // 创建 formidable 表单解析对象
    const form = new formidable.IncomingForm();
    // 设置客户端上传文件的存储路径
    form.uploadDir = path.join(__dirname,'public','iploads');
    // 保留上传文件的后缀名
    form.keepExtensions = true;
    // 解析客户端上传的文件
    form.parse(res,(err,fields,files)=>{
        res.send({
            path:files.path.split('public')[1];
        })
    })
})

FormData 文件上传进度展示


// 当用户选择文件时候
file.onchange = function (){
    // 文件上传过程中持续触发 onprogress 事件，直至上传全部完成
    xhr.upload.onprogress = function(ev){
        // (当前上传文件大小/文件总大小) * 100 + "%"
        // 将结果复制给进度条的宽度属性
        // ev.loaded 文件已经上传了多少
        // ev.total  上传文件的总大小
        bar.style.width = (ev.loaded/ev.total)*100+"%";
    }
}

FormData 文件上传图片即时预览

在我们将图片上传到服务器端的以后，服务器端通常都会将图片地址作为响应数据传递到客户端，客户端可以从响应数据中获取图片渎职，然后将图片显示在页面中。

7. 同源政策

Ajax 请求限制

Ajax 只能向自己的服务器发送请求。比如现在有一个A网站和一个B网站，A网站中的 HTML 文件智能向 A 网站服务器中发送 Ajax 请求， B 网站中的 HTML 文件智能向 B 网站中发送 Ajax 请求，但是 A 网站是不能想 B 网站发送 Ajax 请求的，同理，B 网站也不能向 A 网站发送 Ajax 请求。

什么是同源

如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。

同源政策的目的

同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指 A 网站在客户端设置的 Cookie ，B 网站是不能访问的。

随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送 Ajax请求，如果请求，浏览器就会报错。

使用 JSONP 解决同源限制的问题

jsonp 是 json with padding 的缩写，它不属于 Ajax 请求，但它可以模拟 Ajax 请求。

将非同源的服务器端请求地址写在 script 标签的 xrc 属性中
```
<script src="www.wxample.com"></script>
```
服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数。
```
const data = 'fn({name:'张三',age:"20"})';
res.send(data);
```
在客户端全局作用域下定义函数 fn,同时必须定义在该 script 标签之前
```
function fn (data) {}
```
在 fn 函数内部对服务器端返回的数据进行处理
```
function fn (data) { console.log(data); }
```

JSONP 代码优化

客户端需要将函数名称传递到服务器端。

客户端：


<body>
	<script>
		function fn2 (data) {
			console.log('客户端的fn函数被调用了')
			console.log(data);
		}
	</script>
	<!-- 1.将非同源服务器端的请求地址写在script标签的src属性中 -->
	<script src="http://localhost:3001/better?callback=fn2"></script>
</body>

服务器端:


app.get('/better', (req, res) => {
        // 接收客户端传递过来的函数的名称
        const fnName = req.query.callback;
        // 将函数名称对应的函数调用代码返回给客户端
        const result = fnName + '({name:"张三"})';
        res.send(result);
    })

将 script 请求的发送变成动态请求。


    <script>
        // 获取按钮
        var btn = document.getElementById('btn');
        // 为按钮添加点击事件
        btn.onclick = function() {
            // 创建 script 标签
            var script = document.createElement('script');
            // 设置isrc 属性
            script.src = 'http://localhost:3001/test?callback=fn2';
            // 将创建完成的 script 标签追加到页面中
            document.body.appendChild(script);
            // 为 script 标签添加 onload 事件
            script.onload = function() {
                // 因为请求发送完毕后，该 script 标签无意义，所以删除
                document.body.removeChild(script);
            }
        }
    </script>

封装 jsonp 函数，方便请求发送。


<body>
    <button id="btn1">1点击发送请求</button>
    <button id="btn2">2点击发送请求</button>

    <script>
        // 获取按钮
        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');
        // 为按钮添加点击事件
        btn1.onclick = function() {
            jsonp({
                // 请求地址
                url: 'http://localhost:3001/better',
                data: {
                    name: '李四',
                    age: 20
                },
                success: function(data) {
                    console.log(123);
                    console.log(data);

                }
            })
        };
        btn2.onclick = function() {
            jsonp({
                // 请求地址
                url: 'http://localhost:3001/better',
                success: function(data) {
                    console.log(456);
                    console.log(data);

                }
            })
        };

        function jsonp(options) {
            // 动态创建 script 标签
            var script = document.createElement('script');
            // 拼接字符串的变量
            var params = '';
            for (var attr in options.data) {
                params += "&" + attr + '=' + options.data[attr];
            }
            var fnName = 'myJsonp' + Math.random().toString().replace('.', '');
            // 他已经不是一个全局函数，所以得想办法将它变成全局变量
            // 通过给window 添加一个属性 fn ，fn 的值为一个函数
            window[fnName] = options.success;
            // 为 script 标签添加src 属性
            script.src = options.url + '?callback=' + fnName + params;
            // 将 script 标签追加到页面中
            document.body.appendChild(script);
            // 请求发送完毕删除该 script
            script.onload = function() {
                document.body.removeChild(script);
            }
        }
    </script>
</body>

获取腾讯天气信息



<body>
    <div class="container">
        <table class="table table-striped table-hover" align="center" id="box">

        </table>
    </div>
    <script src="/js/jsonp.js"></script>
    <script src="/js/template-web.js"></script>
    <script type="text/html" id="tpl">
        <tr>
            <th>时间</th>
            <th>温度</th>
            <th>天气</th>
            <th>风向</th>
            <th>风力</th>
        </tr>
        {{each info}}
        <tr>
            <td>{{dateFormat($value.update_time)}}</td>
            <td>{{$value.degree}}</td>
            <td>{{$value.weather}}</td>
            <td>{{$value.wind_direction}}</td>
            <td>{{$value.wind_power}}</td>
        </tr>
        {{/each}}
    </script>
    <script>
        // 获取 table 标签
        var box = document.getElementById('box');

        function dateFormat(date) {
            console.log(date);
            var year = date.substr(0, 4);
            var month = date.substr(4, 2);
            var day = date.substr(6, 2);
            var hour = date.substr(8, 2);
            var minute = date.substr(10, 2);
            var seconds = date.substr(12, 2)
            return year + '年' + month + '月' + day + '日' + hour + '点' + minute + '分' + seconds + '秒';

        }

        // 向模板中开放外部变量
        template.defaults.imports.dateFormat = dateFormat;
        // 用 jsonp 发起请求
        jsonp({
            url: 'http://wis.qq.com/weather/common',
            data: {
                source: 'pc',
                weather_type: 'forecast_1h',
                // weather_type: 'forecast_1h|forecast_24h',
                province: '吉林省',
                city: '长春市'
            },
            success: function(data) {
                var html = template('tpl', {
                    info: data.data.forecast_1h
                })
                box.innerHTML = html;
            }
        })
    </script>
</body>

CORS 跨域资源共享

CORS：全称为（Cross-Origin Resource Sharing）,即跨域资源共享，它允许浏览器向跨域服务器发送 Ajax 请求，克服了 Ajax 只能同源使用的限制。


app.use((req, res, next) => {
    // 1. 允许哪些客户端访问我
    // * 代表允许所有的客户端访问我
    res.header('Access-Control-Allow-Origin', '*');
    // 2. 允许客户端以哪种请求方法访问我
    res.header('Access-Control-Allow-Methods', 'get,post'); // 允许get 和 post 方法访问我
    next();
})

访问非同源数据：服务器端解决方案

同源政策是浏览器给予 Ajax 技术的限制，服务器端是不存在同源政策限制的。

在这里插入图片描述


app.get('/server', (req, res) => {
    request('http://localhost:3001/cross', (err, response, body) => {
        res.send(body)
    })
})

复习 cookie

在这里插入图片描述

withCredentials 属性

在使用 ajax 技术发送请跨域请求的售后，默认情况下不会在请求中携带 cookie 信息。

withCredentials ：制定在涉及到跨域请求时，是否携带 cookie 信息，默认值为 false

Access-Control-Allow-Credentials:true 允许客户端发送请求时携带 cookie

服务器端：


// 拦截所有请求
app.use((req, res, next) => {
        // 允许客户端发送跨域请求时携带cookie信息
    res.header('Access-Control-Allow-Credentials', true);
    next();
});

客户端 ajax 请求时候的设置：


<script>
        // 获取登录按钮
        var login = document.getElementById('login');
        // 获取验证登录按钮
        var checkLogin = document.getElementById('checkLogin');

        // 获取表单
        var loginForm = document.getElementById('loginForm');
        // 为登录按钮添加点击事件
        login.onclick = function() {
            // 将 html表单转换成 FormData 对象
            var formData = new FormData(loginForm)
                // 创建 ajax 对象
            var xhr = new XMLHttpRequest();
            // 配置 ajax 对象
            xhr.open('post', 'http://localhost:3001/login');
            // 当发送跨域请求时，携带 cookie 信息
            xhr.withCredentials = true;
            // 发送请求并传递请求参数
            xhr.send(formData);
            // 监听服务器端给予的响应内容
            xhr.onload = function() {
                console.log(xhr.responseText);

            }
        }

        // 当监测用户按钮被点击时
        checkLogin.onclick = function() {
            // 创建 ajax 对象
            var xhr = new XMLHttpRequest();
            // 配置 ajax  对象
            xhr.open('get', 'http://localhost:3001/checkLogin');
            // 当发送跨域请求时，携带 cookie 信息
            xhr.withCredentials = true;
            // 发送请求
            xhr.send();
            // 监听服务器端返回的相应内容
            xhr.onload = function() {
                console.log(xhr.responseText);
            }
        }
    </script>

8. $ajax()

$ajax()方法概述



<body>
    <button id="btn">发送请求</button>
    <script src="./js/jquery.min.js"></script>
    <script>
        var params = {
            name: 'zhangsan',
            age: 20
        };
        $('#btn').on('click', function() {
            $.ajax({
                // 请求方式
                type: 'post',
                // 请求地址
                url: 'http://localhost:3000/base',
                // 在请求发送之前调用,例如等待时候的加载图片等
                beforeSend: function() {
                    alert('请求即将发送');
                    // 请求不在发送
                    return false;
                },
                // 向服务器端发送的请求参数
                data: JSON.stringify(params),
                //contentType: 'application/x-www-form-urlencoded', //name=zhangsan&age=20
                contentType: 'application/json', // 类型为 json的话，就需要传递json格式的字符串，{name:'zhangsan',age:20}
                // 请求成功以后该函数被调用

                success: function(response) {
                    // response 为服务器端返回的数据
                    // 方法内部会自动将 json 字符串转换为 json 对象
                    console.log(response);
                },
                // 请求失败以后该函数被调用
                error: function(xhr) {
                    console.log(xhr);
                }
            });
        })
    </script>
</body>

$.ajax 方法发送jsonp请求


<body>
    <button id="btn">发送请求</button>
    <script src="./js/jquery.min.js"></script>
    <script>
        function fn(response) {
            console.log(response);
        }
        $('#btn').on('click', function() {
            $.ajax({
                url: '/jsonp',
                // 代表现在要发送的是 jsonp 请求
                dataType: 'jsonp',
                // 向服务器端传递函数名字的参数名称
                jsonp: 'cb',
                // 指定函数名称
                jsonpCallback: 'fn' //不想调用success 函数的话可以自己定义
                    // success: function(response) {
                    //     console.log(response);
                    // }
            })
        })
    </script>
</body>

$get $post() 方法概述

作用：分别用于发送 get 请求和 post 请求


<body>
    <button id="getBtn">通过$.get()方法发送get请求</button>
    <button id="postBtn">通过$.post()方法发送请求</button>
    <script src="./js/jquery.min.js"></script>
    <script>
        // 第一个参数是请求地址，第二个参数是请求时传递的参数（可省略），第三个参数是请求成功之后的回调函数
        $('#getBtn').on('click', function() {
            $.get('/base', "name=get&age=20"),
                function(response) {
                    console.log(response);
                }
        });
        $('#postBtn').on('click', function() {
            $.post('/base', 'name=post&age=20', function(response) {
                console.log(response);
            })
        });
    </script>
</body>

Todo 案例

为 todo 数据库添加账号

使用 mongo 命令进入 mongodb 数据库


PS D:\node\myNode\Ajax\day04\code\server> mongo
MongoDB shell version v4.2.5
connecting to: mongodb://127.0.0.1:27017/?compressors=disabled&gssapiServiceName=mongodb
Implicit session: session { "id" : UUID("3223ba73-03c9-4ae3-8309-b43330a07363") }
MongoDB server version: 4.2.5

使用 use admin 命令进入到 adminb 数据库中
```
> use admin
switched to db admin
```
使用 db.auth('root','root') 命令登录数据库
```
> db.auth('root','root')
1
```
使用 use todo 命令切换到 todo 数据库
```
> use todo
switched to db todo
>
```

使用 db.createUser({user:'ysh',pwd:'ysh123',roles:['readWrite']}) 创建 todo 数据库账号


> db.createUser({user:'ysh',pwd:'ysh123',roles:['readWrite']})
Successfully added user: { "user" : "ysh", "roles" : [ "readWrite" ] }
> exit
bye
PS D:\node\myNode\Ajax\day04\code\server>

展示任务列表

准备一个放置任务列表的数组


        // 用于存放任务列表的数组
        var taksAry = [];

向服务器端发送请求，获取已存在的任务


  // 向服务器端发送请求，获取已经存在的任务
        $.ajax({
            url: '/todo/task',
            type: 'get',
            success: function(response) {
				console.log(response);
            }
        })

将已存在的任务存储在任务列表数组中(数组操作相对方便)


                // 将已存在的任务存储在taksAry 变量中
                taskAry = response;

通过模板引擎将任务列表数组中的任务显示在页面中


                var html = template('taskTpl', {
                    tasks: taskAry
                });
                // 将已存在的任务添加到任务列表容器中
                taskBox.html(html);


  // 用于存放任务列表的数组
        var taksAry = [];
        // 获取任务列表容器
        var taskBox = $('#todo-list');
        // 获取添加任务的文本框
        var taskIpt = $("#task");
        // 向服务器端发送请求，获取已经存在的任务
        $.ajax({
            url: '/todo/task',
            type: 'get',
            success: function(response) {
                // 将已存在的任务存储在taksAry 变量中
                taskAry = response;
                // 将数据和html拼接好
                var html = template('taskTpl', {
                    tasks: taskAry
                });
                // 将已存在的任务添加到任务列表容器中
                taskBox.html(html);
            }
        });

添加任务

为文本框绑定键盘抬起事件，在事件处理函数中判断当前用户敲击的是否为回车键，如果不是回车键的话就不需要做任何事情
如果用户敲击的是回车键的时候，判断用户在文本框中是否输入了任务名称
如果用户输入了任务名称，向服务器端发送请求，就将用户输入的任务名称添加到数据库中，同时将任务添加到任务数组中

通过模板引擎将任务列表数组中的任务显示在页面中


       // 获取文本框并且添加键盘抬起事件
        taskIpt.on('keyup', function(event) {
                // 如果用户按下的是回车键
                if (event.keyCode == 13) {
                    // 判断用户是否在文本框中输入了任务名称
                    var taskName = $(this).val();
                    // 如果用户没有在文本框中输入内容
                    if (taskName.trim().length == 0) {
                        // 提示用户
                        alert('请输入任务名称');
                        // 阻止代码向下执行
                        return;
                    }
                    // 想服务器端发送请求，添加任务
                    $.ajax({
                        type: 'post',
                        url: '/todo/addTask',
                        contentType: 'application/json',
                        data: JSON.stringify({
                            title: taskName
                        }),
                        success: function(response) {
                            // 将任务添加到任务列表中
                            taskAry.push(response);
                            // 调用拼接字符串函数进行渲染
                            render();
                            // 清楚文本框中的你要
                            taskIpt.val('');
                        }
                    })
                };
            })



            // 拼接字符串函数 ：将拼接好的字符串显示在页面中
        function render() {
            // 拼接字符串
            var html = template('taskTpl', {
                tasks: taskAry
            });
            // 将拼接好的字符串显示在 ul 标签中
            taskBox.html(html);
        }

删除任务

为删除按钮添加点击事件
在时间处理函数中获取到要删除任务的 id

向服务器端发送请求，根据 ID 删除对应任务，同时将任务数组中的相同任务删除


        // 当用户点击删除按钮时触发 ul 标签身上的点击事件
        taskBox.on('click', '.destroy', function() {
            // 要删除的任务的id
            var id = $(this).attr('data-id');
            $.ajax({
                type: 'get',
                url: '/todo/deleteTask',
                data: {
                    _id: id
                },
                success: function(response) {
                    // 从任务数组中找到已经删除的任务的索引
                    var index = taskAry.findIndex(item =>
                        item._id == id);
                    // 将任务从任务数组中删除
                    taskAry.splice(index, 1);
                    // 重新将任务数组中的元素显示在页面中
                    render();
                }
            })
        })

更改任务状态

为任务复选框添加 onchange 事件
在事件处理函数中获取复选框是否选中
向服务器端发送请求，将当前复选框的是否选中状态提交服务器端
将任务状态同时也更新到任务列表数组中

通过模板引擎任务列表数组中的任务重新显示在页面中并且根据任务是否完成为 li 元素添加 completed 类名


      // 当用户改变任务名称前面的复选框的状态时触发
        taskBox.on('change', '.toggle', function() {
                // 代表复选框是否被选中，true 是被选中， false 是没被选中
                const status = $(this).is(':checked');
                // 当前点击任务的 id
                const id = $(this).siblings('button').attr('data-id');
                // 向服务器端发送请求更改任务状态
                $.ajax({
                    type: 'post',
                    url: '/todo/modifyTask',
                    data: JSON.stringify({
                        _id: id,
                        completed: status
                    }),
                    contentType: 'application/json',
                    success: function(response) {
                        // 将任务状态同步到任务数组中
                        var task = taskAry.find(item => item._id == id);
                        // 更改任务状态
                        task.completed = response.completed;
                        // 将数组中任务的最新状态更新到页面上
                        render();
                    }
                })

修改任务名称

为任务名称外层的 label 标签添加双击事件，同时为当前任务外层的 li 标签添加 editing 类名，开启编辑状态
将任务名称显示在文本框中并让文本框获取焦点
当文本里离开焦点时候，将用户在文本框中输入值提交到服务器端，并且将最新的任务名称更新到任务列表数组中

使用模板引擎重新渲染页面中的任务列表


 // 当双击事件名称时候触发
        taskBox.on('dblclick', 'label', function() {
            // 让任务处于编辑状态
            $(this).parent().parent().addClass('editing');
            // 将任务名称显示在文本框中
            $(this).parent().siblings('input').val($(this).text());
            // 让文本框自动获取焦点
            $(this).parent().siblings('input').focus();
        })

        // 当文本离开焦点的时候
        taskBox.on('blur', '.edit', function() {
            // 最新的任务名称
            var newTaskName = $(this).val();
            // 编辑任务的 id
            var id = $(this).siblings().find('button').attr('data-id');
            // 向服务器短发送请求 修改任务名称
            $.ajax({
                type: "post",
                url: '/todo/modifyTask',
                data: JSON.stringify({
                    _id: id,
                    title: newTaskName
                }),
                contentType: 'application/json',
                success: function(response) {
                    // 将当前任务的最新状态同步到任务数组当中
                    var task = taskAry.find(item => item._id == id);
                    // 修改任务名称
                    task.title = response.title;
                    // 将任务数组中的任务同步到页面中
                    render();
                    $('#task').focus();
                }
            })
        })

计算未完成任务数量

准备一个用于存储未完成任务数量的变量
将未完成任务从任务数组中过滤出来
将过滤结果数组的长度赋值给任务数量变量
将结果更新到页面中

显示未完成任务

为active按钮添加点击事件
从任务列表数组中将未完成任务过滤出来
使用模板引擎将过滤结果显示在页面中

清除已完成任务

为clear completed按钮添加点击事件
向服务器端发送请求将数据库中的已完成任务删除掉
将任务列表中的已完成任务删除调
用使用模板引擎将任务列表中的最后结果显示在页面中

jQuery 中 Ajax 全局事件

只要页面中有 ajax 请求发送，对应的全局事件就会被触发


// .ajaxStart()  当请求开始发送时触发
   $(document).on('ajaxStart', function() {
          NProgress.start()
     });

// .ajaxComplete()  当请求完成时触发
   $(document).on('ajaxComplete', function() {
          NProgress.done()
     });

NProgress

官宣：纳米级进度条，使用逼真的涓流动画来告诉用户正在发生的事情


<link rel="stylesheet" href="nprogress.css"/>
<script src="nprogress.js"></script>
// 进度条开始运动  NProgress.start()
// 进度条结束运动  NProgress.done()

RESTful 风格的 api

REST全称是Representational State Transfer，中文意思是表述（编者注：通常译为表征）性状态转移。它首次出现在2000年Roy Fielding的博士论文中，Roy Fielding是HTTP规范的主要编写者之一。他在论文中提到：“我这篇文章的写作目的，就是想在符合架构原理的前提下，理解和评估以网络为基础的应用软件的架构设计，得到一个功能强、性能好、适宜通信的架构。REST指的是一组架构约束条件和原则。” 如果一个架构符合REST的约束条件和原则，我们就称它为RESTful架构。

传统请求地址回顾


GET http://www.example.com/getUsers  		// 获取用户列表
GET http://www.example.com/getUser?id=1   	// 获取某一个用户的信息
POST http://www.example.com/modifyUser  	// 修改用户信息
GET http://www.example.com/deleteUser?id=1  // 删除用户信息

RESTful api 概述

一套关于设计请求的规范

GET：获取数据

POST：添加数据

PUT：更新数据

DELETE：删除数据

RESTful api 的实现


GET http://www.example.com/users  			// 获取用户列表
POST http://www.example.com/users   		// 添加（创建）用户数据
GET http://www.example.com/users/1  		// 获取id为1的用户信息
PUT http://www.example.com/users/2  		// 修改id为2的用户信息
DELETE http://www.example.com/users/3  		// 删除id为3的用户的信息

XML 介绍

XML 是什么

xml 的全称是 extensible markup language，代表可扩展标记语言，它的作用是传输和存储数据。

与Html 区别：XML关注点在存储数据，Html 关注点在于数据的外观

html：


<body>
    <button id="btn">发送请求</button>
    <div id="container"></div>
    <script>
        var btn = document.getElementById('btn');
        var container = document.getElementById('container');
        btn.onclick = function() {
            var xhr = new XMLHttpRequest();
            xhr.open('get', '/xml');
            xhr.send();
            xhr.onload = function() {
                // xhr.responseXML 获取服务器端返回的 xml 数据
                var xmlDocument = xhr.responseXML;
                var title = xmlDocument.getElementsByTagName('title')[0].innerHTML;
                console.log(title);
                container.innerHTML = title
            }
        }
    </script>
</body>

app.js:


app.get('/xml', (req, res) => {
    // 设置响应头内容类型为 xml
    res.header('content-type', 'text/xml');
    res.send('<message><title>消息标题</title><content>消息内容</content></message>');
})