01AJAX与接口

云化龙coder
134 阅读8分钟

1. 客户端与服务器

1.1 上网的目的

  • 刷微博

  • 浏览新闻

  • 在线听音乐

  • 在线看电影

  • …

上网的本质目的：通过互联网的形式来获取和消费资源

1.2 服务器

上网过程中，负责存放和对外提供资源的电脑，叫做服务器。

所以服务器的本质是一台电脑，它的性能比一般电脑性能高。

1.3 客户端

上网过程中，负责获取和消费资源的电脑，叫做客户端。

我们一般是通过浏览器来访问服务器对外提供的各种资源。

2. URL 地址

2.1 URL地址的概念

URL(Uniform Resource Locator) 中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。

浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。常见的URL举例：

2.2 URL地址的组成部分

URL地址一般由三部分组成：

  • 客户端与服务器之间的通信协议
  • 存有该资源的服务器名称
  • 资源在服务器上具体的存放位置

在这里插入图片描述

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

3.1 图解客户端与服务器的通信过程

在这里插入图片描述

注意：

  • 客户端与服务器之间的通信过程，分为 请求 – 处理 – 响应 三个步骤
  • 网页中的每一个资源，都是通过 请求 – 处理 – 响应 的方式从服务器获取回来的

3.2 基于浏览器的开发者工具分析通信过程

  • 打开 Chrome 浏览器

  • 打开 Chrome 的开发者工具

  • 切换到 Network 面板

  • 选中 Doc 页签

  • 刷新页面，分析客户端与服务器的通信过程

在这里插入图片描述

在这里插入图片描述

4. 服务器对外提供了哪些资源

4.1 例举网页中常见的资源

文字、图片、音频、视频...

4.2 数据也是资源

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

在这里插入图片描述

4.3 数据是网页的灵魂

  • HTML 是网页的骨架

  • CSS 是网页的颜值

  • JS 是网页的行为

  • 数据是网页的灵魂

骨架、颜值、行为皆为数据服务数据，在网页中无处不在。

4.4 网页中如何请求数据

数据，也是服务器对外提供的一种资源。只要是资源，必然要通过 请求 – 处理 – 响应 的方式进行获取。

类似地，其过程如图所示：

在这里插入图片描述

如果要在网页中请求服务器上的数据资源，则需要用到 XMLHttpRequest 对象。

XMLHttpRequest(xhr) 是浏览器提供的 js 成员，通过它，可以请求服务器上的数据资源。

最简单的用法 :

var xhrObj = new XMLHttpRequest()

4.5 资源的请求方式

客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为 get 和 post 请求。

  • get 请求通常用于获取服务端资源（向服务器要资源）

    例如：根据 URL 地址，从服务器获取 HTML 文件、css 文件、js文件、图片文件、数据资源等

  • post 请求通常用于向服务器提交数据（往服务器发送资源）

    例如：登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作

5. 了解 Ajax

5.1 什么是 Ajax

Ajax 的全称是 Asynchronous Javascript And XML(异步 JavaScript 和 XML)。

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

5.2 为什么要学 Ajax

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

在这里插入图片描述

5.3 Ajax 的典型应用场景

  • 用户名检测：注册用户时，通过 ajax 的形式，动态检测用户名是否被占用

  • 搜索提示：当输入搜索关键字时，通过 ajax 的形式，动态加载搜索提示列表

  • 数据分页显示：当点击页码值的时候，通过 ajax 的形式，根据页码值动态刷新表格的数据

  • 数据的增删改查：数据的添加、删除、修改、查询操作，都需要通过 ajax 的形式，来实现数据的交互

6. jQuery 中的 Ajax

6.1 了解 jQuery 中的 Ajax

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

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

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

6.2 $.get()函数

6.2.1 语法

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

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

其中，三个参数各自代表的含义如下：

参数名参数类型是否必选说明
urlstring是要请求的资源地址
dataobject否请求资源期间携带的参数
callbackfunction否请求成功的回调函数

6.2.2 不带参数的 GET 请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>发起不带参数的 GET 请求</button>
</body>
<script src="./jquery.min.js"></script>
<script>
    $(function () {
        $('button').on('click', function () {
            $.get('https://ajax-base-api-t.itheima.net/api/getbooks', function (res) {
                console.log(res) // 这里的 res 是服务器返回的数据
            })
        })
    })
</script>

</html>

控制台结果如下：

在这里插入图片描述

6.2.3 带参数的 GET 请求

<script>
    $(function () {
        $('button').on('click', function () {
            $.get('https://ajax-base-api-t.itheima.net/api/getbooks', { id: 1 }, function (res) {
                console.log(res)
            })
        })
    })
</script>

在这里插入图片描述

6.3 $.post()函数

6.3.1 语法

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

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

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

其中，三个参数各自代表的含义如下：

参数名参数类型是否必选说明
urlstring是提交数据的地址
dataobject否要提交的数据
callbackfunction否数据提交成功的回调函数

6.2.2 POST 提交数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>POST 提交数据</button>
</body>
<script src="./jquery.min.js"></script>
<script>
    $(function () {
        $('button').on('click', function () {
            let address = 'https://ajax-base-api-t.itheima.net/api/addbook'
            let data = { bookname: '尼尔斯骑鹅历险记', author: '拉格洛夫', publisher: '商务印书馆' } // t提交的数据
            $.post(address, data, function (res) {
                console.log(res)
            })
        })
    })
</script>

</html>

控制台结果如下：

在这里插入图片描述

6.4 $.ajax()函数

6.4.1 语法

相比于 $.get() 和 $.post() 函数，jQuery 中提供的 $.ajax() 函数，是一个功能比较综合的函数，它允许我们对 Ajax 请求进行更详细的配置。$.ajax() 函数的基本语法如下：

$.ajax({
   type: '', // 请求的方式，例如 GET 或 POST
   url: '',  // 请求的 URL 地址
   data: { },// 这次请求要携带的数据
   success: function(res) { } // 请求成功之后的回调函数
})

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

与 $.get() 基本类似，参数替换一下即可。

<script>
    $(function () {
        $('button').on('click', function () {
            $.ajax({
                type: 'GET',
                url: 'https://ajax-base-api-t.itheima.net/api/getbooks',
                data: { id: 1 },
                success: function (res) {
                    console.log(res)
                }
            })
        })
    })
</script>

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

与 $.post() 基本类似，参数替换一下即可。

<script>
    $(function () {
        $('button').on('click', function () {
            $.ajax({
                type: 'POST',
                url: 'https://ajax-base-api-t.itheima.net/api/addbook',
                data: {
                    bookname: '尼尔斯骑鹅历险记',
                    author: '拉格洛夫',
                    publisher: '商务印书馆'
                },
                success: function (res) {
                    console.log(res)
                }
            })
        })
    })
</script>

7. 接口

7.1 接口的概念

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称接口）。

同时，每个接口必须有请求方式。

例如：

7.2 分析接口的请求过程

本质还是：请求 - 处理 - 响应

7.2.1 通过 GET 方式请求接口的过程

在这里插入图片描述

7.2.2 通过 POST 方式请求接口的过程

在这里插入图片描述

7.3 接口测试工具

7.3.1 什么是接口测试工具

为了验证接口能否被正常被访问，我们常常需要使用接口测试工具，来对数据接口进行检测。好处：接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试。

这里推荐一个接口测试工具软件：PostMan

在这里插入图片描述

7.3.2 下载并安装 PostMan

访问 PostMan 的官方下载网址 www.getpostman.com/downloads/，…

7.3.3 使用 PostMan 测试 GET 接口

在这里插入图片描述

步骤：

  • 选择请求的方式
  • 填写请求的 URL 地址
  • 填写请求的参数
  • 点击 Send 按钮，发起 GET 请求
  • 查看服务器响应的结果

7.3.4 使用 PostMan 测试 POST 接口

在这里插入图片描述

步骤：

  • 选择请求的方式
  • 填写请求的 URL 地址
  • 选择 Body 面板，并勾选数据格式
  • 填写要发送到服务器的数据
  • 点击 Send 按钮，发起 POST 请求
  • 查看服务器响应的结果

7.4 接口文档

7.4.1 什么是接口文档

接口文档，顾名思义就是接口的说明文档，它是我们调用接口的依据。

好的接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用。

7.4.2 接口文档的组成部分

接口文档可以包含很多信息，也可以按需进行精简，不过，一个合格的接口文档，应该包含以下6项内容，从而为接口的调用提供依据：

  • 接口名称：用来标识各个接口的简单说明，如登录接口，获取图书列表接口等
  • 接口URL：接口的调用地址
  • 调用方式：接口的调用方式，如 GET 或 POST
  • 参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容
  • 响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明3项内容
  • 返回示例（可选）：通过对象的形式，例举服务器返回数据的结构

7.4.3 接口文档的示例

该接口文档只是示例，无法使用里面的接口。

1. 请求的根路径

www.liulongbin.top:3006

2. 图书列表

  • 接口URL： /api/getbooks
  • 调用方式： GET
  • 参数格式：
参数名称参数类型是否必选参数说明
idNumber否图书Id
booknameString否图书名称
authorString否作者
publisherString否出版社
  • 响应格式：
数据名称数据类型说明
statusNumber200 成功；500 失败；
msgString对 status 字段的详细说明
dataArray图书列表
+idNumber图书Id
+booknameString图书名称
+authorString作者
+publisherString出版社
  • 返回示例：
{
  "status": 200,
  "msg": "获取图书列表成功",
  "data": [
    { "id": 1, "bookname": "西游记", "author": "吴承恩", "publisher": "北京图书出版社" },
    { "id": 2, "bookname": "红楼梦", "author": "曹雪芹", "publisher": "上海图书出版社" },
    { "id": 3, "bookname": "三国演义", "author": "罗贯中", "publisher": "北京图书出版社" }
  ]
}

3. 添加图书

  • 接口URL： /api/addbook
  • 调用方式： POST
  • 参数格式：
参数名称参数类型是否必选参数说明
booknameString是图书名称
authorString是作者
publisherString是出版社
  • 响应格式：
数据名称数据类型说明
statusNumber201 添加成功；500 添加失败；
msgString对 status 字段的详细说明
  • 返回示例：
{
    "status": 201,
    "msg": "添加图书成功"
}

4. 删除图书

  • 接口URL： /api/delbook
  • 调用方式： GET
  • 参数格式：
参数名称参数类型是否必选参数说明
idNumber是图书Id
  • 响应格式：
数据名称数据类型说明
statusNumber200 删除成功；500 未指定要删除的图书Id；501 执行Sql报错；502 要删除的图书不存在；
msgString对 status 字段的详细说明
  • 返回示例：
{
    "status": 200,
    "msg": "删除图书成功！"
}

本文主要学习 黑马程序员AJAX零基础到精通_整合Git核心内容全套教程（2022年已更新优化）

如有错误，敬请指正，欢迎交流🤝，谢谢♪(･ω･)ﾉ

avatar
文章
阅读
粉丝