Ajax 服务器的概念 & 初识 Ajax：

1.服务器相关的基础概念：

一.服务器：

服务器的本质：也是一台电脑。

服务器的作用：

• 存储一个网站的文件（HTML、CSS、JS、图片、音乐.....）
• 提供网站的文件给用户

如何获得服务器：

• 购买（京东、淘宝……）
• 租赁（阿里云、腾讯云……）

2.资源：

• 服务器上的 网页(html文件)、图片、音乐、视频、字体文件、CSS文件、JS文件等等都称之为资源。所以资源代指服务器上存储的内容。
• 通俗的讲，我们浏览网页时，从网络当中看到的内容都叫做资源。

3.数据也是资源：

网页中的数据，也是服务器对外提供的一种资源。例如股票数据、各行业排行榜等。

4.数据：

服务器多数情况都使用数据表的方式来存储数据，和我们平时见到的表格差不多

5.客户端：

概念： 在前端开发中，客户端特指“Web 浏览器”。

作用： 将互联网世界中的 Web 资源加载、并呈现到浏览器窗口中供用户使用。

常见的“客户端浏览器”：

0. Chrome 浏览器
1. FireFox 浏览器
2. Edge 浏览器
3. Safari 浏览器

6.URL 地址（统一资源定位符）：

生活中的地址，表示地球上的一个确切的地理位置

URL 地址，表示服务器上每个资源的确切位置。

7.URL 地址：

服务器上的每个资源，都对应着独一无二的URL地址

数据也是服务器上的资源，对数据的操作（增删改查），也对应着不同的URL地址：

• www.itcbc.com:3006/api/**getbo…** 获取图
• www.itcbc.com:3006/api/**addbo…** 添加图
• www.itcbc.com:3006/api/**delbo…** 删除图
• www.itcbc.com:3006/api/**updat…** 修改图

8.客户端与服务器通信的过程：

客户端与服务器之间的通信过程，分为请求 - 响应两个步骤。其中：

• 请求的概念：客户端通过网络去找服务器要资源的过程，叫做“请求”
• 响应的概念：服务器把资源通过网络发送给客户端的过程，叫做“响应”

0. 浏览器设置请求地
1. 发送请求
2. 服务器处
3. 做出响应
4. 浏览器接收结果并显示

9.什么是 Ajax：

Ajax 是浏览器中的技术：用来实现客户端网页请求服务器的数据。

它的英文全称是 Asynchronous Javascript And XML，简称 Ajax。

结论：网页中 Ajax 的应用场景无处不在，有数据的地方就有 Ajax！

二.请求方式：

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

Ajax中，客户端浏览器在请求服务器上的数据时，根据操作性质（增删改查） 的不同，可以分为以下 5 种常见的操作

0. POST 向服务器新增数据
1. GET 从服务器获取数据
2. DELETE 删除服务器上的数据
3. PUT 更新服务器上的数据（侧重于完整更新：例如更新用户的完整信息）
4. PATCH 更新服务器上的数据（侧重于部分更新：例如只更新用户的手机号）

3.Ajax 基础用法：

1.axios：

• axios（发音：艾克C奥斯） 是前端圈最火的、专注于数据请求的库。

• 中文官网地址：www.axios-http.cn/

• 英文官网地址：www.npmjs.com/package/axi…

2.axios 的基础语法：

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

3.基于 axios 发起 GET 请求：

    <script src="./lib/axios.js"></script>
    <script>
        axios({
            method: 'get',
            url: ' http://www.itcbc.com:3006/api/getbooks'
        }).then(result => {
            console.log(result);
        })
    </script>
复制代码

4.GET 请求的查询参数：

• 刚才查询回来的是所有图书的列表数据，如果想指定查询的条件，可以通过 params 选项来指定查询的参数：

• 可以携带多个查询参数

    <script src="./lib/axios.js"></script>
    <script>
        axios({
            //指定请求方式为get
            method: 'get',
            //指定请求的URL地址
            url: ' http://www.itcbc.com:3006/api/getbooks',
            //查询参数
            params: {
                id: 1, //表示获取id=1，book为弟弟的图书
                bookname：'弟弟',
            }
        }).then(result => {
            console.log(result);
        })
    </script>
复制代码

5.GET案例 图书管理：

    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>书名</th>
                <th>创造人</th>
                <th>出版社</th>
            </tr>
        </thead>
        <tbody>
​
        </tbody>
    </table>
    <script src="./lib/axios.js"></script>
    <script>
        // rander(arr)
        axios({
            //指定请求方式为get
            method: 'get',
            //指定请求的URL地址
            url: 'http://www.itcbc.com:3006/api/getbooks',
​
        }).then(result => {
            const arr = result.data.data
            console.log(arr);
            rander(arr)
        })
        function rander(arr) {
            let html = arr.map((value) =>
                `   <tr>
          <td>${value.id}</td>
          <td>${value.bookname}</td>
          <td>${value.author}</td>
          <td>${value.publisher}</td>
        </tr>
      `).join('')
            document.querySelector("tbody").innerHTML = html
        }
    </script>

6.基于 axios 发起 POST 请求：

使用 axios 发起 POST 请求时，只需要将 method 属性的值设置为 'POST' ，URL地址改为 '/api /addbook'：

    <button>加载一个数据</button>
    <script src="./lib/axios.js"></script>
    <script>
        const button = document.querySelector('button');
        button.addEventListener('click', function () {
            // 执行 post请求新新增数据
            axios({
                method: 'post', // post
                url: 'http://www.itcbc.com:3006/api/addbook', // url
                // 参数
                data: {
                    // 这个里面 不能乱写 属性名和属性值
                    // 乱写参数，如果后端因为你不按照规范出了错 你前端 也是背锅
                    bookname: '李先生与牛马的爱情故事',
                    author: '李先生',
                    publisher: '黑马', // 想传递一个数字格式 不行 （我只能去对比代码看什么地方可能出错）
                    // publisher: Date.now()+"",// 想传递一个数字格式 不行 （我只能去对比代码看什么地方可能出错）
                },
            }).then((result) => {
                // 去银行操作完毕之后  存钱 取钱  纸条 告诉我们  操作成功与否
                console.log(result);
            });
        });
    </script>

四.接口相关的基础概念：

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称：接口或 API 接口）。 同时，每个接口必须有对应的请求方式。

• www.itcbc.com:3006/api/getbook… 获取图书列表的接口(GET 请求)
• http://www. itcbc.com:3006/api/addbook 添加图书的接口（POST 请求）

1.接口组成部分及说明：

• 接口名称：接口的名称，用来快速区分每个接口的作用。如：登录接口、添加图书接口
• 接口 URL：客户端发起 Ajax 调用此接口时，请求的 URL 地址
• 请求方式：接口的请求方式，如：GET、POST、PUT、DELETE 等
• 请求参数：请求此接口时，需要发送到服务器的查询参数或请求体
• 返回示例：当接口请求成功后，服务器响应回来的数据的基本格式
• 返回参数说明：接口响应结果的详细描述

五.案例 – 图书管理:

1.删除图书:

参照接口文档，发现删除图书，需要使用必填的id参数。

• 循环遍历数据时，将id值存储到 删除按钮的 自定义属性（data-id）中
• 单击 删除 按钮时，获取自定义属性data-id的值，这个值就是id

    <input type="text" />
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script src="./lib/axios.js"></script>
    <script>
        const tbody = document.querySelector('tbody');
​
        tbody.addEventListener('click', function (event) {
            if (event.target.className === 'del') {
​
                // 判断用户是否确定删除
                if (!confirm("您确定删除吗")) {
                    // 不删除
                    return; // 不再往下执行代码
                }
​
                //  获取a标签对应的id 自定义属性
                const { id } = event.target.dataset;
                // 根据接口文档的要求 组装代码
                axios({
                    url: 'http://www.itcbc.com:3006/api/delbook',
                    method: 'delete',
                    params: {
                        id,
                    },
                }).then((result) => {
                    console.log(result);
                    getData(); // 删除成功了 重新显示页面数据
                });
            }
        });
        getData();
        function getData(query = '') {
            axios({
                method: 'get',
                url: 'http://www.itcbc.com:3006/api/getbooks' + query,
                // params:{},
            }).then((result) => {
                console.log(result);
                const arr = result.data.data;
                render(arr);
            });
        }
​
        function render(arr) {
            let html = arr
                .map(
                    (value) => `
      <tr>
          <td>${value.id}</td>
          <td>${value.bookname}</td>
          <td>${value.author}</td>
          <td>${value.publisher}</td>
          <td><a data-id="${value.id}" class="del" href="javascript:;">删除</a> </td>
        </tr>
      `
                )
                .join('');
            document.querySelector('tbody').innerHTML = html;
        }

2.修改图书：

<body>
    <div class="left">
        <input type="text" class="keyword" />
        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div class="right">
        <form>
            <h3>编辑</h3>
            <input type="text" placeholder="书名" class="bookname" />
            <input type="text" placeholder="作者" class="author" />
            <input type="text" placeholder="出版社" class="publisher" />
            <input type="button" value="编辑" class="btnedit" />
        </form>
    </div>
    <script src="./lib/axios.js"></script>
    <script>
        const tbody = document.querySelector('tbody');
        // 全局变量
        let arr; // 列表数据
        let id; // 被点击的数据的id
        const booknameValue = document.querySelector('.bookname');
        const authorValue = document.querySelector('.author');
        const publisherValue = document.querySelector('.publisher');
        const btnedit = document.querySelector('.btnedit');
​
        tbody.addEventListener('click', function (event) {
            if (event.target.className === 'editbtn') {
                // 获取a身上的下标
                const { index } = event.target.dataset;
                //  获取到 另外一个方法中的 数组
                console.log(arr[index]);
                // 把对应的数据显示到表单中
                booknameValue.value = arr[index].bookname;
                authorValue.value = arr[index].author;
                publisherValue.value = arr[index].publisher;
​
                // 获取到被编辑的数据id
                id = arr[index].id;
            }
        });
​
        btnedit.addEventListener('click', function () {
            // 获取表单的值
            const data = {
                // 如何去获取
                id: id,
                bookname: booknameValue.value,
                author: authorValue.value,
                publisher: publisherValue.value,
                appkey: 'wanshao1234'
            };
            // 发送一个编辑 请求
            axios({
                url: 'http://www.itcbc.com:3006/api/updatebook',
                method: 'put',
                // query - params
                // body  - data
                data,
            }).then((result) => {
                console.log(result);
                getData();
            });
            // 提示编辑成功 ->调用 getData 实现重新获取最新的数据
        });
        getData();
        // 定义一个方法 发送请求 获取数据  渲染页面
        function getData() {
            axios({
                url: 'http://www.itcbc.com:3006/api/getbooks',
                method: 'get',
                params: {
                    appkey: 'wanshao1234',
                },
            }).then((result) => {
                console.log(result);
                arr = result.data.data;
                const html = arr
                    .map((value, index) => {
                        return `
                <tr>
                <td>${value.id}</td>
                <td>${value.bookname}</td>
                <td>${value.author}</td>
                <td>${value.publisher}</td>
                <td><a class="editbtn" data-index="${index}" href="javascript:;" >编辑</a></td>
              </tr>
                `;
                    })
                    .join('');
                tbody.innerHTML = html;
            });
        }
    </script>