Day01_Ajax入门

文章目录

  • 学习目标
  • 一、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. 接口概念->百度百科

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

架构设计 - WEB项目的基础序列化配置

架构设计 - WEB项目的基础序列化配置

摘要&#xff1a;web项目中做好基础架构(redis&#xff0c;json)的序列化配置有重要意义 支持复杂数据结构&#xff1a;Redis 支持多种不同的数据结构&#xff0c;如字符串、哈希表、列表、集合和有序集合。在将这些数据结构存储到 Redis 中时&#xff0c;需要将其序列化为字节…
阅读更多...
IT入门知识博客文章大纲（0/10）

IT入门知识博客文章大纲（0/10）

IT入门知识博客文章大纲 引言 什么是IT&#xff1f; 信息技术&#xff08;Information Technology&#xff09;&#xff0c;互联网技术是指在计算机技术的基础上开发建立的一种信息技术 。互联网技术通过计算机网络的广域网使不同的设备相互连接&#xff0c;加快信息的传输速度…
阅读更多...
【JavaEE精炼宝库】多线程（6）线程池

【JavaEE精炼宝库】多线程（6）线程池

目录 一、线程池的概念及优势 1.1 线程池的概念&#xff1a; 1.2 线程池的优势&#xff1a; 二、工厂模式 三、标准库中的线程池 3.1 标准库线程池参数解释&#xff1a; 3.1.1 corePoolSize | maximumPoolSize&#xff1a; 3.1.2 keepAliveTime | unit&#xff1a; 3.1…
阅读更多...
Vue50-mixin混入

Vue50-mixin混入

一、为什么要使用 mixin混入 两个组件共享一个配置。 二、使用 mixin混入 2-1、创建一个混合js文件 2-2、引入混合js文件 1、局部混合 在每个组件中都引入混合js文件 注意&#xff1a; 混合就是复用配置&#xff0c;vm实例中的所有的配置项&#xff0c;都能在混合.js文件中写…
阅读更多...
【计算机毕业设计】基于Springboot的毕业生实习与就业管理系统【源码+lw+部署文档】

【计算机毕业设计】基于Springboot的毕业生实习与就业管理系统【源码+lw+部署文档】

包含论文源码的压缩包较大&#xff0c;请私信或者加我的绿色小软件获取 免责声明&#xff1a;资料部分来源于合法的互联网渠道收集和整理&#xff0c;部分自己学习积累成果&#xff0c;供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者…
阅读更多...
新旧torch中傅里叶变换实现（fft）

新旧torch中傅里叶变换实现（fft）

由泰勒级数我们知道&#xff0c;一个函数可以被分解成无穷个幂函数叠加的形式&#xff0c;于是同样地&#xff0c;一个周期函数也可以被分解成多个周期函数叠加&#xff0c;于是自然而然地&#xff0c;三角函数符合这个需求&#xff0c;由傅里叶级数我们可以将周期函数分解成无…
阅读更多...
Qwen2大语言模型微调、导出、部署实践

Qwen2大语言模型微调、导出、部署实践

上篇文章&#xff1a; Qwen1.5大语言模型微调实践_qwen1.5 7b微调-CSDN博客 我们介绍了Qwen1.5 大语言模型使用LLaMA-Factory 来微调&#xff0c;这篇文章我们介绍一下微调后模型的导出、部署。 一、模型导出 在webui 界面训练好模型之后点击“Export”选项卡&#xff0c;然…
阅读更多...
linux 部署瑞数6实战(维普，药监局)第一部分

linux 部署瑞数6实战(维普，药监局)第一部分

声明 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01;wx 本文章未经许可禁止转载&…
阅读更多...
ICML24麻省理工提出使用更少的条件独立性测试来发现因果关系新方法

ICML24麻省理工提出使用更少的条件独立性测试来发现因果关系新方法

【摘要】众多科学领域的核心问题围绕着理解因果关系这一基本问题。然而,大多数基于约束的因果发现算法,包括广受欢迎的PC算法,通常会进行指数级数量的条件独立性(CI)测试,在各种应用中造成局限。为解决这一问题,我们的工作重点是表征在减少CI测试数量的情况下,可以了解潜在因果…
阅读更多...
POC EXP | woodpecker插件编写

POC EXP | woodpecker插件编写

woodpecker插件编写 目录 woodpecker介绍woodpecker使用插件编写 安装环境 woodpecker-sdkwoodpecker-request 创建Maven项目 Confluence OGNL表达式注入漏洞插件编写 创建Package包和Class类编写POC 漏洞POC代码编写导出jar包将jar包放入woodpecker的plugin目录运行woodpeck…
阅读更多...
UML与设计模式

UML与设计模式

1、关联关系 关联关系用于描述不同类的对象之间的结构关系&#xff0c;它在一段时间内将多个类的实例连接在一起。关联关系是一种静态关系&#xff0c;通常与运行状态无关&#xff0c;而是由“常识”、“规则”、“法律”等因素决定的&#xff0c;因此关联关系是一种强关联的关…
阅读更多...
MPC质心跟随控制（CoM Tracking Control）

MPC质心跟随控制（CoM Tracking Control）

MPC质心跟随 在人形机器人中，质心（CoM）的跟随控制是保持机器人稳定和协调运动的关键技术之一。模型预测控制（MPC）是一种先进的控制方法，通过解决在线优化问题来控制机器人质心的位置和速度。下面我们详细介绍如何使用MPC实现质心跟随控制。 MPC基本原理 模型预测控制是…
阅读更多...
Iptables深入浅出

Iptables深入浅出

1、iptables的基本概念 众所周知iptables是Linux系统下自带免费的包过滤防火墙。其实不然&#xff0c;iptables其实不是真正的防火墙&#xff0c;我们可以把它理解成一个客户端代理&#xff0c;用户通过iptables这个代理&#xff0c;将用户的安全设定执行到对应的”安全框架”…
阅读更多...
微软正在推动 OpenAI 转变为营利性公司！Sam Altman 或拥有更多股权 股东也“逼宫”保时捷

微软正在推动 OpenAI 转变为营利性公司！Sam Altman 或拥有更多股权 股东也“逼宫”保时捷

目前&#xff0c;OpenAI估值为860亿美元&#xff0c;转型为营利性公司或加速OpenAI IPO&#xff0c;微软及其他投资者认为&#xff0c;若 Altman拥有更多股权&#xff0c;可能就不会那么有动力专注于其他项目和投资其他AI公司。 根据The Information最新报道&#xff0c;Sam A…
阅读更多...
C# TextBox模糊查询及输入提示

C# TextBox模糊查询及输入提示

在程序中&#xff0c;我们经常会遇到文本框中不知道输入什么内容&#xff0c;这时我们可以在文本框中显示提示词提示用户&#xff1b;或者需要查询某个内容却记不清完整信息&#xff0c;通常可以通过文本框列出与输入词相匹配的信息&#xff0c;帮助用户快速索引信息。 文本框…
阅读更多...
java打印helloworld

java打印helloworld

源代码 public class Function1 {public static void main(String[] args) {System.out.println("hello world");}} 打印结果
阅读更多...
llama3-70B体验

llama3-70B体验

NVIDIA LLAMA3-70B大模型体验地址&#xff1a; NVIDIA NIM | llama3-70b 问题几个关于宇宙的问题&#xff0c;答案挺有意思的&#xff0c;很有启发性&#xff0c;记录一下&#xff1a; 问题1&#xff1a;既然相对论认为时间是相对的&#xff0c;为何却说宇宙寿命有137亿年&a…
阅读更多...
Luma AI如何注册：文生视频领域的新星

Luma AI如何注册：文生视频领域的新星

文章目录 Luma AI如何注册&#xff1a;文生视频领域的新星一、Luma 注册方式二、Luma 的效果三、Luma 的优势四、Luma 的功能总结 Luma AI如何注册&#xff1a;文生视频领域的新星 近年来&#xff0c;Luma AI 凭借其在文生视频领域的创新技术&#xff0c;逐渐成为行业的新星。…
阅读更多...
如何设计网站

如何设计网站

设计网站是一个复杂而又有趣的过程。一个好的网站设计不仅可以吸引用户的注意力&#xff0c;还能提供良好的用户体验。下面我将分享一些关于如何设计网站的基本原则。 首先&#xff0c;需要明确网站的目标和受众。在设计网站之前&#xff0c;你应该明确你的网站的目标是什么。你…
阅读更多...
MacOS之Rosetta技术的引入

MacOS之Rosetta技术的引入

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

Copyright @ 2022~2023