day30 Ajax 1

目录

一、服务器相关的基础概念

1、客户端

2、服务器

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

4、资源与 URL 地址

 二、Ajax 

1、什么是 Ajax

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

3、axios

三、请求报文 & 响应报文

1、什么是请求报文和响应报文

2、请求报文的格式

3、响应报文的格式

4、http 响应状态码

四、接口相关的基础概念

1、接口的概念

2、接口文档的概念

3、接口测试工具-Postman

---

一、服务器相关的基础概念

1、客户端

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

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

常见的客户端浏览器：

2、服务器

概念：服务器是提供服务的设备。

作用：在上网过程中，服务器专门负责存放资源和对外提供服务。

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

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

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

示意图如下：

4、资源与 URL 地址

        URL 地址用来表示服务器上每个资源的确切访问路径。

        一个标准的 URL 地址主要由以下 4 个部分构成：

  （1）URL 地址 - 协议（protocol）

        概念：协议是网络协议的简称，用来保证通信的双方能读懂彼此发送过来的消息内容。

         通信的双方，共同遵守 http 网络协议。 好处：保证能读懂对方发送过来的消息内容。

 （2）URL 地址 - 主机名（hostname）

        概念：主机名用来标识互联网中服务器的唯一性。

          好处：通过主机名，可以保证客户端在万千的服务器中，找到自己想访问的那台服务器！

 （3）URL 地址 - 端口号（port）

        概念：端口号是 0 - 65535 之间的整数，它的主要作用是表示一台计算机中的特定进程所提供的服务。

 端口号的使用注意点：

在 http 协议中，如果 URL 地址中的端口号是 80，则 :80 端口可以省略不写。例如：

• http://url地址:80/images/lunbo1-min.jpg 可以简写为
• http://url地址/images/lunbo1-min.jpg   

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

 （4）URL 地址 - 路径（path）

        概念：路径用来表示资源在服务器上具体的存放位置。

  二、Ajax 

1、什么是 Ajax

        Ajax 是浏览器中的技术：用来实现客户端网页请求服务器的数据。 它的英文全称是 Asynchronous Javascript And XML，简称 Ajax。

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

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

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

（1）POST 请求

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

 （2）GET 请求

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

 （3）DELETE 请求

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

 （4）PUT 请求

        PUT 请求用于更新服务器上的数据（侧重于完整更新：例如更新用户的完整信息）：

 （5）PATCH 请求

        PATCH 请求用于更新服务器上的数据（侧重于部分更新：例如只更新用户的手机号）：

3、axios

        axios（发音：艾克C奥斯） 是前端圈最火的、专注于数据请求的库。

        中文官网地址：http://www.axios-js.com

        英文官网地址：https://www.npmjs.com/package/axios

（1）axios 的基础语法

        axios 的基本语法如下：

axios({
      method: '请求的类型',
      url: '请求的URL地址'
}).then((result) => {
      // .then 用来指定请求成功之后的回调函数
      // 形参中的 result 是请求成功之后的结果
})

（2）基于 axios 发起 GET 请求

代码示例：

GET 请求的查询参数

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

 查询参数的本质 

• 在使用 Ajax 发起 GET 请求时，data 中的参数，会以 ?键=值 的形式拼接到 URL 地址的末尾。因此下面这种写法是完全正确的：

  注意：? 后面的都是查询参数，查询参数的键和值之间使用 = 进行分隔

在 GET 请求中携带多个查询参数

• 如果要携带多个参数，只需要在 params 对象中指定多个查询参数项即可。示例代码如下：

 最终，在 URL 地址的末尾，多个查询参数之间使用 & 符号进行分隔：

http://url地址:3009/api/getbooks?id=1&bookname=love

URL 编码

• 在 URL 地址中不允许出现中文、空格等特殊字符，因此浏览器会自动对 URL 地址内的中文进行转换处理。例如：

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

 result 是 axios 套壳的结果

• 服务器端响应给 axios 的原始数据，被 axios 在外面“套了一层壳”，示意图如下：

 在函数的形参中使用解构赋值

• 使用解构赋值，可以轻松地获取到 axios 请求回来的真实数据。示例代码如下：

axios({
  method: 'GET',
  url: 'http://url地址:3009/api/getbooks'
}).then(({ data: res }) => {
  // 从 .then(fn) 回调函数的形参中，解构赋值出 data 属性，重命名为 res
  console.log(res)
})

（3）基于 axios 发起 POST 请求

        使用 axios 发起 POST 请求时，只需要将 type 属性的值设置为 'POST' 即可：

 POST 提交数据的方式

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

 原因：各个浏览器对 URL 的长度有限制。

 GET 和 POST 提交数据的区别

• GET 请求只能在 URL 中携带少量的数据
• POST 请求适合用来提交大量的数据

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

三、请求报文 & 响应报文

1、什么是请求报文和响应报文

客户端与服务器通信的过程是基于请求与响应的。其中：

• 请求报文规定了客户端以什么格式把数据发送给服务器
• 响应报文规定了服务器以什么格式把数据响应给客户端

2、请求报文的格式

        请求报文由请求行（request line）、请求头部（ header ）、空行 和 请求体 4 个部分组成。图示如下：

  注意：

• 在浏览器中，GET 请求比较特殊，它只有请求头，没有请求体。
• 在浏览器中，POST、PUT、PATCH、DELETE 请求既有请求头，又有请求体。

3、响应报文的格式

        响应报文由状态行、响应头部、空行 和 响应体 4 个部分组成。图示如下：

4、http 响应状态码

        概念：http 响应状态码（Status Code）由三位数字组成，用来标识响应成功与否的状态。

        作用：客户端浏览器根据响应状态码，即可判断出这次 http 请求是成功还是失败了。

（1）常见的 http 响应状态码

状态码	状态码描述	说明
200	OK	请求成功。
201	Created	资源在服务器端已成功创建。
304	Not Modified	资源在客户端被缓存，响应体中不包含任何资源内容！
400	Bad Request	客户端的请求方式、或请求参数有误导致的请求失败！
401	Unauthorized	客户端的用户身份认证未通过，导致的此次请求失败！
404	Not Found	客户端请求的资源地址错误，导致服务器无法找到资源！
500	Internal Server Error	服务器内部错误，导致的本次请求失败！

 （2）http响应状态码和业务状态码的区别：

所处的位置不同：

• 在响应头的状态行中所包含的状态码，叫做“响应状态码”
• 在响应体的数据中所包含的状态码，叫做“业务状态码”

 表示的结果不同：

• 响应状态码只能表示这次请求的成功与否（成功地失败了）
• 业务状态码用来表示这次业务处理的成功与否

 通用性不同：

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

四、接口相关的基础概念

1、接口的概念

        使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称：接口或 API 接口）。 同时，每个接口必须有对应的请求方式。例如：

• http://url地址:3009/api/getbooks  获取图书列表的接口(GET 请求)
• http://url地址:3009/api/addbook   添加图书的接口（POST 请求）

2、接口文档的概念

        接口文档就是接口的使用说明书，它是我们调用接口的依据。一般由后端程序员编写

        一般格式如下所示：

 其中包含了接口的描述信息：

组成部分	说明
接口名称	接口的名称，用来快速区分每个接口的作用。如：登录接口、添加图书接口
接口 URL	客户端发起 Ajax 调用此接口时，请求的 URL 地址
请求方式	接口的请求方式，如：GET、POST、PUT、DELETE 等
请求参数	请求此接口时，需要发送到服务器的查询参数或请求体
返回示例	当接口请求成功后，服务器响应回来的数据的基本格式
返回参数说明	接口响应结果的详细描述

3、接口测试工具-Postman

        接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试，从而检查接口能否被正常访问，而当前最流行的接口测试工具是 Postman

官方下载地址：https://www.postman.com/downloads/

（1）使用 Postman 测试 GET 接口

 （2）使用 Postman 测试 POST 接口