初识 Ajax

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

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

一.服务器：

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

服务器的作用：

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

如何获得服务器：

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

2.资源：

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

3.数据也是资源：

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

4.数据：

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

5.客户端：

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

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

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

1. Chrome 浏览器
2. FireFox 浏览器
3. Edge 浏览器
4. 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.客户端与服务器通信的过程：

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

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

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

9.什么是 Ajax：

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

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

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

二.请求方式：

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

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

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

三.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()+"",// 想传递一个数字格式 不行 （我只能去对比代码看什么地方可能出错）
                },
            }