Day01_Ajax入门

news2025/11/3 8:35:26

文章目录

  • 学习目标
  • 一、AJAX 概念和 axios 使用
    • 1. 目标
    • 2. 讲解
      • 2.1 什么是 AJAX ?
      • 2.2 什么是服务器？
      • 2.3 为何学 AJAX ?
      • 2.4 怎么学 AJAX ?
      • 2.5 例子
      • 2.6 axios语法
  • 二、认识 URL
    • 1. 目标
    • 2. 讲解
      • 2.1 为什么要认识 URL ?
      • 2.2 什么是 URL ？
      • 2.3 URL的组成 ？
      • 2.4 什么是 http 协议 ?
      • 2.5 什么是域名 ?
      • 2.6 什么是资源路径 ?
  • 三、URL 查询参数
    • 1. 目标
    • 2. 讲解
      • 2.1 什么是查询参数 ?
      • 2.2 查询参数的语法 ？
      • 2.3 axios 如何携带查询参数?
      • 2.4 需求：获取“辽宁省”下属的城市列表，展示到页面，对应代码：
  • 四、常用请求方法和数据提交
    • 1. 目标
    • 2. 讲解
      • 2.1 想要提交数据，先来了解什么是请求方法
      • 2.2 什么时候进行数据提交呢？
      • 2.3 axios 如何提交数据到服务器呢？
  • 五、axios 错误处理
    • 1. 目标
    • 2. 讲解
      • 2.1 如果注册相同的用户名，则会遇到注册失败的请求，也就是 axios 请求响应失败了，你会在控制台看到如图的错误：
      • 2.2 使用 axios 的 catch 方法，捕获这次请求响应的错误并做后续处理，语法如下：
  • 六、HTTP 协议-请求报文
    • 1. 目标
    • 2. 讲解
  • 七、HTTP 协议-响应报文
    • 1. 目标
    • 2. 讲解
  • 八、参考文献

学习目标

  1. 掌握 axios 相关参数，从服务器获取并解析展示数据
  2. 掌握接口文档的查看和使用
  3. 掌握在浏览器的 network 面板中查看请求和响应的内容
  4. 了解请求和响应报文的组成部分

一、AJAX 概念和 axios 使用

1. 目标

了解 AJAX 概念并掌握 axios 库基本使用

2. 讲解

2.1 什么是 AJAX ?

  • 使用浏览器的 XMLHttpRequest 对象 与服务器通信

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

在这里插入图片描述

2.2 什么是服务器？

可以暂时理解为提供数据的一台电脑

2.3 为何学 AJAX ?

  • 以前我们的数据都是写在代码里固定的, 无法随时变化
  • 现在我们的数据可以从服务器上进行获取，让数据变活

2.4 怎么学 AJAX ?

  • 这里使用一个第三方库叫 axios, 后续在学习 XMLHttpRequest 对象了解 AJAX 底层原理
  • 因为 axios 库语法简单，让我们有更多精力关注在与服务器通信上，而且后续 Vue，React 学习中，也使用 axios 库与服务器通信

2.5 例子

需求：从服务器获取省份列表数据，展示到页面上（体验 axios 语法的使用）
获取省份列表数据 - 目标资源地址：http://hmajax.itheima.net/api/province
完成效果：
在这里插入图片描述

2.6 axios语法

首先，引入 axios.js 文件到自己的网页中（axios.js文件链接: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js）
接下来，明确axios函数的使用语法

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

注意：请求的 url 地址, 就是标记资源的网址

注意：then 方法这里先体验使用，由来后续会讲到

最后，来看下对应代码

<!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>

二、认识 URL

1. 目标

了解 URL 的组成和作用

2. 讲解

2.1 为什么要认识 URL ?

虽然是后端给的一个地址，但是哪部分标记的是服务器电脑，哪部分标记的是资源呢？所以为了和服务器有效沟通我们要认识一下

2.2 什么是 URL ？

统一资源定位符，简称网址，用于定位网络中的资源（资源指的是：网页，图片，数据，视频，音频等等）
在这里插入图片描述

2.3 URL的组成 ？

协议，域名，资源路径（URL 组成有很多部分，先掌握这3个重要的部分即可）
在这里插入图片描述

2.4 什么是 http 协议 ?

即超文本传输协议，规定了浏览器和服务器传递数据的格式
在这里插入图片描述

2.5 什么是域名 ?

标记服务器在互联网当中的方位，网络中有很多服务器，你想访问哪一台，就需要知道它的域名才可以
在这里插入图片描述

2.6 什么是资源路径 ?

一个服务器内有多个资源，用于标识你要访问的资源具体的位置
在这里插入图片描述

三、URL 查询参数

1. 目标

掌握-通过URL传递查询参数，获取匹配的数据

2. 讲解

2.1 什么是查询参数 ?

  • 携带给服务器额外信息，让服务器返回我想要的某一部分数据而不是全部数据
  • 举例：查询河北省下属的城市列表，需要先把河北省传递给服务器
    在这里插入图片描述

2.2 查询参数的语法 ？

  • 在 url 网址后面用?拼接格式：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
  • 参数名一般是后端规定的，值前端看情况传递即可

2.3 axios 如何携带查询参数?

使用 params 选项即可

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

查询城市列表的 url地址：http://hmajax.itheima.net/api/city

参数名：pname （值要携带省份名字）

2.4 需求：获取“辽宁省”下属的城市列表，展示到页面，对应代码：

<!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>查询参数</title>
</head>
<body>
  <!-- 
    城市列表: http://hmajax.itheima.net/api/city
    参数名: pname
    值: 省份名字
  -->
  <p></p>
  <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.data.list)
      document.querySelector('p').innerHTML = result.data.list.join('<br>')
    })
  </script>
</body>
</html>

四、常用请求方法和数据提交

1. 目标

掌握如何向服务器提交数据，而不单单是获取数据

2. 讲解

2.1 想要提交数据，先来了解什么是请求方法

请求方法是一些固定单词的英文，例如：GET，POST，PUT，DELETE，PATCH（这些都是http协议规定的），每个单词对应一种对服务器资源要执行的操作
在这里插入图片描述
在这里插入图片描述

  • 前面获取数据其实用的就是GET请求方法，但是axios内部设置了默认请求方法就是GET，我们就没有写

  • 但是提交数据需要使用POST请求方法

2.2 什么时候进行数据提交呢？

例如：多端要查看同一份订单数据，或者使用同一个账号进行登录，那订单/用户名+密码，就需要保存在服务器上，随时随地进行访问
在这里插入图片描述
在这里插入图片描述

2.3 axios 如何提交数据到服务器呢？

method + data

axios({
  url: '目标资源地址',
  method: '请求方法',
  data: {
    参数名: 值
  }
}).then(result => {
  // 对服务器返回的数据做后续处理
})

五、axios 错误处理

1. 目标

掌握接收 axios 响应错误信息的处理语法

2. 讲解

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

在这里插入图片描述

2.2 使用 axios 的 catch 方法，捕获这次请求响应的错误并做后续处理，语法如下：

axios({
  // ...请求选项
}).then(result => {
  // 处理成功数据
}).catch(error => {
  // 处理失败错误
})

六、HTTP 协议-请求报文

1. 目标

了解 HTTP 协议中，请求报文的组成和作用

2. 讲解

首先，HTTP 协议规定了浏览器和服务器返回内容的格式
请求报文：是浏览器按照协议规定发送给服务器的内容，例如刚刚注册用户时，发起的请求报文：
在这里插入图片描述
在这里插入图片描述

这里的格式包含：

  • 请求行：请求方法，URL，协议
  • 请求头：以键值对的格式携带的附加信息，比如：Content-Type（指定了本次传递的内容类型）
  • 空行：分割请求头，空行之后的是发送给服务器的资源
  • 请求体：发送的资源

通过 Chrome 的网络面板查看请求体：
在这里插入图片描述

七、HTTP 协议-响应报文

1. 目标

了解响应报文的组成

2. 讲解

响应报文：是服务器按照协议固定的格式，返回给浏览器的内容
在这里插入图片描述
在这里插入图片描述
响应报文的组成：

  • 响应行（状态行）：协议，HTTP响应状态码，状态信息
  • 响应头：以键值对的格式携带的附加信息，比如：Content-Type（告诉浏览器，本次返回的内容类型）
  • 空行：分割响应头，控制之后的是服务器返回的资源
  • 响应体：返回的资源

HTTP 响应状态码：

  • 用来表明请求是否成功完成

  • 例如：404（客户端要找的资源，在服务器上不存在）
    在这里插入图片描述

八、参考文献

  1. 客户端->百度百科
  2. 浏览器解释->百度百科
  3. 服务器解释->百度百科
  4. url解释->百度百科
  5. http协议->百度百科
  6. 主机名->百度百科
  7. 端口号->百度百科
  8. Ajax解释->百度-懂啦
  9. Ajax解释->MDN解释Ajax是与服务器通信而不只是请求
  10. axios->百度(可以点击播报听读音)
  11. axios(github)地址
  12. axios官方推荐官网
  13. axios(npmjs)地址
  14. GET和POST区别->百度百科
  15. 报文讲解->百度百科
  16. HTTP状态码->百度百科
  17. 接口概念->百度百科

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

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

相关文章

手把手教你改造Sentinel Dashboard 实现配置持久化

手把手教你改造Sentinel Dashboard 实现配置持久化

一. 概述 Sentinel客户端默认情况下接收到 Dashboard 推送的规则配置后&#xff0c;可以实时生效。但是有一个致命缺陷&#xff0c;Dashboard和业务服务并没有持久化这些配置&#xff0c;当业务服务重启后&#xff0c;这些规则配置将全部丢失。 Sentinel 提供两种方式修改规则…
阅读更多...
【C语言】解决C语言报错：Use of Uninitialized Variable

【C语言】解决C语言报错：Use of Uninitialized Variable

文章目录 简介什么是Use of Uninitialized VariableUse of Uninitialized Variable的常见原因如何检测和调试Use of Uninitialized Variable解决Use of Uninitialized Variable的最佳实践详细实例解析示例1&#xff1a;局部变量未初始化示例2&#xff1a;数组未初始化示例3&…
阅读更多...
Linux iptables使用详解

Linux iptables使用详解

一、Linux系统下使用iptables 在Linux中&#xff0c;常用的防火墙工具是iptables。以下是一些基本的iptables命令&#xff0c;用于配置防火墙规则。 查看现有的iptables规则&#xff1a; sudo iptables -L 清除所有现有的规则&#xff08;慎用&#xff0c;可能导致服务不可用…
阅读更多...
基于android开发平台的聊天软件实现(论文+源码)_kaic

基于android开发平台的聊天软件实现(论文+源码)_kaic

摘要&#xff1a;互联网时代的到来使得手机通讯变得更为普及和强大&#xff0c;人们可以随时随地地进行交流。由于工作的繁忙以及生活节奏的加快&#xff0c;人们无法有更多时间展开面对面的交谈&#xff0c;导致在线聊天软件的使用更加频繁&#xff0c;所以本文尝试设计了一款…
阅读更多...
代码随想录算法训练营第六十二天 | 739.每日温度、496.下一个更大元素 I、503.下一个更大元素II

代码随想录算法训练营第六十二天 | 739.每日温度、496.下一个更大元素 I、503.下一个更大元素II

739.每日温度 文字讲解&#xff1a;代码随想录 视频讲解&#xff1a;单调栈&#xff0c;你该了解的&#xff0c;这里都讲了&#xff01;LeetCode:739.每日温度_哔哩哔哩_bilibili 解题思路 思路一&#xff1a;暴力双循环 O&#xff08;n^2&#xff09; 思路二&#xff1a;单…
阅读更多...
医学人工智能项目如何申请基金？

医学人工智能项目如何申请基金？

小罗碎碎念 本期推文面向的群体 青年教师有志硕博/博后 尤其适合一直认真追小罗推文的老师/同学&#xff0c;你们会发现自己在看这篇推文的时候&#xff0c;遇到自己领域的项目时&#xff0c;文思如泉涌&#xff0c;仿佛马上就能把本子写好&#xff0c;哈哈。&#xff08;运用…
阅读更多...
phpStudy安装sqli-labs

phpStudy安装sqli-labs

phpStudy安装sqli-labs git地址&#xff1a;https://github.com/Audi-1/sqli-labs 点击管理–>根目录 将git下载的sqli-labs文件放进去并解压 进入sql-connections修改 修改db-creds.inc文件为自己数据库的账号密码 更改php版本为5.*&#xff0c;因为这个程序只能在php 5.…
阅读更多...
MacOS之Rosetta技术的引入

MacOS之Rosetta技术的引入

提示&#xff1a;宝子们&#xff0c;希望文章对你们有所帮助&#xff0c; 请一键三连支持博主下吧&#xff5e; 文章目录 前言一、Rosetta 是什么&#xff1f;二、关于安装Rosetta三、关于Rosetta的问题分享总结 前言 博主的个人开发环境和配置说明&#xff1a; MacOS Montere…
阅读更多...
保险丝选取

保险丝选取

保险丝 1、保险丝的电压要≥输入最大电压 2、确定外形尺寸 3、确定外形尺寸安全标志如UL、IEC等 4、确定最小额定电流 5、确定I^2t 电压额定值 (Voltage Ratings)&#xff1a; 保险丝的电压额定值必须大于或者等于断开电路的最大电压。由于保险丝的阻值非常低&#xff0c…
阅读更多...
[Qt的学习日常]--常用控件1

[Qt的学习日常]--常用控件1

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、什么是控…
阅读更多...
Vue49-props属性

Vue49-props属性

一、当同一个组件标签被使用多次 因为data属性写的是函数形式&#xff01; 二、需求&#xff1a;老王也想用<Student>组件&#xff0c;但是需要动态把老王想要的值传进来。 2-1、使用props属性接收参数 使用props属性&#xff0c;接收的这三个参数&#xff0c;是被保存在…
阅读更多...
笔记 | 用go写个docker

笔记 | 用go写个docker

仅作为自己学习过程的记录&#xff0c;不具备参考价值 前言 看到一段非常有意思的话&#xff1a; 很多人刚接触docker的时候就会感觉非常神奇&#xff0c;感觉这个技术非常新颖&#xff0c;其实并不然&#xff0c;docker使用到的技术都是之前已经存在过的&#xff0c;只不过旧…
阅读更多...
【笔记】为什么不同硬件的1T实际硬盘容量硬盘是954GB或者931GB？

【笔记】为什么不同硬件的1T实际硬盘容量硬盘是954GB或者931GB？

问题描述 不管是电脑还是移动硬盘&#xff0c;厂家描述的1T硬盘容量都不是计算机知识领域内真正的1T大小&#xff0c;硬盘容量实际是小于1TB的。 另外还发现对于1TB的不同厂家设备有着实际不同的磁盘容量&#xff0c;比如为什么有的1T电脑硬盘是954GB&#xff0c;而移动硬盘是…
阅读更多...
点云传统算法

点云传统算法

1 滤波&#xff0c;过滤噪点&#xff0c;下采样 统计滤波&#xff1a; voxel&#xff0c; 半径搜索&#xff1a; # 基于体素网格化的滤波器 voxel_down_pcd cloud.voxel_down_sample(voxel_size0.5)# 基于半径搜索的滤波器 cl, ind cloud.remove_statistical_outlier(nb_ne…
阅读更多...
【数据结构】三路快速排序

【数据结构】三路快速排序

1. 简介 传统快速排序用的是双路快速排序&#xff0c;即将大于基准值的部分放到基准值右侧&#xff0c;小于基准值的部分放到基准值左侧&#xff0c;但是这种算法面对过多的重复数据的数组&#xff0c;时间复杂度会增多&#xff0c;于是就有了三路快速排序的思想&#xff0c;其…
阅读更多...
【AI实践】Ollama本地安装大模型服务

【AI实践】Ollama本地安装大模型服务

Ollama安装运行 安装与配置 Download Ollama 安装默认在C盘&#xff0c;成功后&#xff0c;window任务栏图标会有Ollama Logo 为了不占用C盘更大的空间&#xff0c;修改模型下载路径&#xff0c;修改环境变量 下载模型 由于我电脑是第六代Intel&#xff0c;集显&#xff0c;…
阅读更多...
北斗三代一体式数传终端短报文

北斗三代一体式数传终端短报文

北斗三代一体式数传终端短报文M20C-V30针对船载通信和导航应用推出的一款支持北斗 RDSS/RNSS 功能的船载一体机。北斗数传终端内部集成了北斗多频天线、射频、基带以及主控等功能单元&#xff0c;可实现 RDSS 定位、短报文通信和 RNSS 导航定位等功能。M20C-V30型北斗数传终端体…
阅读更多...
万事开头难——Java实现俄罗斯小方块【第一步】

万事开头难——Java实现俄罗斯小方块【第一步】

目录 技术实现&#xff1a; 1.初始化游戏窗口&#xff1b; 1.1 什么是窗口&#xff1a; 1.2 Swing 1.3 JFrame创建窗口&#xff1a; 1.3.1创建窗口的逻辑 1.3.2.设置简单的页面 1.3.3.优化 1.3.4.设置标题 1.4 创建游戏窗口 技术实现&#xff1a; 1.初始化游戏窗口&am…
阅读更多...
「茶桁 AI 秘籍-CV 篇」预告

「茶桁 AI 秘籍-CV 篇」预告

Hi, 大家好。 我是茶桁。 咱们的《茶桁的 AI 秘籍》系列距离上一个系列课程《人工智能 BI 核心》已经有一段时间了&#xff0c;终于有时间可以写 CV 部分的课程&#xff0c;主要也是最近一段时间我确实有点忙不过来。 那么咱们 CV 的课程会有一些变化&#xff0c;就是会改为收…
阅读更多...
Spring MVC详解（上）

Spring MVC详解（上）

一、Spring MVC初步认识 1.1介绍 Spring MVC是Spring Framework提供的Web组件&#xff0c;全称是Spring Web MVC,是目前主流的实现MVC设计模式的框架&#xff0c;提供前端路由映射、视图解析等功能 Java Web开发者必须要掌握的技术框架 1.2MVC是什么 MVC是一种软件架构思想…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023