AJAX 01 AJAX 概念和 axios 使用

2.27

AJAX 学习

  • AJAX 1 入门
    • 01 AJAX 概念和 axios 使用
      • axios 使用
      • 案例
    • 02 认识 URL
      • URL组成
    • 03 URL 查询参数
      • axios－查询参数
      • 案例 ：地区查询
    • 04 常用请求方法和数据提交
      • axios 请求配置
      • axios 错误处理
    • 05 HTTP协议-报文
      • ① 请求报文
        • 作用：错误排查
      • ② 响应报文
    • 06 接口文档
    • 07 案例 - 用户登录
    • 08 form-serialize 插件

本笔记为 观看B站教学视频 BV1MN411y7pw 后 个人整理的笔记。

AJAX 1 入门

01 AJAX 概念和 axios 使用

总结：
1. AJAX 有什么用？
➢ 浏览器和服务器之间通信，动态数据交互
2. AJAX 如何学：
➢ 先掌握 axios 使用
➢ 再了解 XMLHttpRequest 原理
3. 这一节 axios 体验步骤？
➢ 引入 axios 库
➢ 使用 axios 语法

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）

简单来说，就是使用 XMLHttpRequest 对象与服务器通信。

AJAX 是浏览器与服务器进行数据通信的技术。
在这里插入图片描述

怎么用 AJAX ？

  1. 先使用 axios [æk‘sioʊs] 库，与服务器进行数据通信

  • 基于 XMLHttpRequest 封装、代码简单、月下载量在 14 亿次

  • Vue、React 项目中都会用到 axios

  1. 再学习 XMLHttpRequest 对象的使用，了解 AJAX 底层原理

axios 使用

在这里插入图片描述

案例

需求：请求目标资源地址，拿到省份列表数据，显示到页面

目标资源地址：http://hmajax.itheima.net/api/province

<body><p class="my-p"></p>
</body>
<!-- 1 引入axios库 -->
<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.data.list);console.log(result.data.list.join('<br>'));document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')})
</script>

在这里插入图片描述

02 认识 URL

总结
1. URL 是什么：
➢ 统一资源定位符，网址，用于访问服务器上资源
2. 请解释这个 URL，每个部分作用？
➢ http://hmajax.itheima.net/api/news
➢ 协议://域名/资源路径

在这里插入图片描述

例如：

• https://www.baidu.com/index.html 网页资源

• https://www.itheima.com/images/logo.png 图片资源

• http://hmajax.itheima.net/api/province 数据资源

概念：URL 就是统一资源定位符，简称网址，用于访问网络上的资源

URL组成

在这里插入图片描述

① 协议

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

在这里插入图片描述

② 域名

域名：标记服务器在互联网中方位
在这里插入图片描述

③ 资源路径

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

03 URL 查询参数

1. URL 查询参数有什么作用？
➢ 浏览器提供给服务器额外信息，获取对应的数据
2. axios 要如何携带查询参数？
➢ 使用 params 选项，携带参数名和值

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

在这里插入图片描述

axios－查询参数

这是 axios 库的语法

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

请注意params 左边的参数名是 后端定义的。参数名 和 值的引用名字相同的时候可以只写一个。 比如params {pname（这里是后端定义的名字）: pname（这里是前端我们定义的变量名字）}，此时可以简化成 params { pname }

注意：axios 在运行时把参数名和值，会拼接到 url?参数名=值

城市列表：http://hmajax.itheima.net/api/city?pname=河北省

在这里插入图片描述

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>axios({url: 'http://hmajax.itheima.net/api/city',params: {pname: '河北省'}}).then(result => {console.log(result);})
</script>

案例 ：地区查询

需求： 根据输入的省份名字和城市名字，查询地区并渲染列表

分析：

首先：确定 URL 网址和参数说明

• 查询某个省内某个城市的所有地区: http://hmajax.itheima.net/api/area

• 参数名：

​ pname：省份名字或直辖市名字，比如北京、福建省、辽宁省…

​ cname：城市名字，比如北京市、厦门市、大连市…

完整：http://hmajax.itheima.net/api/area?pname=北京&cname=北京市

这里北京没有引号，？ & 也不可以漏掉

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

1. 请求方法表明对服务器资源的操作，最为常用的2个是？
➢ POST 提交数据，GET 查询数据
2. axios 的核心配置？
➢ url：请求 URL 网址
➢ method：请求方法，GET 可以省略（不区分大小写）
➢ params：查询参数
➢ data：提交数据

在这里插入图片描述

场景：当数据需要在服务器上保存（比如我们的账号信息 手机和网页上同步）

POST 数据提交，带着自己的 data

GET 获取数据，params 中的变量存储数据

axios 请求配置

url：请求的 URL 网址

method：请求的方法，GET 可以省略（不区分大小写）

data：提交数据

在这里插入图片描述

数据提交－注册账号

需求： 通过 axios 提交用户名和密码，完成注册功能

注册用户 URL 地址：http://hmajax.itheima.net/api/register

请求方法：POST

参数名：

username 用户名（中英文和数字组成，最少 8 位）

password 密码（最少 6 位）
在这里插入图片描述

如果有报错信息，那么点开axios的报错信息之后，找到response的data查看信息

  <button class="btn">注册用户</button><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*注册用户: http://hmajax.itheima.net/api/register请求方法: POST参数名:username: 用户名 (中英文和数字组成, 最少8位)password: 密码 (最少6位)目标: 点击按钮, 通过axios提交用户和密码, 完成注册*/document.querySelector('.btn').addEventListener('click',()=>{axios({url: 'http://hmajax.itheima.net/api/register',method: 'post', //指定请求的方法data: {username: 'haokuna',password: '234511'}}).then(result => {console.log(result);})})</script>

axios 错误处理

场景：再次注册相同的账号，会遇到报错信息

处理：用更直观的方式，给普通用户展示错误信息

如果有报错信息，那么点开axios的报错信息之后，找到response的data查看信息

在这里插入图片描述

05 HTTP协议-报文

浏览器是怎么把内容发送给服务器的呢？

① 请求报文

总结
1. 浏览器发送给服务器的内容叫做请求报文
2. 请求报文的组成：
3. 通过 Chrome 的网络面板查看请求报文

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

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

服务器会使用相应的格式解析请求报文，就知道浏览器想要干什么

在这里插入图片描述

  1. 请求行：请求方法，URL，协议（遵守什么协议）
  2. 请求头：以键值对的格式携带的附加信息，比如：Content-Type
  3. 空行：分隔请求头，空行之后的是发送给服务器的资源
  4. 请求体：发送的资源
    在这里插入图片描述

Content-Type规定这次请求时携带的内容类型

axios会把代码中的data对象转化为JSON字符串，携带到请求报文中。

在浏览器怎么查看请求报文

在这里插入图片描述

作用：错误排查

需求：通过请求报文排查错误原因，并修复

案例：输入正确的用户名和密码无法登录

用户名：itheima007

密码：7654321

思路：

① 确认了一下输入了正确的用户名和密码确实无法登录 ② 用户名和密码是在后端判断正确的。那么用户名和密码真的携带到了请求报文中吗？我们要在请求报文中验证一下 ③ 在报文中发现密码错误

② 响应报文

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

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

  1. 响应行（状态行）：协议、HTTP 响应状态码、状态信息

  2. 响应头：以键值对的格式携带的附加信息，比如：Content-Type

    Content-Type规定服务器返回的内容类型，如下图是 JSON

  3. 空行：分隔响应头，空行之后的是服务器返回的资源

  4. 响应体：返回的资源

在这里插入图片描述

404：网址写错了，服务器找不到这个资源。

总结
1. 响应报文的组成：
响应行（状态行）：协议、HTTP 响应状态码、状态信息
响应头：以键值对的格式携带的附加信息，比如 Content-Type
空行：分隔响应头，空行之后的是返回给浏览器的资源
响应体：返回的资源
2. HTTP 响应状态码用来表明请求是否成功完成

06 接口文档

接口文档：描述接口的文章 （后端工程师）

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

更多的接口文档案例：传送门 https://apifox.com/apidoc/shared-1b0dd84f-faa8-435d-b355-5a8a329e34a8
在这里插入图片描述

黑马教学视频 的接口文档：https://apifox.com/apidoc/shared-1b0dd84f-faa8-435d-b355-5a8a329e34a8

知识点补充：axios在看到 data后面是对象的时候，就会把它转换成 JSON字符串
在这里插入图片描述

  • json 表示字符串

  • body参数就是 请求体

总结：
接口文档：由后端提供的描述接口相关信息的文章
前端工程师根据这个文档找到想使用的功能接口，根据URL网址、请求方法、要携带的参数和相应的位置，来与服务器进行数据的交互。

07 案例 - 用户登录

V:\Web\mycode\AJAX\1-8案例_登录.html

V:\Web\mycode\AJAX\1-9案例_登录_提示信息.html

用户登录：

  1. 点击登录时，判断用户名和密码长度（在接口文档中后端规定密码长度
  2. 提交数据和服务器通信
  3. 提示信息
    document.querySelector('.btn-login').addEventListener('click', ()=> {const username = document.querySelector('.username').valueconst password = document.querySelector('.password').value//用户名和密码长度判断:if(username.length < 8) {console.log('用户名必须大于等于8位');return}if(password.length < 6) {console.log('密码必须大于等于6位');return}// 提交数据和服务器通信axios({url: 'http://hmajax.itheima.net/api/login',method: 'post',data: {// 这里为什么用data不用params// POST数据提交，带着自己的data// GET获取数据，params中的变量存储数据username,password// itheima007, 7654321}}).then(result => {console.log(result.data.message);}).catch(error => {console.log(error.response.data.message);})})

08 form-serialize 插件

作用：快速收集表单元素的值

语法：

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

参数：

  • hash 设置获取的数据结构

    true：JS 对象（推荐），false：查询字符串

  • empty设置是否获取空值

    true：获取空值（推荐，保证数据结构和标签结构一致），false：不获取空值

使用步骤： ① 引入 form-serialize 插件 ② 获取form ，并保证所有表单元素都有name属性，且与接口文档一致 ③ 对象解构（在属性和变量名同名的时候可以简写 -pink js P159）

表单元素必须设置name属性（强烈介意和和接口文档一致），值会作为对象的属性名
在这里插入图片描述

<body><form action="javascript:;" class="example-form"><input type="text" name="username"><br><input type="text" name="password"><br><input type="button" class="btn" value="提交"></form><!-- 目标：在点击提交时，使用form-serialize插件，快速收集表单元素值1. 把插件引入到自己网页中--><script src="./lib/form-serialize.js"></script><script>document.querySelector('.btn').addEventListener('click',()=> {// 参数一 获取哪个表单// 参数二 配置对象const form = document.querySelector('.example-form')const res = serialize(form, {hash:true, empty: true})console.log(res);})</script>
</body>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/745380.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数据结构:堆

数据结构:堆

堆的概念 1.堆是一个完全二叉树 2.小堆(任何一个父亲<孩子),大堆(任何一个父亲>孩子) 堆的结构 物理结构:数组 逻辑结构:二叉树 #pragma once #include<assert.h> #include<iostream> typedef int HPDataType; typedef struct Heap {HPDataType* _a;int…
阅读更多...
使用 Jenkins 管道在 Docker Hub 中构建 Docker 镜像

使用 Jenkins 管道在 Docker Hub 中构建 Docker 镜像

Jenkins Pipeline 是一个强大的工具&#xff0c;可以自动执行部署。在各个阶段之间拆分的灵活和自定义操作是尝试此功能的一个很好的理由。 构建您自己的 Docker 镜像并将其上传到 Docker Hub 以保持存储库更新是了解 Jenkins Pipeline 如何改进您的工作方式的一个很好的示例。…
阅读更多...
产品推荐 - 基于Xilinx Kintex-7 XC7K160T/325T/410T打造的水星Mercury+ KX2核心板

产品推荐 - 基于Xilinx Kintex-7 XC7K160T/325T/410T打造的水星Mercury+ KX2核心板

水星Mercury KX2核心板 水星Mercury KX2核心板提供高性价比的Xilinx Kintex-7 28nm FPGA和常见的接口&#xff0c;如USB 2.0、PCIe Gen2和千兆以太网。 KX1有强大的FPGA和标准接口、很多具备LVDS能力的I/O、大容量DDR3 SDRAM、很多高速DSP slices&#xff0c;它既适合高端数字信…
阅读更多...
第五十八回 吴用赚金铃吊挂 宋江闹西岳华山-飞桨图像分割套件PaddleSeg初探

第五十八回 吴用赚金铃吊挂 宋江闹西岳华山-飞桨图像分割套件PaddleSeg初探

鲁智深被贺太守抓住&#xff0c;押入死牢。武松得信后&#xff0c;正想回梁山报信&#xff0c;正好戴宗来了&#xff0c;就请戴宗赶快回梁山搬救兵。宋江说兄弟有难&#xff0c;怎能不救&#xff1f; 于是带了十六个头领来到少华山。 因为华州城池厚壮&#xff0c;宋江等无计可…
阅读更多...
【开源】SpringBoot框架实验室耗材管理系统

【开源】SpringBoot框架实验室耗材管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 耗材档案模块2.2 耗材入库模块2.3 耗材出库模块2.4 耗材申请模块2.5 耗材审核模块 三、系统展示四、核心代码4.1 查询耗材品类4.2 查询资产出库清单4.3 资产出库4.4 查询入库单4.5 资产入库 五、免责说明 一、摘要 1.1…
阅读更多...
JavaEE之多线程(创建线程的五种写法)详解

JavaEE之多线程(创建线程的五种写法)详解

&#x1f63d;博主CSDN主页: 小源_&#x1f63d; &#x1f58b;️个人专栏: JavaEE &#x1f600;努力追逐大佬们的步伐~ 目录 1. 前言 2. 操作系统"内核" 3. 创建线程的五种写法 (我们重点要掌握最后一种写法!!) 3.1 继承 Thread, 重写 run 3. 2 实现 Runnabl…
阅读更多...
电脑坏了去维修，第一家报价800,第三家说报废！

电脑坏了去维修，第一家报价800,第三家说报废！

这篇文章主要讲的是修理坏掉的电脑。 第一家报价300&#xff0c;第二家报价800&#xff0c;第三家说要报废&#xff01; 相信很多朋友对于修电脑坏了要多少钱有很多困惑&#xff0c;修电脑坏了要多少钱&#xff0c;到底去正规售后服务还是去非品牌店维修一台坏掉的电脑。 今天高…
阅读更多...
Jmeter扩展---自定义取样器

Jmeter扩展---自定义取样器

简介 Jmeter已经内置了各种协议的取样器&#xff0c;已经能满足常用的性能压测需求。且在前面一章Jmeter扩展开发--自定义java取样器-CSDN博客中也有关于Java取样器的扩展开发&#xff0c;不过有时候我们期望能定制自己的取样器和界面。为此&#xff0c;需要对Jmeter做扩展&am…
阅读更多...
界面控件DevExpress ASP.NET Scheduler - 助力快速交付个人信息管理系统（下）

界面控件DevExpress ASP.NET Scheduler - 助力快速交付个人信息管理系统（下）

DevExpress ASP. NET Scheduler组件能完全复制Microsoft Outlook Scheduler的样式和功能&#xff0c;具有日、周、月和时间轴视图&#xff0c;并包括内置的打印支持&#xff0c;因此用户可以在尽可能短的时间内交付全功能的个人信息管理系统。在上文中&#xff08;点击这里回顾…
阅读更多...
Gemma中RoPE代码详细讲解

Gemma中RoPE代码详细讲解

最近在看Gemma代码感觉比LLama的代码看的方便点&#xff0c; 看到RoPE代码跟常规的方式不太一样&#xff08;也不算常规&#xff0c;就是我理解的方式&#xff09;&#xff0c;特此记录一下。我的RoPE入门代码参考&#xff1a;Rotary Position Embedding (RoPE, 旋转式位置编码…
阅读更多...
自然语言处理实验2 字符级RNN分类实验

自然语言处理实验2 字符级RNN分类实验

实验2 字符级RNN分类实验 必做题&#xff1a; &#xff08;1&#xff09;数据准备&#xff1a;academy_titles.txt为“考硕考博”板块的帖子标题&#xff0c;job_titles.txt为“招聘信息”板块的帖子标题&#xff0c;将上述两个txt进行划分&#xff0c;其中训练集为70%&#xf…
阅读更多...
服务器Debian 12.x中安装Jupyer并配置远程访问

服务器Debian 12.x中安装Jupyer并配置远程访问

服务器系统&#xff1a;Debian 12.x&#xff1b;IP地址&#xff1a;10.100.2.138 客户端&#xff1a;Windows 10;IP地址&#xff1a;10.100.2.38 利用ssh登录服务器&#xff1a; 1.安装python3 #apt install python3 2.安装pip #apt install python3-pip … 3.安装virtualen…
阅读更多...
Unity Timeline学习笔记(3) - SignalTrack信号轨道和自定义带参数的Marker信号和轨道

Unity Timeline学习笔记(3) - SignalTrack信号轨道和自定义带参数的Marker信号和轨道

信号轨道&#xff0c;顾名思义就是运行到某处发送一个信号。 普通用法 普通用法就是没有任何封装的&#xff0c;个人感觉特别难用&#xff0c;但是有必要理解一下工作原理。 添加信号 我们添加一个信号资源 生成后可以看到资源文件&#xff0c;这个是可以拖到SignalTrack上…
阅读更多...
【Python数据结构与判断7/7】数据结构小结

【Python数据结构与判断7/7】数据结构小结

目录 序言 整体回忆 定义方式 访问元素 访问单个元素 访问多个与元素 修改元素 添加元素 列表里添加元素 字典里添加元素 删除元素 in运算符 实战案例 总结 序言 今天将对前面学过的三种数据结构&#xff1a;元组&#xff08;tuple&#xff09;、列表&#xff08;…
阅读更多...
微前端框架 qiankun 配置使用【基于 vue/react脚手架创建项目 】

微前端框架 qiankun 配置使用【基于 vue/react脚手架创建项目 】

qiankun官方文档&#xff1a;qiankun - qiankun 一、创建主应用&#xff1a; 这里以 vue 为主应用&#xff0c;vue版本&#xff1a;2.x // 全局安装vue脚手架 npm install -g vue/clivue create main-app 省略 vue 创建项目过程&#xff0c;若不会可以自行百度查阅教程 …
阅读更多...
java垃圾回收-三色标记法

java垃圾回收-三色标记法

三色标记法 引言什么是三色标记法白色灰色黑色 三色标记过程三色标记带来的问题多标问题漏标问题 如何弥补漏标问题增量更新原始快照总结 引言 在CMS,G1这种并发的垃圾收集器收集对象时&#xff0c;假如一个对象A被GC线程标记为不可达对象&#xff0c;但是用户线程又把A对象做…
阅读更多...
数字化经济的前沿：深入了解 Web3 的商业模式

数字化经济的前沿：深入了解 Web3 的商业模式

随着区块链技术的迅速发展&#xff0c;Web3作为一种新型的互联网范式&#xff0c;正逐渐引起人们的关注。它不仅仅是一种技术革新&#xff0c;更是一种商业模式和价值观的转变。本文将深入探讨Web3的商业模式&#xff0c;以及它对数字化经济的影响。 1. 理解Web3的商业模式 We…
阅读更多...
算法---滑动窗口练习-4（无重复字符的最长子串）

算法---滑动窗口练习-4（无重复字符的最长子串）

无重复字符的最长子串 1. 题目解析2. 讲解算法原理3. 编写代码 1. 题目解析 题目地址&#xff1a;点这里 2. 讲解算法原理 算法的主要思想是使用滑动窗口来维护一个不含重复字符的子串。定义两个指针 left 和 right 分别表示窗口的左边界和右边界。还定义了一个数组 hash 来记…
阅读更多...
Apache Paimon 的 CDC Ingestion 概述

Apache Paimon 的 CDC Ingestion 概述

CDC Ingestion 1&#xff09;概述 Paimon支持schema evolution将数据插入到Paimon表中&#xff0c;添加的列将实时同步到Paimon表&#xff0c;并且无需重启同步作业。 目前支持的同步方式如下&#xff1a; MySQL Synchronizing Table: 将MySQL中的一个或多个表同步到一个Pa…
阅读更多...
【算法与数据结构】深入解析二叉树（一）

【算法与数据结构】深入解析二叉树（一）

文章目录 &#x1f4dd;数概念及结构&#x1f320; 树的概念&#x1f309;树的表示&#x1f320; 树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff09; &#x1f309;二叉树概念及结构&#x1f320;概念&#x1f309;数据结构中的二叉树&#x1f320;特殊的二叉…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023