Ajax.

目录

[1. 服务器相关的基础概念](#1. 服务器相关的基础概念)

[1.1 服务器](#1.1 服务器)

[1.2 客户端](#1.2 客户端)

[1.3 服务器对外提供的资源](#1.3 服务器对外提供的资源)

[1.4 数据也是资源](#1.4 数据也是资源)

[1.5 资源与 URL 地址](#1.5 资源与 URL 地址)

[1.6 什么是 Ajax](#1.6 什么是 Ajax)

[2. Ajax 的基础用法](#2. Ajax 的基础用法)

[2.1 POST 请求](#2.1 POST 请求)

[2.2 GET 请求](#2.2 GET 请求)

[2.3 DELETE 请求](#2.3 DELETE 请求)

[2.4 PUT 请求](#2.4 PUT 请求)

[2.5 PATCH 请求](#2.5 PATCH 请求)

[3. axios](#3. axios)

[3.1 axios 的基础语法](#3.1 axios 的基础语法)

[3.2 基于 axios 发起 GET 请求](#3.2 基于 axios 发起 GET 请求)

[3.3 基于 axios 发起 POST 请求](#3.3 基于 axios 发起 POST 请求)

[3.4 GET 和 POST 提交数据的区别](#3.4 GET 和 POST 提交数据的区别)

[4. 请求报文 & 响应报文](#4. 请求报文 & 响应报文)

[4.1 什么是通信](#4.1 什么是通信)

[4.2 通信协议](#4.2 通信协议)

[4.3 http协议](#4.3 http协议)

[4.4 什么是请求报文和响应报文](#4.4 什么是请求报文和响应报文)

[4.5 请求报文 - 格式](#4.5 请求报文 - 格式)

[4.6 响应报文 - 格式](#4.6 响应报文 - 格式)

[4.7 http 响应状态码](#4.7 http 响应状态码)

[4.8 http 响应状态码 Vs 业务状态码](#4.8 http 响应状态码 Vs 业务状态码)

[5. 接口相关的基础概念](#5. 接口相关的基础概念)

[5.1 接口的概念](#5.1 接口的概念)

[5.2 接口文档的概念](#5.2 接口文档的概念)

[5.3 接口测试工具](#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 端口可以省略不写。例如:

注意:只有 :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 接口

相关推荐
Fan_web2 分钟前
jQuery——事件委托
开发语言·前端·javascript·css·jquery
安冬的码畜日常4 分钟前
【CSS in Depth 2 精译_044】第七章 响应式设计概述
前端·css·css3·html5·响应式设计·响应式
莹雨潇潇1 小时前
Docker 快速入门(Ubuntu版)
java·前端·docker·容器
Jiaberrr1 小时前
Element UI教程:如何将Radio单选框的圆框改为方框
前端·javascript·vue.js·ui·elementui
Tiffany_Ho2 小时前
【TypeScript】知识点梳理(三)
前端·typescript
安冬的码畜日常3 小时前
【D3.js in Action 3 精译_029】3.5 给 D3 条形图加注图表标签(上)
开发语言·前端·javascript·信息可视化·数据可视化·d3.js
太阳花ˉ3 小时前
html+css+js实现step进度条效果
javascript·css·html
小白学习日记3 小时前
【复习】HTML常用标签<table>
前端·html
john_hjy3 小时前
11. 异步编程
运维·服务器·javascript