Ajax

服务器

本质

也是一台电脑。

作用

1. 存储一个网站的文件（HTML、CSS、JS、图片、音乐…..）。
2. 提供网站的文件给用户。

资源

1. 服务器上的 网页(html文件)、图片、音乐、视频、字体文件、CSS文件、JS文件等等都称之为资源。所以资源代指服务器上存储的内容。
2. 数据也是资源
3. URL地址（统一资源定位符）
4. URL 地址，表示服务器上每个资源的确切位置。
5. 服务器上的每个资源，都对应着独一无二的URL地址
6. 数据也是服务器上的资源。
   对数据的操作（增删改查），也对应着不同的URL地址。
   

客户端

概念

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

作用

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

Ajax

码云地址

https://gitee.com/wang-wenqian/js/tree/ajax/ajax

概念

1. Ajax 是浏览器中的技术：用来实现客户端网页请求服务器的数据。
2. 英文全称是 Asynchronous Javascript And XML，简称 Ajax。
3. Ajax中，客户端浏览器在请求服务器上的数据时，根据操作性质（增删改查）的不同，可以分为以下 5 种常见的操作
   | 请求方式 | 描述 | | —- | —- | | POST | 向服务器新增数据 | | GET | 从服务器获取数据 | | DELETE | 删除服务器上的数据 | | PUT | 更新服务器上的数据（侧重于完整更新：例如更新用户的完整信息） | | PATCH | 更新服务器上的数据（侧重于部分更新：例如只更新用户的手机号） |

Ajax基础用法

axios

1. 是前端圈最火的、专注于数据请求的库。
2. 中文官网地址：https://www.axios-http.cn/
3. 英文官网地址：https://www.npmjs.com/package/axios
4. 基础语法

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

• result是一个对象
• result.data才是服务器返回的结果

基于 axios 发起 GET 请求

axios({
  method: 'GET',
  url: 'http://www.itcbc.com:3006/api/getbooks'
}).then((result) => {
  console.log(result)
})

GET 请求的查询参数

axios({
  // 1. 指定请求方式为GET
  method: 'GET',
  // 2. 指定请求的 URL 地址
  url: 'http://www.itcbc.com:3006/api/getbooks',
  // 3. 查询参数
  params: {
    id: 1  //表示获取id为1的数据
  }
}).then(result => {
  console.log(result)
})
//在 GET 请求中携带多个查询参数
axios({
  method: 'GET',
  url: 'http://www.itcbc.com:3006/api/getbooks',
  // 查询参数
  params: {
    id: 1,
    bookname: 'love'   //表示获取 id=1 并且 bookname=love 的图书
  }
}).then(result => {
  console.log(result)
})

基于 axios 发起 POST 请求

1. 使用 axios 发起 POST 请求时，只需要将 method 属性的值设置为 'POST'.
2. GET请求提交数据用 params。
   POST请求提交数据用 data。

axios({
  method: 'POST',
  url: 'http://www.itcbc.com:3006/api/addbook',
  // 请求体
  data: {
    bookname: '水浒传',
    author: '施耐庵',
    publisher: '顺义出版社'
  }
}).then(result => {
  console.log(result)
})

接口

概念

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

接口文档

概念

就是接口的使用说明书 。

Query参数

携带在url中

*身份认证

1. 服务器存储的数据，分为通用数据和个人数据。
2. 默认获取、添加、删除、修改的都是通用数据。
3. 在获取、添加、删除、修改时，如果带appkey参数，则表示使用个人数据。

network工具

介绍

隐藏时间轴

禁用浏览器缓存

查看请求状态

1. 200 表示成功
2. pending 表示等待（可能网络不好或者断网了）
3. 4xx 和 5xx 都表示不同程度的错误
4. Failed 表示失败

network面板 查看请求方式和完整URL

network面板 查看 传输到服务器的数据

产看响应结构

原生AJAX