Day01_Ajax入门

2024-06-16 14:12
文章标签 入门 day01 ajax

本文主要是介绍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. 接口概念->百度百科

这篇关于Day01_Ajax入门的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1066659。

相关文章

Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
数论入门整理（updating）

数论入门整理（updating）

一、gcd lcm 基础中的基础，一般用来处理计算第一步什么的，分数化简之类。 LL gcd(LL a, LL b) { return b ? gcd(b, a % b) : a; } <pre name="code" class="cpp">LL lcm(LL a, LL b){LL c = gcd(a, b);return a / c * b;} 例题：
阅读更多...
Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包，是 JAVA 基础类的一部分，基于 Java AWT 构建，提供了一系列轻量级、可定制的图形用户界面（GUI）组件。 与 AWT 相比，Swing 提供了许多比 AWT 更好的屏幕显示元素，更加灵活和可定制，具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多
阅读更多...
【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站，手机流量可以访问IPV6网络的服务，为什么不在电脑搭建Home Assistant（hass），来控制你的设备呢？@智能家居 @万物互联
阅读更多...
poj 2104 and hdu 2665 划分树模板入门题

poj 2104 and hdu 2665 划分树模板入门题

题意： 给一个数组n（1e5）个数，给一个范围（fr， to， k），求这个范围中第k大的数。 解析： 划分树入门。 bing神的模板。 坑爹的地方是把-l 看成了-1........ 一直re。 代码： poj 2104： #include <iostream>#include <cstdio>#include <cstdlib>#include <al
阅读更多...
MySQL-CRUD入门1

MySQL-CRUD入门1

文章目录 认识配置文件client节点mysql节点mysqld节点 数据的添加(Create)添加一行数据添加多行数据两种添加数据的效率对比 数据的查询(Retrieve)全列查询指定列查询查询中带有表达式关于字面量关于as重命名 临时表引入distinct去重order by 排序关于NULL 认识配置文件 在我们的MySQL服务安装好了之后, 会有一个配置文件, 也就
阅读更多...
easyui同时验证账户格式和ajax是否存在

easyui同时验证账户格式和ajax是否存在

accountName: {validator: function (value, param) {if (!/^[a-zA-Z][a-zA-Z0-9_]{3,15}$/i.test(value)) {$.fn.validatebox.defaults.rules.accountName.message = '账户名称不合法（字母开头，允许4-16字节，允许字母数字下划线）';return fal
阅读更多...
音视频入门基础：WAV专题（10）——FFmpeg源码中计算WAV音频文件每个packet的pts、dts的实现

音视频入门基础：WAV专题（10）——FFmpeg源码中计算WAV音频文件每个packet的pts、dts的实现

一、引言 从文章《音视频入门基础：WAV专题（6）——通过FFprobe显示WAV音频文件每个数据包的信息》中我们可以知道，通过FFprobe命令可以打印WAV音频文件每个packet（也称为数据包或多媒体包）的信息，这些信息包含该packet的pts、dts： 打印出来的“pts”实际是AVPacket结构体中的成员变量pts，是以AVStream->time_base为单位的显
阅读更多...
C语言指针入门 《C语言非常道》

C语言指针入门 《C语言非常道》

C语言指针入门 《C语言非常道》 作为一个程序员，我接触 C 语言有十年了。有的朋友让我推荐 C 语言的参考书，我不敢乱推荐，尤其是国内作者写的书，往往七拼八凑，漏洞百出。 但是，李忠老师的《C语言非常道》值得一读。对了，李老师有个官网，网址是： 李忠老师官网 最棒的是，有配套的教学视频，可以试看。 试看点这里 接下来言归正传，讲解指针。以下内容很多都参考了李忠老师的《C语言非
阅读更多...
MySQL入门到精通

MySQL入门到精通

一、创建数据库 CREATE DATABASE 数据库名称; 如果数据库存在，则会提示报错。 二、选择数据库 USE 数据库名称; 三、创建数据表 CREATE TABLE 数据表名称; 四、MySQL数据类型 MySQL支持多种类型，大致可以分为三类：数值、日期/时间和字符串类型 4.1 数值类型 数值类型 类型大小用途INT4Bytes整数值FLOAT4By
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2