关于程序员:AJAX-学习笔记Day1

写在后面

本文为黑马程序员 AJAX 教程的学习笔记。本着本人学习、分享别人的态度，分享学习笔记，心愿能对大家有所帮忙。

::: block-1

0 课程介绍
1 AJAX 入门
- 1.1 AJAX 概念和 axios 应用
- 1.2 意识 URL
- 1.3 URL 查问参数
- 1.4 罕用申请办法和数据提交
- 1.5 HTTP 协定 - 报文
- 1.6 接口文档
- 1.7 案例 – 用户登录
- 1.8 form-serialize 插件
  :::

P1：https://www.bilibili.com/video/BV1MN411y7pw?p=1

P2：https://www.bilibili.com/video/BV1MN411y7pw?p=2

什么是 AJAX ?

AJAX 是浏览器与服务器进行 数据通信 的技术

比方：浏览器网页中，应用 AJAX 技术（XHR 对象）发动获取省份列表数据的申请，服务器代码响应筹备好的省份列表数据给前端，前端拿到数据数组当前，展现到网页

怎么用 AJAX？

先应用 axios 库，与服务器进行 数据通信
因为 axios 库语法简略，让咱们有更多精力关注在与服务器通信上，而且后续 Vue，React 学习中，也应用 axios 库与服务器通信
再学习 XMLHttpRequest 对象的应用，理解 AJAX 底层原理

axios 应用

语法：

引入 axios.js：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
应用 axios 函数
传入 配置对象
再用 .then 回调函数接管后果，并做后续解决

axios({url: '指标资源地址'}).then((result) => {// 对服务器返回的数据做后续解决})

案例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJAX 概念和 axios 应用 </title>
</head>

<body>
  <!--
    axios 库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
    省份数据地址：http://hmajax.itheima.net/api/province

    指标: 应用 axios 库, 获取省份列表数据, 展现到页面上
    1. 引入 axios 库
  -->
  <p class="my-p"></p>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // 2. 应用 axios 函数
    axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {console.log(result)
      // 好习惯：多打印，确认属性名
      console.log(result.data.list)
      console.log(result.data.list.join('<br>'))
      // 把筹备好省份列表，插入到页面
      document.querySelector('.my-p').innerHTML = result.data.list.join('<br>') 
    })
  </script>
</body>

</html>

P3：https://www.bilibili.com/video/BV1MN411y7pw?p=3

什么是 URL？

定义：

例如：

URL 的组成

http 协定 ：超文本传输协定，规定浏览器和服务器之间传输数据的格局

域名：标记服务器在互联网中方位

资源门路 ：标记资源在服务器下的 具体位置

P4：https://www.bilibili.com/video/BV1MN411y7pw?p=4

什么是查问参数 ?

定义：浏览器提供给服务器的 额定信息，让服务器返回浏览器想要的数据

语法：http://xxxx.com/xxx/xxx? 参数名 1 = 值 1 & 参数名 2 = 值 2

举例：查问河北省上司的城市列表，须要先把河北省传递给服务器

axios 如何携带查问参数?

语法：应用 axios 提供的 params 选项

axios({
  url: '指标资源地址',
  params: {参数名: 值}
}).then(result => {// 对服务器返回的数据做后续解决})

案例：获取“河北省”上司的城市列表，展现到页面

axios({
  url: 'http://hmajax.itheima.net/api/city',
  params: {pname: '河北省'}
}).then(result => {console.log(result.data.list)
})

案例：地区查问

P5：https://www.bilibili.com/video/BV1MN411y7pw?p=5

P6：https://www.bilibili.com/video/BV1MN411y7pw?p=6

罕用申请办法

申请办法：是一些固定单词的英文，例如：GET，POST，PUT，DELETE，PATCH（这些都是 http 协定规定的），每个单词对应一种对服务器资源要执行的操作

后面咱们获取数据其实用的就是 GET 申请办法，然而 axios 外部设置了默认申请办法就是 GET，咱们就没有写

axios 申请配置

url：申请的 URL 网址
method：申请的办法，GET能够省略（不辨别大小写）
data：提交数据

axios({
  url: '指标资源地址',
  method: '申请办法',
  data: {参数名: 值}
}).then(result => {// 对服务器返回的数据做后续解决})

案例：注册账号，提交用户名和明码到服务器保留

axios({
  url: 'http://hmajax.itheima.net/api/register',
  method: 'POST',
  data: {
    username: 'itheima007',
    password: '7654321'
  }
})

axios 错误处理

P7：https://www.bilibili.com/video/BV1MN411y7pw?p=7

如果注册雷同的用户名，则会遇到注册失败的申请，也就是 axios 申请响应失败了，你会在控制台看到如图的谬误：

因为，普通用户不会去控制台里看错误信息，咱们要编写代码拿到谬误并展现给用户在页面上

语法：在 then 办法的前面，通过点语法调用 catch 办法，传入回调函数并定义形参

axios({// ... 申请选项}).then(result => {// 解决胜利数据}).catch(error => {// 解决失败谬误})

案例：反复注册时通过弹框提醒用户谬误起因

axios({
  url: 'http://hmajax.itheima.net/api/register',
  method: 'post',
  data: {
    username: 'itheima007',
    password: '7654321'
  }
}).then(result => {
  // 胜利
  console.log(result)
}).catch(error => {
  // 失败
  // 处理错误信息
  console.log(error)
  console.log(error.response.data.message)
  alert(error.response.data.message)
})

P8：https://www.bilibili.com/video/BV1MN411y7pw?p=8

HTTP 协定：规定了浏览器发送及服务器返回内容的格局

申请报文 ：浏览器依照 HTTP 协定要求的格局，发送给服务器的内容

申请报文的组成部分有:

申请行：申请办法，URL，协定
申请头：以键值对的格局携带的附加信息，比方：Content-Type
空行：分隔申请头，空行之后的是发送给服务器的资源
申请体：发送的资源

通过 Chrome 的网络面板查看申请报文:

申请报文 - 谬误排查

P9：https://www.bilibili.com/video/BV1MN411y7pw?p=9

HTTP 协定 - 响应报文

P10：https://www.bilibili.com/video/BV1MN411y7pw?p=10

响应报文：服务器依照 HTTP 协定要求的格局，返回给浏览器的内容

响应报文的组成：

响应行（状态行）：协定、HTTP 响应状态码、状态信息
响应头：以键值对的格局携带的附加信息，比方：Content-Type
空行：分隔响应头，空行之后的是服务器返回的资源
响应体：返回的资源

HTTP 响应状态码：用来表明申请是否胜利实现

比方：404（服务器找不到资源）

通过 Chrome 的网络面板查看响应报文:

P11：https://www.bilibili.com/video/BV1MN411y7pw?p=11

接口文档：形容接口的文章（个别是后端工程师，编写和提供）

接口：指应用 AJAX 和服务器通信时，应用的 URL，申请办法，以及参数，例如：

AJAX 阶段接口文档: https://apifox.com/apidoc/shared-1b0dd84f-faa8-435d-b355-5a8a…

P12：https://www.bilibili.com/video/BV1MN411y7pw?p=12

P13：https://www.bilibili.com/video/BV1MN411y7pw?p=13

P14：https://www.bilibili.com/video/BV1MN411y7pw?p=14

P15：https://www.bilibili.com/video/BV1MN411y7pw?p=15

咱们后面收集表单元素的值，是一个个标签获取的, 如果一套表单里有很多很多表单元素，如何一次性疾速收集进去呢？应用 form-serialize 插件提供的 serialize 函数就能够办到。

form-serialize 插件语法：

引入 form-serialize 插件到本人网页中
应用 serialize 函数
参数 1：要获取的 form 表单标签对象（要求表单元素须要有 name 属性 - 用来作为收集的数据中属性名）
参数 2：配置对象
- hash：
- true – 收集进去的是一个 JS 对象构造
- false – 收集进去的是一个查问字符串格局
  - empty：
- true – 收集空值
- false – 不收集空值

const form = document.querySelector('.example-form')
const data = serialize(form, { hash: true, empty: true})

<center>完结 </center>

本文由 mdnice 多平台公布

写在后面

目录

0 课程介绍

1 AJAX 入门

1.1 AJAX 概念和 axios 应用

1.2 意识 URL

1.3 URL 查问参数

1.4 罕用申请办法和数据提交

1.5 HTTP 协定 - 报文

1.6 接口文档

1.7 案例 – 用户登录

1.8 form-serialize 插件