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.hqwc.cn/news/538658.html

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

相关文章

ETAS工具链ISOLAR-AB重要概念，RTE配置，ECU抽取

ETAS工具链ISOLAR-AB重要概念，RTE配置，ECU抽取

RTE配置界面&#xff0c;包含ECU抽取关联 首次配置RTE&#xff0c;出现需要勾选的抽取EXTRACT 创建System System制作SWC到ECU的Mapping System制作System Data 的Mapping
阅读更多...
c++简单使用

c++简单使用

取消同步流是为了解决C有时遇到空格或回车&#xff08;不到\0&#xff09;就会停下的问题 #include<bits/stdc.h> using namespace std; int main() {//取消同步流ios::sync_with_stdio(0), cin.tie(0), cout.tie(0);int a, b;cin >> a>> b;cout << …
阅读更多...
Python collections模块

Python collections模块

collections 模块是Python标准库中提供的一个模块&#xff0c;用于提供一些额外的数据容器和工具&#xff0c;扩展了内置的数据类型。它包含了一些有用的类和函数&#xff0c;用于处理各种数据结构和算法问题。下面是 collections 模块中常用的几个类的详细介绍&#xff1a; 1.…
阅读更多...
SpringBoot（自定义转换器+处理Json+内容协商）

SpringBoot（自定义转换器+处理Json+内容协商）

文章目录 1.自定义转换器1.代码实例1.save.html2.编写两个bean1.Car.java2.Monster.java 3.WebConfig.java 配置类来自定义转换器4.测试 2.注意事项和细节1.debug查看转换器总数1.打断点2.执行到断点后&#xff0c;选左边的1923.可以看出&#xff0c;加上自定义的转换器一共125…
阅读更多...
嵌入式方向还有希望吗？

嵌入式方向还有希望吗？

我刚开始学习&#xff0c;也不知道我定位的是单片机工程师&#xff0c;嵌入式工程师职位的。 我只知道电子工程师&#xff0c;这个职位其实偏硬件&#xff0c;很多岗位需求是硬件设计&#xff0c;PCB设计&#xff0c;还要懂焊接、各种仪器仪表使用&#xff0c;还有些需要懂单片…
阅读更多...
1千多条中医中药知识及问答ACCESS\EXCEL数据库

1千多条中医中药知识及问答ACCESS\EXCEL数据库

今天从一个中医相关的产品中获得了一些数据&#xff0c;比如&#xff1a;《1千多条中医中药知识及问答》、《1千多条中医方剂知识问答》、《690条中医疾病疾病知识问答》&#xff0c;数据库表结构基本相同的。不理解请勿选择&#xff0c;谢谢。 数据包含5个表&#xff08;A一级…
阅读更多...
鸿蒙开发实战：【电话服务子系统】

鸿蒙开发实战：【电话服务子系统】

简介 电话服务子系统&#xff0c;提供了一系列的API用于获取无线蜂窝网络和SIM卡相关的一些信息。应用可以通过调用API来获取当前注册网络名称、网络服务状态、信号强度以及SIM卡的相关信息。 各个模块主要作用如下&#xff1a; 核心服务模块&#xff1a;主要功能是初始化RI…
阅读更多...
市场广泛看好的LaunchPad 平台 PenPad，有望在牛市胜出

市场广泛看好的LaunchPad 平台 PenPad，有望在牛市胜出

阅读更多...
IDEA启动项目到一半后卡住但不报错的解决方法分享

IDEA启动项目到一半后卡住但不报错的解决方法分享

问题现象&#xff1a; 今天在启动项目的时候&#xff0c;微服务启动到后&#xff0c;控制台日志打印到一半之后&#xff0c;就不在打印了&#xff0c;卡住不动&#xff0c;无任何异常日志&#xff0c;项目也无法启动成功&#xff0c;如下&#xff1a; 原因分析&#xff1a; I…
阅读更多...
ArcGIS学习（十五）用地适宜性评价

ArcGIS学习（十五）用地适宜性评价

ArcGIS学习（十五）用地适宜性评价 本任务给大家带来的内容是用地适宜性评价。 用地适宜性评价是大家在平时工作中最常接触到的分析场景之一。尤其是在国土空间规划的大背景下，用地适宜性评价变得越来越重要。 此外，我们之前的任务主要是使用矢量数据进行分析。本案例是主讲…
阅读更多...
跨域问题解决方案

跨域问题解决方案

在Web开发的时候会遇见一个常见的问题&#xff0c;跨域问题&#xff0c;这也是前后端分离的场景常见的问题&#xff0c;下面来看看这个东西是啥&#xff0c;如何应用的吧&#xff1f; 技术派中的跨域问题&#xff0c;有两处&#xff0c;一处是加载CDN图片时&#xff1b;一处是a…
阅读更多...
为什localhost被forbidden而127.0.0.1不被绊？

为什localhost被forbidden而127.0.0.1不被绊？

原因&#xff1a; 判段网关的时候判127.0.0.1&#xff0c;所以最好改localhost 其他参考&#xff1a; 【计算机网络】localhost不能访问&#xff0c;127.0.0.1可以访问&#xff1f;_ping localhost和ping 127.0.0.1-CSDN博客
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023