Ajax.

目录

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.rhkb.cn/news/316981.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ctfshow——SQL注入

文章目录 SQL注入基本流程普通SQL注入布尔盲注时间盲注报错注入——extractvalue()报错注入——updataxml()Sqlmap的用法 web 171——正常联合查询web 172——查看源代码、联合查询web 173——查看源代码、联合查询web 174——布尔盲注web 176web 177——过滤空格web 178——过…

Mybatis-Plus扩展接口InnerInterceptor

InnerInterceptor 接口就是 MyBatis-Plus 提供的一个拦截器接口,用于实现一些常用的 SQL 处理逻辑,处理 MyBatis-Plus 的特定功能,例如PaginationInnerInterceptor、OptimisticLockerInnerInterceptor 等,都实现了 InnerInterceptor 接口,并添…

2024年Docker常用操作快速查询手册

目录 一、Linux系统上 Docker安装流程(以ubuntu为例) 一、卸载所有冲突的软件包 二、设置Docker的apt存储库(这里使用的是阿里云软件源) 三、直接安装最新版本的Docker 三、安装指定版本的Docker 四、验证Docker是否安装成功…

ES集群分布式查询原理

集群分布式查询 elasticsearch的查询分成两个阶段: scatter phase:分散阶段,coordinating node会把请求分发到每一个分片gather phase:聚集阶段,coordinating node汇总data node的搜索结果,并处理为最终结…

Esp8266 - USB开关分享(开源)

文章目录 简介推广自己gitee项目地址:嘉立创项目地址:联系我们 功能演示视频原理图嘉立创PCB开源地址原理图PCB预览 固件烧录代码编译烧录1. 软件和驱动安装2. 代码编译1. 安装所需要的依赖库文件2. 下载源代码3. 烧录代码 使用说明1. 设备配网2. 打开设备操作页面3…

第十四届蓝桥杯国赛:2023次方的思考(指数塔,数论)

首先我们要知道,正常计算的话,指数优先级最高,因此得先计算指数,比如: 2 3 2 512 2^{3^2}512 232512 欧拉定理的关键在于,它允许我们通过减少计算的指数大小来简化模运算。 经过仔细研究(看题…

品牌百度百科词条需要什么资料?

品牌百度百科词条是一个品牌的数字化名片,更是品牌历史、文化、实力的全面展现。 作为一个相当拿得出手的镀金名片,品牌百度百科词条创建需要什么资料,今天伯乐网络传媒就来给大家讲解一下。 一、品牌基本信息:品牌身份的明确 品…

kotlinDSL控制的安卓项目导入已存在的模块后sync报错

原因很明显,但是我还找了好久 因为在import时并没有选择groove还是kotlin控制, 所以默认为groovy控制的,然而主项目是由kotlin dsl控制的grale行为。 原因清楚之后,就可以去检查一下,项目里是否包含了settings.gradle和…

掌握JavaScript面向对象编程核心密码:深入解析JavaScript面向对象机制对象基础、原型模式与继承策略全面指南,高效创建高质量、可维护代码

ECMAScript(简称ES,是JavaScript的标准规范)支持面向对象编程,通过构造函数模拟类,原型链实现继承,以及ES6引入的class语法糖简化面向对象开发。对象可通过构造函数创建,使用原型链共享方法和属…

vue+elementUI实现点击左右箭头切换按钮功能

原本是可以用el-tabs做的,就像下面的样式,但是领导说不行 最后用button和element里面的el-carousel(走马灯)结合了一下 长这样 感觉还不错 可以自己改样式 代码如下: <div class"drawer-carousel"><el-carousel arrow"always" :loop"false…

基于SSM的文物管理系统(含源码+sql+视频导入教程+文档+PPT)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于SSM的文物管理系统拥有俩种角色 管理员&#xff1a;个人信息管理、用户管理、分类管理、文物信息管理、文物外借管理、文物维修管理、留言板管理等 用户&#xff1a;登录注册、分类…

Hybrid Homomorphic Encryption:SE + HE

参考文献&#xff1a; [NLV11] Naehrig M, Lauter K, Vaikuntanathan V. Can homomorphic encryption be practical?[C]//Proceedings of the 3rd ACM workshop on Cloud computing security workshop. 2011: 113-124.[MJS16] Maux P, Journault A, Standaert F X, et al. To…

LLaMA3(Meta)微调SFT实战Meta-Llama-3-8B-Instruct

LlaMA3-SFT LlaMA3-SFT, Meta-Llama-3-8B/Meta-Llama-3-8B-Instruct微调(transformers)/LORA(peft)/推理 项目地址 https://github.com/yongzhuo/LLaMA3-SFT默认数据类型为bfloat6 备注 1. 非常重要: weights要用bfloat16/fp32/tf32(第二版大模型基本共识), 不要用fp16, f…

【目标检测】YOLOv7 网络结构(与 YOLOv4,YOLOv5 对比)

YOLOv7 和 YOLOv4 Neck 与 Head 结构对比 其实 YOLOv7 的网络结构网上很多文章已经讲得很清除了&#xff0c;网络结构图也有非常多的版本可供选择&#xff0c;因为 YOLOv7 和 YOLOv4 是一个团队的作品&#xff0c;所以在网络结构方面&#xff0c; YOLOv7 和 YOLOv4 有很多相似…

和鲸科技出席第五届空间数据智能学术会议,执行总裁殷自强受邀发表主题报告

4月26日&#xff0c;由 ACM SIGSPATIAL 中国分会、ACM SIGMOD 中国分会主办的第五届空间数据智能学术会议&#xff08;SpatialDI 2024&#xff0c;下简称“会议”&#xff09;在南京盛大开幕。本次会议特邀李清泉院士、周成虎院士、丛高教授、谢炯博士、张雪英教授等国内外知名…

【web安全】-- 命令执行漏洞详解

本文将从原理开始介绍命令执行漏洞并附有三个实例来供各位客官学习 文章目录 一、什么是命令执行漏洞二、出现的原因三、有可能存在命令执行漏洞的函数&#xff08;php&#xff09;1、利用一些函数来实现命令执行2、直接执行系统命令的函数 四、命令拼接符号1、Windows2、linux…

【06016传感器原理与应用】第4章 磁敏传感器 期末复习自考复习

第4章 磁敏传感器 通常把能讲磁学量信号转换成电信号的器材或装置称为磁敏传感器 一、学习目的与要求 通过本章的学习&#xff0c;熟悉并掌握磁敏传感器的工作原理和硬件组成结构。重点掌握半导体的霍尔器件和霍尔集成电路、磁敏二极管、三极管等的工作机理及其应用电路&…

【分享】如何将word格式文档转化为PDF格式

在日常的办公和学习中&#xff0c;我们经常需要将Word文档转换为PDF格式。PDF作为一种通用的文件格式&#xff0c;具有跨平台、易读性高等优点&#xff0c;因此在许多场合下都更为适用。那么&#xff0c;如何实现Word转PDF呢&#xff1f;本文将介绍几种常用的方法&#xff0c;帮…

border-image-slice详细说明

上一篇文章我们介绍了 border-image的用法&#xff0c;其中border-image-source、border-image-width、 border-image-outset都比较简单好理解&#xff0c;这边文章我们重点学一下border-image-slice 属性&#xff0c;它用于定义边框图像如何被切割并应用到元素的边框上。这个属…

vue3 安装-使用之第一篇

首先需要node版本高于V16.14.1 安装 执行 npm create vitelatest 具体选择按照自己实际需要的来 Project name:项目名称 Select a framework:选择用哪种框架 &#xff08;我选择vue&#xff09; Select a variant: 选择用JS还是TS&#xff08;我选择JS&#xff09;找到项目&…