Ajax学习笔记，第一节：语法基础
Ajax学习笔记，第一节：语法基础
一、概念
1、什么是Ajax
使用浏览器的 XMLHttpRequest 对象 与服务器通信
2、什么是axios
Axios是一个基于Promise的JavaScript库，支持在浏览器和Node.js环境中使用。相较于Ajax，Axios提供了更多的功能，如拦截请求和响应、转换请求和响应数据、取消请求等，
这使得开发者能够更方便地处理和管理HTTP请求。Axios相较于Ajax兼容性更好，支持现代浏览器，而Ajax在一些旧版本浏览器中可能会出现一些兼容性问题。在安全性方面，Axios支持防御XSRF（跨站请求伪造），而Ajax本身并不直接支持这一防御机制。
3、认识URL
·URL的组成：协议，域名，资源路径
（URL 组成有很多部分，我们先掌握这3个重要的部分即可）
·http协议，超文本传输协议。规定了浏览器和服务器传递数据的格式·域名，标记服务器在互联网当中的方位，网络中有很多服务器，你想访问哪一台，就需要知道它的域名。·资源路径，一个服务器内有多个资源，用于标识你要访问的资源具体的位置
4、准备
https://www.apifox.cn/apidoc/project-1937884
这里 有 现成的后端服务，我们在练习时直接使用即可
二、Axios使用
1、初步使用
1> 引入 axios.js 文件到自己的网页中https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js2> 语法：axios({url: '请求路径',method: '请求方法',data:{参数名:值}}).then((res)=>{//对服务器返回的数据做处理});
<body><h3>1、省份列表</h3><p class="my-provs"></p><h3>新闻列表</h3><p class="my-news"></p><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({url: "https://hmajax.itheima.net/api/province"}).then((res) => {console.log(res);if (res != undefined) {let provList = res.data.list;document.querySelector(".my-provs").innerHTML = provList.join("<br>");}});axios({url: "https://hmajax.itheima.net/api/news"}).then((res) => {console.log(res);if (res != undefined) {let newsList = res.data.data;let newsInnerHtml = "";newsList.forEach(ele => {newsInnerHtml = newsInnerHtml + " <a>" + ele.title + "</a><br><img src=" + ele.img + "><br/> ";});console.log(newsInnerHtml);document.querySelector(".my-news").innerHTML = newsInnerHtml;}})</script>
</body>
2、携带查询参数
语法：
axios({url:"请求路径",params:{//查询参数 params 或在URL后拼接成?xxx=yyy&ooo=ddd格式}
}).then((res)=>{//结果处理
});//注意：
参数中 当属性名和value位置变量名同名即可简写
<body><h3>城市列表：</h3> <input type="text" name="cityname"><input type="button" class="slt-btn" value="点我"><p class="my-city"></p><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>let cliBtn = document.querySelector(".slt-btn");cliBtn.addEventListener('click', () => {let inputVal = document.querySelector("input[name='cityname']");axios({url: "https://hmajax.itheima.net/api/city",params: {"pname": inputVal.value}}).then(res => {console.log(res);if (res != undefined) {let cityList = res.data.list;document.querySelector(".my-city").innerHTML = cityList.join("<br/>");}})});</script>
</body>
3、常用请求方法和数据提交
请求方法是一些固定单词的英文，例如：GET，POST，PUT，DELETE，PATCH
（这些都是http协议规定的），每个单词对应一种对服务器资源要执行的操作axios内部设置了默认请求方法就是GET
| 请求方法 | 操作 |
|---|---|
| GET | 获取数据 |
| POST | 数据提交 |
| PUT | 修改数据（全部） |
| DELETE | 删除数据 |
| PATCH | 修改数据（部分） |
#语法：
axios({url: '目标资源地址',method: '请求方法',data: { //注意这里是data 而不是 params参数名: 值}
}).then(result => {// 对服务器返回的数据做后续处理
})
<body><label for="un">用户名:</label><input type="text" name="username" id="un"><label for="pwd">密码:</label><input type="password" name="password" id="pwd"><input type="button" value="注册" class="btn"><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>let submitBtn = document.querySelector(".btn");submitBtn.addEventListener('click', () => {let username = document.querySelector("#un").value;let password = document.querySelector("#pwd").value;if (username != undefined && password != undefined) {axios({url: "https://hmajax.itheima.net/api/register",method: 'POST',data: { //注意这里是data 不是 paramsusername,password}}).then(res => {console.log(res.data);if (res.data == undefined) {alert("注册失败");return;}if (res.data.code == '10000') {alert("账号注册成功");} else {alert(res.data.message);}});} else {alert("请输入用户名和密码");}});</script>
</body>
4、Axios错误处理
##语法：
axios({// ...请求选项
}).then(result => {// 处理成功数据
}).catch(error => {// 处理失败错误
})
<script>let submitBtn = document.querySelector(".btn");submitBtn.addEventListener('click', () => {let username = document.querySelector("#un").value;let password = document.querySelector("#pwd").value;if (username != undefined && password != undefined) {axios({url: "https://hmajax.itheima.net/api/register",method: 'POST',data: { //注意这里是data 不是 paramsusername,password}}).then(res => {console.log(res.data);if (res.data == undefined) {alert("注册失败");return;}if (res.data.code == '10000') {alert("账号注册成功");} else {alert(res.data.message);}}).catch(error => {console.log(error.message);console.log(error.response.data);console.log(error.response.data.message);alert(error.response.data.message);});} else {alert("请输入用户名和密码");}});</script>
5、form-serialize插件
我们前面收集表单元素的值，是一个个标签获取的
如果一套表单里有很多很多表单元素，如何一次性快速收集出来呢.
使用 form-serialize 插件提供的 serialize 函数就可以办到语法：
serialize（参数1,参数2）参数1：要获取的form表单标签对象，要求表单元素需要有name属性，用来作为收集的数据中属性名
参数2：配置对象hash:true==>收集出来是一个JS对象结构false==>收集出来是一个查询对象格式empty:true==>收集空值false==>不收集空值
<body><form action="javascript:;" class="my-form"><input type="text" name="username"><br><input type="text" name="password"><br><input type="button" class="btn" value="提交"></form><script src="./js/form-serialize.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>let btn = document.querySelector(".btn");btn.addEventListener('click', () => {let myForm = document.querySelector(".my-form");const data = serialize(myForm, { hash: true, empty: false });const { username, password } = data;axios({url: "https://hmajax.itheima.net/api/login",method: "POST",data: {username,password}}).then(res => {alert(res.data.message);})})</script>
</body>
三、Ajax原理解析
1、XMLHttpRequest 简单请求
·AJAX 是浏览器与服务器通信的技术，采用 XMLHttpRequest 对象相关代码
·axios 是对 XHR 相关代码进行了封装，让我们只关心传递的接口参数#语法：
const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求url网址')
xhr.addEventListener('loadend', () => {// 响应结果console.log(xhr.response)
})
xhr.send()<h3>省份</h3>
<p class="my_prov"></p>
<script>//==================1、通过XMLHttpRequest实现查询省份的接口=====================//1-1、创建xhr对象const xhr = new XMLHttpRequest();//1-2、设置请求路径和方式xhr.open("GET", "http://hmajax.itheima.net/api/province");//1-3、监听回调xhr.addEventListener("loadend", () => {console.log(xhr.response);//JSON解析let res = JSON.parse(xhr.response);console.log(res);const my_prov = document.querySelector(".my_prov");my_prov.innerHTML = res.list.join("<br>")});//监听loadend事件//1-4、发送请求xhr.send();//发送请求
</script>
##拓展：
进度事件的种类：
进度事件用来描述资源加载的进度，主要由 AJAX 请求<img>、<audio>、<video>、<style>、<link>
等外部资源的加载触发，继承了ProgressEvent接口。它主要包含以下几种事件。·abort：外部资源中止加载时（比如用户取消）触发。如果发生错误导致中止，不会触发该事件。
·error：由于错误导致外部资源无法加载时触发。
·load：外部资源加载成功时触发。
·loadstart：外部资源开始加载时触发。
·loadend：外部资源停止加载时触发，发生顺序排在error、abort、load等事件的后面。
·progress：外部资源加载过程中不断触发。
·timeout：加载超时时触发。
2、XMLHttpRequest 请求参数（简单参数）
#实现：：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
const xhr2 = new XMLHttpRequest();
xhr2.open("GET", "http://hmajax.itheima.net/api/city?pname=河北省");
//1-3、监听回调
xhr2.addEventListener("loadend", () => {console.log(xhr2.response);//JSON解析let res = JSON.parse(xhr2.response);console.log(res);const my_city = document.querySelector(".my_city");my_city.innerHTML = res.list.join("<br>")
});//监听loadend事件
//1-4、发送请求
xhr2.send();//发送请求
3、XMLHttpRequest 请求参数（多个）
##语法
let queryParams = new URLSearchParams({"pname": "河北省","cname": "邯郸市"
});
let queryString = queryParams.toStrng();
//================3、通过XMLHttpRequest实现查询区县的接口（多个参数）====================const xhr3 = new XMLHttpRequest();let queryParams = new URLSearchParams({"pname": "河北省","cname": "邯郸市"});xhr3.open("GET", "https://hmajax.itheima.net/api/area?" + queryParams.toString());//1-3、监听回调xhr3.addEventListener("loadend", () => {console.log(xhr3.response);//JSON解析let res = JSON.parse(xhr3.response);console.log(res);const my_area = document.querySelector(".my_area");my_area.innerHTML = res.list.join("<br>")});//监听loadend事件//1-4、发送请求xhr3.send();//发送请求
4、XMLHttpRequest数据提交
##语法：
xhr4.setRequestHeader("Content-Type", "application/json");
let data = { "username": username, "password": password };
let dataStr = JSON.stringify(data);
xhr4.send(dataStr);
const registBtn = document.querySelector(".btn");
registBtn.addEventListener("click", function () {let username = document.querySelector("#un").value;let password = document.querySelector("#pwd").value;if (username == undefined || password == undefined) {alert("请输入用户名和密码");return;}const xhr4 = new XMLHttpRequest();xhr4.open("POST", "https://hmajax.itheima.net/api/register");xhr4.addEventListener("loadend", () => {console.log(xhr4.response);let res = JSON.parse(xhr4.response);if (res != undefined && res.code != '10000') {alert(res.message);} else {alert("账号注册成功.id为：" + res.data.id);}})xhr4.setRequestHeader("Content-Type", "application/json");let data = { "username": username, "password": password };let dataStr = JSON.stringify(data);xhr4.send(dataStr);
});
相关文章：
Ajax学习笔记，第一节：语法基础
Ajax学习笔记，第一节：语法基础 一、概念 1、什么是Ajax 使用浏览器的 XMLHttpRequest 对象 与服务器通信2、什么是axios Axios是一个基于Promise的JavaScript库，支持在浏览器和Node.js环境中使用。相较于Ajax，Axios提供了更多…...
《用Python画蔡徐坤：艺术与编程的结合》
简介 大家好！今天带来一篇有趣的Python编程项目，用代码画出知名偶像蔡徐坤的形象。这个项目使用了Python的turtle库，通过简单的几何图形和精心设计的代码来展示艺术与编程的结合。 以下是完整的代码和效果介绍，快来试试看吧&…...
Unity中动态生成贴图并保存成png图片实现
实现原理： 要生成长x宽y的贴图，就是生成x*y个像素填充到贴图中，如下图： 如果要改变局部颜色，就是从x1到x2(x1<x2),y1到y2(y1<y2)这个范围做处理， 或者要想做圆形就是计算距某个点（x1,y1&…...
Mac配置maven环境及在IDEA中配置Maven
Mac配置maven环境及在IDEA中配置Maven 1. 介绍 Maven是一款广泛用于Java等JVM语言项目的工具，它以项目对象模型（POM）为基础进行项目管理，通过POM文件来定义项目信息和依赖关系。同时，它也是构建自动化工具࿰…...
Reactor 模式的理论与实践
1. 引言 1.1 什么是 Reactor 模式？ Reactor 模式是一种用于处理高性能 I/O 的设计模式，专注于通过非阻塞 I/O 和事件驱动机制实现高并发性能。它的核心思想是将 I/O 操作的事件分离出来，通过事件分发器（Reactor）将事…...
vim 一次注释多行 的几种方法
在 Vim 中一次注释多行是一个常见操作。可以使用以下方法根据你的具体需求选择合适的方式： 方法 1：手动插入注释符 进入正常模式： 按 Esc 确保进入正常模式。 选择需要注释的多行： 移动到第一行，按下 Ctrlv 进入可视块…...
问题记录-Java后端
问题记录 目录 问题记录1.多数据源使用事务注意事项？2.mybatis执行MySQL的存储过程？3.springBoot加载不到nacos配置中心的配置问题4.服务器产生大量close_wait情况 1.多数据源使用事务注意事项？ 问题：在springBoot项目中多表处理数…...
李春葆《数据结构》-课后习题代码题
一：假设不带权有向图采用邻接矩阵 g 存储，设计实现以下功能的算法： （1）求出图中每个顶点的入度。 代码： void indegree(MatGraph g){int i,j,n;printf("各个顶点的入度：\n");for(i…...
51c~C语言~合集2
我自己的原文哦~ https://blog.51cto.com/whaosoft/12652943 一、嵌入式开发中的C语言编译器 如果你和一个优秀的程序员共事，你会发现他对他使用的工具非常熟悉，就像一个画家了解他的画具一样。----比尔.盖茨1 不能简单的认为是个工具 嵌入式程序开发…...
【Python】构建事件驱动架构：用Python实现实时应用的高效系统
解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界 事件驱动架构（Event-Driven Architecture，EDA）是一种基于事件流动进行系统设计的模式，广泛应用于游戏开发、实时监控和分布式系统中。它通过解耦事件的生产者和消费者，提升系统的可扩展性和灵活性。本文章从…...
Git（一）基本使用
目录 一、使用git -v 查看安装git版本 二、使用mkdir 创建一个文件，并使用 git init 在该目录下创建一个本地仓库， 三、通过git clone命令接入线上仓库 四、使用git status查看仓库状态信息 五、利用echo写入一个文件 并使用cat进行查看 【Linux】e…...
HarmonyOS应用开发者基础认证，Next版本发布后最新题库（10月8日更新题库未收录）
笔者会尽量找到答案的出处，力求答案准确无误。有些题目答案可能有错，也有一些笔者实在找不到出处，也不知道答案的，如果读者发现错误或有补充建议，欢迎评论或私信笔者。您的每一条反馈都是宝贵的，能够帮助笔…...
【PGCCC】Postgresql BRIN 索引原理
前言 postgresql 提供了块级索引（简称 BRIN），主要适用于类似时序数据之类的，有着天然的顺序，而且都是添加写的场景。相比于 btree 索引，它的体积小得多，非常适用于大数据量的场景。 原理 pos…...
腾讯云 AI 代码助手：产品研发过程的思考和方法论
一、文章摘要 本文将详细阐述 腾讯云 AI 代码助手的历史发展形态与产品整体架构，并从技术、研发方法论的角度分别阐述了产品的研发过程。 全文阅读约 5～8 分钟。 二、产品布局 AI 代码助手产品经历了三个时代的发展 第一代诸如 Eclipse、Jetbrains、V…...
Matlab 深度学习 PINN测试与学习
PINN 与传统神经网络的区别 与传统神经网络的不同之处在于，PINN 能够以微分方程形式纳入有关问题的先验专业知识。这些附加信息使 PINN 能够在给定的测量数据之外作出更准确的预测。此外，额外的物理知识还能在存在含噪测量数据的情况下对预测解进行正则…...
【Angular】async详解
在 Angular 中，async 关键字用于定义异步函数，通常与 await 一起使用来处理 Promise。这使得异步代码看起来更像同步代码，从而更容易理解和维护。 基本用法 定义异步函数：使用 async 关键字。等待 Promise 解析：使用…...
抖音SEO矩阵系统：开发技术分享
市场环境剖析 短视频SEO矩阵系统是一种策略，旨在通过不同平台上的多个账号建立联系，整合同一品牌下的各平台粉丝流量。该系统通过遵循每个平台的规则和内容要求，输出企业和品牌形象，以矩阵形式增强粉丝基础并提升商业价值。抖音作…...
SpringBoot集成minio，并实现文件上传
SpringBoot集成minio 什么是minioSpringBoot集成minio1、引入minio依赖2、配置Minio相关参数3、在代码里读取自定义的minio配置4、在minio配置类里，注册ConfigurationProperties实现文件上传到minio1、利用SpringMVC实现接口的异常全局处理2、返回文件路径给前端3、返回文件流…...
centos为用户赋予sudo权限
在CentOS系统中，要为用户test赋予sudo权限，你需要按照以下步骤操作： 确保sudo包已安装： 如果系统中没有安装sudo，你可以通过yum（CentOS 7及以下）或dnf（CentOS 8及以上）来…...
SAP 零售方案 CAR 系统的介绍与研究
前言 当今时代，零售业务是充满活力和活力的业务领域之一。每天，由于销售运营和客户行为，它都会生成大量数据。因此，公司迫切需要管理数据并从中检索见解。它将帮助公司朝着正确的方向发展他们的业务。 这就是为什么公司用来处理…...
uniapp 对接腾讯云IM群组成员管理（增删改查）
UniApp 实战：腾讯云IM群组成员管理（增删改查） 一、前言 在社交类App开发中，群组成员管理是核心功能之一。本文将基于UniApp框架，结合腾讯云IM SDK，详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
IGP（Interior Gateway Protocol，内部网关协议）
IGP（Interior Gateway Protocol，内部网关协议） 是一种用于在一个自治系统（AS）内部传递路由信息的路由协议，主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
MVC 数据库
MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...
Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！
一、引言 在数据驱动的背景下，知识图谱凭借其高效的信息组织能力，正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合，探讨知识图谱开发的实现细节，帮助读者掌握该技术栈在实际项目中的落地方法。 …...
Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程：首先由HR先筛选一部分简历后，在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如：Boss直聘（招聘方平台） 直接按照条件进行筛选 例如：…...
Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计，聪明的码友立马就知道了，该到数据访问模块了，要不就这俩玩个6啊，查库势在必行，至此，它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据（数据库、No…...
docker 部署发现spring.profiles.active 问题
报错： org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...
SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）
上一章用到了V2 的概念，其实 Fiori当中还有 V4，咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)，代理中间件（ui5-middleware-simpleproxy）-CSDN博客…...
关于easyexcel动态下拉选问题处理
前些日子突然碰到一个问题，说是客户的导入文件模版想支持部分导入内容的下拉选，于是我就找了easyexcel官网寻找解决方案，并没有找到合适的方案，没办法只能自己动手并分享出来，针对Java生成Excel下拉菜单时因选项过多导…...
Neko虚拟浏览器远程协作方案：Docker+内网穿透技术部署实践
前言：本文将向开发者介绍一款创新性协作工具——Neko虚拟浏览器。在数字化协作场景中，跨地域的团队常需面对实时共享屏幕、协同编辑文档等需求。通过本指南，你将掌握在Ubuntu系统中使用容器化技术部署该工具的具体方案，并结合内网…...