AJAX 学习笔记（Day1）

「写在前面」

���文为黑马程序员 AJAX 教程的学习笔记。本着自己学习、分享他人的态度，分享学习笔记，希望能对大家有所帮助。

目录

• 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 插件

    0 课程介绍

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

    1 AJAX 入门

    1.1 AJAX 概念和 axios 使用

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

    什么是 AJAX ?

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

    比如：浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页

    怎么用 AJAX ？

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

      axios 使用

      语法：

      1. 引入 axios.js：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
      2. 使用 axios 函数
      • 传入 配置对象
      • 再用 .then 回调函数接收结果，并做后续处理

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

        案例：

        
        
        
         
         
         
         AJAX概念和axios使用
        
        
         
         
         
         
           // 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('
        '))
             // 把准备好省份列表，插入到页面
             document.querySelector('.my-p').innerHTML = result.data.list.join('
        ') 
           })
         
        
        
        
        

        1.2 认识 URL

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

        什么是 URL ？

        定义：

        例如：

        URL 的组成

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

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

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

        1.3 URL 查询参数

        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

        1.4 常用请求方法和数据提交

        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)
          })
          

          1.5 HTTP协议-报文

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

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

          请求报文：浏览器按照 HTTP 协议要求的格式，发送给服务器的内容

          请求报文的组成部分有:

          1. 请求行：请求方法，URL，协议
          2. 请求头：以键值对的格式携带的附加信息，比如：Content-Type
          3. 空行：分隔请求头，空行之后的是发送给服务器的资源
          4. 请求体：发送的资源

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

          请求报文-错误排查

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

          HTTP 协议-响应报文

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

          响应报文：服务器按照 HTTP 协议要求的格式，返回给浏览器的内容

          响应报文的组成：

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

          HTTP 响应状态码：用来表明请求是否成功完成

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

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

          1.6 接口文档

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

          接口文档：描述接口的文章（一般是后端工程师，编写和提供）

          接口：指使用 AJAX 和 服务器通讯时，使用的 URL，请求方法，以及参数，例如：

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

          1.7 案例 - 用户登录

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

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

          1.8 form-serialize 插件

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

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

          我们前面收集表单元素的值，是一个个标签获取的,如果一套表单里有很多很多表单元素，如何一次性快速收集出来呢？使用 form-serialize 插件提供的 serialize 函数就可以办到。

          form-serialize 插件语法：

          1. 引入 form-serialize 插件到自己网页中
          2. 使用 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 })
                  

                  「结束」

                  本文由 mdnice 多平台发布