Ajax.

embedded/2024/9/23 18:23:20/

目录

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

1.1 服务器

1.2 客户端

1.3 服务器对外提供的资源

1.4 数据也是资源

1.5 资源与 URL 地址

1.6 什么是 Ajax

2. Ajax 的基础用法

2.1 POST 请求

2.2 GET 请求

2.3 DELETE 请求

2.4 PUT 请求

2.5 PATCH 请求

3. axios

3.1 axios 的基础语法

3.2 基于 axios 发起 GET 请求

3.3 基于 axios 发起 POST 请求

3.4 GET 和 POST 提交数据的区别

4. 请求报文 & 响应报文

4.1 什么是通信

4.2 通信协议

4.3 http协议

4.4 什么是请求报文和响应报文

4.5 请求报文 - 格式

4.6 响应报文 - 格式

4.7 http 响应状态码

4.8 http 响应状态码 Vs 业务状态码

5. 接口相关的基础概念

5.1 接口的概念

5.2 接口文档的概念

5.3 接口测试工具


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

1.1 服务器
概念:服务器是对外 提供服务 的机器设备。
作用:在上网过程中,负责 存放 资源或 对外提供资源 的计算机(电脑)。

1.2 客户端
概念:在上网过程中,负责 获取和消费 资源 的网络设备(电脑/手机/pad)。
作用:将 互联网世界 中的 Web 资源 加载、并呈现到 浏览器窗口 中供用户使用。
前端开发中,客户端特指“ Web 浏览器 ”。

1.3 服务器对外提供的资源

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

论数据的重要性 —— 数据是网页的灵魂
离开数据之后,这个网页再漂亮,也没有实际的作用。

1.5 资源与 URL 地址
URL 地址的概念
URL(全称是 UniformResourceLocator) 中文叫 统一资源定位符 ,用于 标识互联网上每个资源的唯一存放位置
浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问到对应的资源。

URL 地址用来表示服务器上 每个资源 的确切 访问路径
一个 标准的 URL 地址 主要由以下 4 个部分构成:

URL 地址 - 协议(protocol)
概念:协议是 网络协议 的简称,用来保证 通信的双方 读懂 彼此发送过来的消息内容。

URL 地址 - 主机名(hostname)
概念:主机名用来标识互联网中 服务器的唯一性

URL 地址 - 端口号(port)
概念:端口号是 0 - 65535 之间的整数,它的主要作用是表示一台计算机中的特定进程所提供的服务。

URL 地址 - 端口号的使用注意点
在 http 协议中,如果 URL 地址中的端口号是 80,则 :80 端口可以省略不写。例如:
  • http://www.xxx:80/images/img1-min.jpg 可以简写为
  • http://www.xxx/images/img1-min.jpg

注意:只有 :80 端口可以被简写!

URL 地址 - 路径(path)
概念:路径用来表示资源在服务器上 具体的存放位置

客户端与服务器通信的过程
客户端与服务器之间的通信过程,分为 请求 - 响应 两个步骤。其中:
  • 请求的概念:客户端通过网络去找服务器要资源的过程,叫做“请求
  • 响应的概念:服务器把资源通过网络发送给客户端的过程,叫做“响应

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

互联网中的每一个资源,都是通过 请求-响应 的方式从服务器获取回来的
查看客户端与服务器通信的过程

网页中的数据如何从服务器 获取 ?网页中输入的数据如何 送给 服务器?
Ajax
1.6 什么是 Ajax
Ajax 是浏览器中的技术:用来实现 客户端网页 请求 服务器的数据
它的英文全称是 A synchronous J avascript A nd X ML,简称 Ajax。

2. Ajax 的基础用法

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

客户端浏览器在请求服务器上的数据时,根据 操作性质 的不同,可以分为以下 5 种常见的操作:

2.1 POST 请求
POST 请求用于 向服务器新增数据

2.2 GET 请求
GET 请求用于 从服务器获取数据

2.3 DELETE 请求
DELETE 请求用于 删除服务器上的数据

2.4 PUT 请求
PUT 请求用于 更新 服务器上的数据(侧重于 完整更新 :例如更新用户的完整信息):

2.5 PATCH 请求
PATCH 请求用于 更新 服务器上的数据(侧重于 部分更新 :例如只更新用户的手机号):

3. axios

axios 专注于数据请求 的库。
中文官网地址: http://www.axios-js.com/
英文官网地址: https://www.npmjs.com/package/axios
3.1 axios 的基础语法

axios 的基本语法如下:

3.2 基于 axios 发起 GET 请求
测试 GET 请求 URL 地址 为 https://。。。/api/getbooks

打印 result 得到的结果:

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

查询参数的 本质
在使用 Ajax 发起 GET 请求时的参数,会以 ?键=值 的形式拼接到 URL 地址的末尾

注意:? 后面的都是查询参数,查询参数的键和值之间使用 = 进行分隔
在 GET 请求中携带 多个查询参数
如果要携带多个参数,只需要在 params 对象 中指定 多个查询参数项 即可。示例代码如下:

最终,在 URL 地址的末尾,多个查询参数之间使用 & 符号进行分隔:
https://xxx/api/getbooks ? id=1 & bookname=love
URL 编码*
在 URL 地址中 不允许出现中文 空格等特殊字符 ,因此浏览器会 自动 对 URL 地址内的中文进行 转换处理 。例如:

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

result 是 axios 套壳 的结果
服务器端响应给 axios 的 原始数据 ,被 axios 在外面“ 套了一层壳 ”,示意图如下:

在函数的形参中使用解构赋值
使用 解构赋值 ,可以轻松地 获取到 axios 请求回来的 真实数据 。示例代码如下:

3.3 基于 axios 发起 POST 请求
使用 axios 发起 POST 请求时,只需要将 method 属性 的值设置为 ' POST ' 即可:

POST 提交数据 的方式
通过 Chrome 浏览器的 Network 网络请求面板,可以发现 POST 请求提交的数据, 并没有拼接到 URL 地址的末尾

原因:各个浏览器对 URL 的长度 有限制。
3.4 GET 和 POST 提交数据的区别

POST 为了能够提交大量的数据,所以 没有把数据拼接到 URL 的末尾 ;而是放到了独立的“ 请求体 ”中。

4. 请求报文 & 响应报文

4.1 什么是通信
通信,就是 信息的传递和交换
通信三要素:
  • 通信的主体
  • 通信的内容
  • 通信的方式
4.2 通信协议

互联网的http协议

4.3 http协议

4.4 什么是请求报文和响应报文
由于 HTTP协议属于客户端浏览器和 服务器之间的通信协议。 因此, 客户端发起的请求 叫做 HTTP请求,客户端发送到服务器的消息,叫做 HTTP请求消息 ,又叫做 请求报文
服务器 响应给 客户端的消息内容 叫做 HTTP响应消息 ,也叫做 响应报文
客户端与服务器通信的过程是基于 请求 响应 的。其中:
  • 请求报文规定了客户端以什么格式把数据发送给服务器
  • 响应报文规定了服务器以什么格式把数据响应给客户端
4.5 请求报文 - 格式
请求报文 请求行 (request line)、 请求头部 ( header )、 空行 请求体 4 个部分组成。图示如下:

注意:
  • 在浏览器中,GET 请求比较特殊, 没有请求体
  • 在浏览器中,POST、PUT、PATCH、DELETE 请求有请求体。
4.6 响应报文 - 格式
响应报文 状态行 响应头部 空行 响应体 4 个部分组成。图示如下:

4.7 http 响应状态码
概念:http 响应状态码(Status Code)由 三位数字 组成,用来标识 响应成功与否 的状态。
作用:客户端浏览器根据响应状态码,即可判断出这次 http 请求是 成功 还是 失败 了。

常见的 http 响应状态码

4.8 http 响应状态码 Vs 业务状态码
1. 所处的位置不同:
  • 状态行中所包含的状态码,叫做“响应状态码
  • 响应体数据中所包含的状态码,叫做“业务状态码

2. 表示的结果不同:
  • 响应状态码只能表示 这次请求的 成功与否(成功或失败)
  • 业务状态码用来表示 这次业务处理的 成功与否

3. 通用性不同:
  • 响应状态码是由 http 协议规定的具有通用性。每个不同的状态码都有其标准的含义,不能乱用。
  • 业务状态码是后端程序员自定义的不具有通用性。

5. 接口相关的基础概念

5.1 接口的概念
专门对外提供数据资源的服务器,被称为“ 数据服务器 ”。
数据资源的请求地址,叫做“数据接口”,简称“接口”或“API接口”。
使用 Ajax 请求数据时, 被请求的 URL 地址 ,就叫做 数据接口 (简称: 接口 API 接口 )。
同时,每个接口必须有对应的 请求方式 。例如:

5.2 接口文档的概念
接口文档 就是 接口的使用说明书 ,它是我们调用接口的依据。
其中包含了接口的描述信息

5.3 接口测试工具
接口测试工具能让我们在 不写任何代码 的情况下,对接口进行 调用 测试 ,从而检查接口能否被正常访问。
Postman 
官方下载地址 https://www.postman.com/downloads/
使用 Postman 测试 GET 接口

使用 Postman 测试 POST 接口


http://www.ppmy.cn/embedded/26864.html

相关文章

OpenCV 填洼处理

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 这里使用一种从外边缘往内部收缩的算法来实现对图像进行填洼处理,当然,在这个过程中,我们需要通过根据指定的最小坡度来对低洼区域进行高程修正处理。(OpenCV版本) 二、实现代码 ImageSmoothing.h #pragma onc…

AJAXVue

文章目录 es6新语法定义变量定义常量模板字符串:方便字符串的拼接函数参数默认值箭头函数 AJAX概述交互模型异步请求 axios介绍使用步骤 JSON概述作用基础语法 Vue介绍好处特点快速入门常用指令指令介绍使用Vue指令常见的Vue指令文本插值绑定属性条件渲染&#xff1…

vue3前端调用后端接口实现批量删除

//删除的接口 export const deleteApi (address: string, methods: string, id: string) > { return instance<{ id: string }>({ url: address "/" id, method: methods, }); }; //批量删除 let selection ref([]) const handleSelectionChang…

安装配置Maven(idea里面配置)

放在这个路径下&#xff08;如果需要可以免费发给你&#xff0c;dd我就好了&#xff09; D:\IearnSoftware\maven\apache-maven-3.6.1-bin.zip&#xff08;我自己的路径下面&#xff0c;防止忘记&#xff09; 1.首先测试maven在不在&#xff0c;配置对不对 mvn -v 这样就是成…

Unity 递归实现数字不重复的排列组合

实现 private void Permutation(List<int> num, int leftIndex, List<string> strs) {if (leftIndex < num.Count){for (int rightIndex leftIndex; rightIndex < num.Count; rightIndex){Swap(num, leftIndex, rightIndex);Permutation(num, leftIndex 1…

实现C#无标题栏窗体拖动

要实现C#无标题栏窗体拖动&#xff0c;需要以下步骤&#xff1a; 首先&#xff0c;将窗体的FormBorderStyle属性设置为None&#xff0c;这将去除窗体的边框。 接下来&#xff0c;通过鼠标按下、移动和松开的事件来实现拖动功能。在窗体的MouseDown事件中&#xff0c;记录鼠标的…

美国国防部数据网格参考架构概述(下)

文章目录 前言四、行动者与角色五、基线服务与服务模式六、用例演示前言 DRMA从多个角度研究了CDAO数据网格的架构,以深入了解该网格将如何支持美国防部无缝访问联合数据、分析和基础设施以实现数字化转型和人工智能(AI)需求。它提供了一种战略性、原则性和技术性方法,通过…

JavaEE——Spring Boot入门

目录 &#x1f4da; JavaEE——Spring Boot入门 &#x1f527; 1. 新建Spring Boot项目 &#x1f6e0; 2. 添加pom依赖 &#x1f4dd; 3. 添加application.yml文件 &#x1f4c2; 4. 创建Dao层 &#x1f527; 5. 创建Service层 &#x1f5a5;️ 6. 创建Controller层及HT…