Ajax相关操作(jQuery、axios)

了解 Ajax

什么是Ajax

Ajax 的全称是 Asynchronous Javascript And XML（异步JavaScript和XML）。

通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。

为什么学习 Ajax

之前所学的技术，只能把网页做的更美观漂亮，或添加一些动画效果，但是，Ajax 能让我们轻松实现网页与服务器之间的数据交互。

Ajax 典型应用场景

• 用户名检测：注册用户时，通过 Ajax 的形式，动态检测用户名是否被占用。
• 搜索提示：当输入搜索关键字时，通过 Ajax 的形式，动态加载搜索提示列表。
• 数据分页显示：当点击页码值的时候，通过 Ajax 的形式，根据页码值动态刷新表格的数据。
• 数据的增删改查：数据的添加、删除、修改、查询操作，都需要通过 Ajax 的形式，来实现数据的交互。

Ajax 的优点

Ajax 允许我们在不刷新整个网页的前提下，更新部分网页内容（局部加载）。

JS 原生 Ajax

get 请求

// 1. 创建请求对象
let xhr = new XMLHttpRequest();
// 2. 设置请求方法和请求的url接口地址
xhr.open('get', '<https://autumnfish.cn/api/joke/list?num=2>', true);
// 3. 监听响应事件，当得到响应式执行
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && /^2\\d{2}$/.test(xhr.status)) {
        console.log(xhr.responseText);
    }
};
// 4. 发送请求，只有执行这步时才会发送上面设置的请求
xhr.send()

post 请求

// 1. 创建请求对象
let xhr = new XMLHttpRequest();
// 2. 设置请求方法和请求的url接口地址
xhr.open("post", "<http://www.liulongbin.top:3006/api/addbook>");
// 3. 设置请求头（在复杂参数时必须使用）
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded", true)
// 4. 监听响应事件，当得到响应式执行
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && /^2\\d{2}$/.test(xhr.status)) {
        console.log(xhr.responseText);
    }
};
// 5. 发送请求并携带post参数，只有执行这步时才会发送上面设置的请求
xhr.send("bookname=test&author=brokyz&publisher=test");

JQuery 中的 Ajax

简介

浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了Ajax的使用难度。

jQuery 中发起 Ajax 请求最常用的三个方法如下：

• $.get()
• $.post()
• $.ajax()

$.get()

jQuery 中$.get()函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用。 $.get()函数的语法如下：

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

参数名	参数类型	是否必选	说明
url	string	是	要请求的资源地址
data	object	否	请求资源期间要携带的参数
callback	function	否	请求成功执行的回调函数

demo：

$(function () {
    $("button").on("click", function () {
        $.get("<https://autumnfish.cn/api/joke/list>", { num: 10 }, function (res) {
            console.log(res);
        });
    });
});

$.post()

jQuery 中$.post()函数的功能弹一，专门用来发起 post 请求，从而向服务器提交数据。

$.post()函数的语法如下：

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

参数名	参数类型	是否必选	说明
url	string	是	要提交数据的地址
data	object	否	要提交的数据
callback	function	否	请求成功执行的回调函数

demo：

$(function () {
    $("button").on("click", function () {
        $.post("<https://mock.apifox.cn/m1/1301638-0-default/pet>", { name: 'brokyz', status: 'sold' }, function (res) {
            console.log(res);
        });
    });
});

$.ajax()

使用$.ajax()发起 GET 请求：

$(function () {
    $.ajax({
        type: 'GET',
        url: '<https://autumnfish.cn/api/joke/list>',
        data: {num: 10},
        success: function(res) {
            console.log(res);
        },
        error: function(err) {
            console.log(err);
        }
    })
});

使用$.ajax()发起 POST 请求：

$(function () {
    $.ajax({
        type: 'POST',
        url: '<https://mock.apifox.cn/m1/1301638-0-default/pet>',
        data: { name: 'brokyz', status: 'sold' },
        success: function(res) {
            console.log(res);
        }
    })
});

Axios 中的 Ajax

简介

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

在客户端中axios使用XMLHttpRequestlai模块，在服务器端axios使用nodejs的原生http模块。

axios.get

axios.get('htt