Ajax基本知识点

Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。

1.使用Ajax请求数据的5种方式

post:提交数据 (常用)
get:获取数据 (常用)
delete:删除数据
put:更新数据(全部更新)
patch:更新数据(部分更新)

2.axios是前端圈最火的、专注于数据请求的库

在后面的 Vue、React 课程中都会用到 axios 来请求数据。
中文官网地址：http://www.axios-js.com/
英文官网地址：https://www.npmjs.com/package/axios

axios: 基本语法

axios({
   
method:'请求的类型'
ur:'请求的URL地址'
}).then(result)=>{
   
//.then 用来指定请求成功之后的回调函数
//形参中的result是请求成功之后的结果
}

1.基于 axios 发起 GET 请求

2.查询参数的本质:
在使用 Ajax 发起 GET 请求时，data 中的参数，会以 ?键=值 的形式拼接到 URL 地址的末尾。因此下面这种写法是完全正确的：

注意：? 后面的都是查询参数，查询参数的键和值之间使用 = 进行分隔

3.在 GET 请求中携带多个查询参数

注意get请求传参需要params属性
如果想指定查询的条件，可以通过 params 选项来指定查询的参数：
如果要携带多个参数，只需要在 params 对象中指定多个查询参数项即可

4.URL 编码*

在 URL 地址中不允许出现中文、空格等特殊字符，因此浏览器会自动对 URL 地址内的中文进行转换处理。例如：

浏览器内置了 encodeURI() 和 decodeURI() 两个方法，用来实现 URL 的编码和解码处理：

5.result 是 axios 套壳的结果

服务器端响应给 axios 的原始数据，被 axios 在外面“套了一层壳”，

6.在函数的形参中使用解构赋值

axios({
method: ‘GET’,
url: ‘http://www.liulongbin.top:3009/api/getbooks’
}).then(({ data: res }) => {
// 从 .then(fn) 回调函数的形参中，解构赋值出 data 属性，重命名为 res
console.log(res)
})
result 是被axios套了一层壳:服务器返回的真实数据是result.data成员上示意图如下：

7.GET请求案例:新闻案例-数据渲染

   <!-- 导入axios.js -->
    <script src="./lib/axios.js"></script>
    <script>
        axios({
   
            url: 'http://www.liulongbin.top:3009/api/news',
            method: 'get',
            // 对象的解构赋值 并且将请求获取属性下的data属性名改为res
        }).then(({
    data: res }) => {
   
            //成功回调
            console.log