前后端交互-jQuery中的Ajax

作者: Imkata | 来源:发表于2022-04-15 15:03 被阅读0次

jQuery中封装的Ajax请求比我们自己封装的更好用，下面我们就学习一下。

一. jQuery中的方法

1 - $.ajax()方法

① 发送Ajax请求

$.ajax({
    type: 'get',
    url: 'http://www.example.com',
    // 因为设置了下面的参数，无论传递的是哪种格式的，最后都会转成'属性=属性值&'字符串格式的
    contentType: 'application/x-www-form-urlencoded',
    // 传递的参数 
    // 也可以是 data: 'name=zhangsan&age=20' 字符串格式的，
    data: { name: 'zhangsan', age: '20' },
    // 请求发送之前调用，比如参数格式的校验，或者loading框的显示
    beforeSend: function () {
        // 如果返回false，那么请求就不会被发送
        return false
    },
    // 请求成功
    // response为服务器端返回的数据,方法内部会自动将json字符串转换为json对象
    success: function (response) {},
    // 请求失败
    error: function (xhr) {}
});

{
    // 传递json格式的参数
    contentType: 'application/json'
    // 然后data中传递json字符串
    data: JSON.stringify({name: 'zhangsan', age: '20'})
}

② 发送jsonp请求

$.ajax({
    url: 'http://www.example.com',
    // 指定当前发送jsonp请求
    dataType: 'jsonp',
    // 修改callback参数名称
    jsonp: 'cb',
    // 指定函数名称(一般不使用，我们就使用下面的sucess就好了)
    jsonCallback: 'fnName',
    // 接收服务器端返回的数据
    success: function (response) {} 
})

解释：以前我们写<script src="http://localhost:3001/better?callback=fn"></script> jsonp就是替换其中的callback为cb，jsonCallback就是替换fn为fnName。

2 - serialize方法

前面我们说了，当我们使用Ajax技术传递参数的时候，还需要获取表单控件以及获取表单控件的值，然后将值按照指定的格式进行字符串拼接，然后再传递给服务端，特别繁琐，之前我们使用的是FormData 对象，但是FormData对象是html5中提供的，存在兼容性问题。

下面我们介绍jQuery中提供的serialize方法，可以解决这个问题。

serialize方法作用：将表单中的数据自动拼接成字符串类型的参数。

var params = $('#form').serialize();
// name=zhangsan&age=30

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>serialize方法说明</title>
</head>
<body>
    <form id="form">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit" value="提交">
    </form>
    <script src="/js/jquery.min.js"></script>
    <script type="text/javascript">
        $('#form').on('submit', function () {
            // 将表单内容拼接成字符串类型的参数
            var params = $('#form').serialize();
            console.log(params)  // name=zhangsan&age=30

            // 将表单内容转成对象类型，方法实现在下面
            var objArr = serializeObject($(this));

            // 阻止表单的提交行为
            return false;
        });

        // 将表单中用户输入的内容转换为对象类型(这个方法在后面项目中会频繁使用)
        function serializeObject (obj) {
            // 处理结果对象
            var result = {};
      
      // jQuery提供的方法
            // 将表单中用户输入的内容转换成数组,数组中存的是对象,对象有name和value两个值
            // [{name: 'username', value: '用户输入的内容'}, {name: 'password', value: '123456'}]
            var params = obj.serializeArray();

            // 循环数组 将数组转换为对象类型
            $.each(params, function (index, value) {
                result[value.name] = value.value;
            })
            // 将处理的结果返回到函数外部
            return result;
        }
    </script>
</body>
</html>

3 - $.get、$.post方法

作用：$.get方法用于发送get请求，$.post方法用于发送post请求。

// 参数1：请求地址 
// 参数2：参数，可以是对象也可以是'属性=属性值&'格式的字符串
// 参数3：成功回调函数
$.get('http://www.example.com', {name: 'zhangsan', age: 30}, function (response) {}) $.post('http://www.example.com', {name: 'lisi', age: 22}, function (response) {})

二. jQuery中的Ajax案例：Todolist

1 - 为todo数据库添加账号

使用mongo命令进入mongodb数据库（如果失败，使用sudo mongo）
使用use admin命令进入到admin数据中
使用db.auth('root', 'root')命令登录数据库（这个超级管理员账号是以前我们设置的）
使用use todo命令切换到todo数据库（如果有就直接进入，没有就创建之后进入）
使用db.createUser({user: 'itcast', pwd: 'itcast', roles: ['readWrite']})创建todo数据库账号
使用exit命令退出mongodo数据库

2 - 展示任务列表

准备一个放置任务列表的数组
向服务器端发送请求，获取已存在的任务
将已存在的任务存储在任务列表数组中
通过模板引擎将任务列表数组中的任务显示在页面中

3 - 添加任务

为文本框绑定键盘抬起事件，在事件处理函数中判断当前用户敲击的是否是回车键
当用户敲击回车键的时候，判断用户在文本框中是否输入了任务名称
向服务器端发送请求，将用户输入的任务名称添加到数据库中，同时将任务添加到任务数组中
通过模板引擎将任务列表数组中的任务显示在页面中

4 - 删除任务

为删除按钮添加点击事件
在事件处理函数中获取到要删任务的id
向服务器端发送请求，根据ID删除任务，同时将任务数组中的相同任务删除
通过模板引擎将任务列表数组中的任务重新显示在页面中

5 - 更改任务状态

为任务复选框添加onchange事件
在事件处理函数中获取复选框是否选中
向服务器端发送请求，将当前复选框的是否选中状态提交到服务器端
将任务状态同时也更新到任务列表数组中
通过模板引擎将任务列表数组中的任务重新显示在页面中并且根据任务是否完成为li元素添加completed类名

6 - 修改任务名称

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

7 - 计算未完成任务数量

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

8 - 显示未完成任务

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

9 - 清除已完成任务

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

10 - 项目运行步骤

代码地址：https://github.com/iamkata/Ajax-in-jQuery

cd到项目目录，执行npm install下载第三方模块
执行node app.js启动服务器
浏览器输入http://localhost:3000/todo/index.html访问项目

结果如下：

三. jQuery中Ajax全局事件

1 - 全局事件

只要页面中有Ajax请求被发送，对应的全局事件就会被触发。jQuery规定，Ajax全局事件一定要绑定在document身上。

.ajaxStart()     // 当请求开始发送时触发
.ajaxComplete()  // 当请求完成时触发

2 - NProgress 进度条

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

<link rel='stylesheet' href='nprogress.css'/>
<script src='nprogress.js'></script>

NProgress.start();  // 进度条开始运动 
NProgress.done();   // 进度条结束运动

3 - 示例代码

// 当页面中有ajax请求发送时触发
$(document).on('ajaxStart', function () {
      // 显示进度条
        NProgress.start() 
})

// 当页面中有ajax请求完成时触发
$(document).on('ajaxComplete', function () {
    // 完成进度条
    NProgress.done() 
})

补充一. RESTful 风格的 API

1 - 传统请求地址回顾

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  // 删除用户信息

上面的请求，使用起来没什么问题，但是在语义上不明，比如最后一个删除用户信息，使用了deleteUser?id=1，但是却使用了获取用户信息的GET请求方式，这是矛盾的。

2 - RESTful API 概述

RESTful API一套关于设计请求的规范。

POST：添加数据（增）
DELETE：删除数据（删）
PUT：更新数据（改）
GET：获取数据（查）

注意：传统的html表单提交是不支持PUT和DELETE请求方式的，但是在Ajax中是支持的，所以现在我们才来学习它。

3 - RESTful API 的实现

POST：http://www.example.com/users 添加用户数据
DELETE：http://www.example.com/users/1 删除用户ID为1的用户信息
PUT：http://www.example.com/users/1 修改用户ID为1的用户信息
GET：http://www.example.com/users 获取用户列表数据
GET：http://www.example.com/users/1 获取用户ID为1的用户信息

注意：

RESTful风格的API中使用名词不使用动词。
请求地址需要和操作的集合保持一致，比如需要操作用户集合users，那么请求地址就要是/users，如下：

users => /users
articles => /articles

示例代码：

服务端app.js代码：

// 获取用户列表信息
app.get('/users', (req, res) => {
    res.send('当前是获取用户列表信息的路由');
});

// 获取某一个用户具体信息的路由
// :id主要是用来占位的,代表客户端传过来的一个参数
// 以前我们获取'属性名=属性值&'这样的参数时,我们是使用req.query获取的
// :id这样的参数我们使用req.params.id获取
app.get('/users/:id', (req, res) => {
    // 获取客户端传递过来的用户id
    const id = req.params.id;
    res.send(`当前我们是在获取id为${id}用户信息`);
});

// 删除某一个用户
app.delete('/users/:id', (req, res) => {
    // 获取客户端传递过来的用户id
    const id = req.params.id;
    res.send(`当前我们是在删除id为${id}用户信息`);
});

// 修改某一个用户的信息
app.put('/users/:id', (req, res) => {
    // 获取客户端传递过来的用户id
    const id = req.params.id;
    res.send(`当前我们是在修改id为${id}用户信息`);
});

客户端html代码：

// 获取用户列表信息
$.ajax({
    type: 'get',
    url: '/users',
    success: function (response) {
        console.log(response)
    }
})

// 获取id为1的用户信息
$.ajax({
    type: 'get',
    url: '/users/1',
    success: function (response) {
        console.log(response)
    }
})

// 删除id为10的用户信息
$.ajax({
    type: 'delete',
    url: '/users/10',
    success: function (response) {
        console.log(response)
    }
})

// 修改id为10的用户信息
$.ajax({
    type: 'put',
    url: '/users/10',
    success: function (response) {
        console.log(response)
    }
})

补充二. XML 基础

1 - XML是什么

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

html中有好多预定义标签，比如p、div、body等，在XML中没有预定义标签的，所有的标签都是开发者定义的。

<students>
    <student>
        <sid>001</sid>
        <name>张三</name>
    </student>
    <student>
        <sid>002</sid>
        <name>王二丫</name>
    </student>
</students>

如上XML中保存了两个学生的信息，有学生的id（sid）和学生的姓名（name）。

XML和html的区别：

XML是用来传输和存储数据的，它的关注点是在数据的内容上。
html是用来展示数据的，它的关注点在数据的外观。

2 - XML DOM

XML DOM 即 XML 文档对象模型，是 w3c 组织定义的一套操作 XML 文档对象的API。浏览器会将 XML 文档解析成文档对象模型。

那么服务器端如何传XML类型的数据？客户端如何接收XML类型的数据呢？示例代码如下：

服务器端app.js代码：

app.get('/xml', (req, res) => {
    // 告诉客户端,返回的类型是XML的
    res.header('content-type', 'text/xml');
    res.send('<message><title>消息标题</title><content>消息内容</content></message>')
});