当前位置： 首页 > news >正文

（五）Web前端开发进阶2——AJAX

news 2026/5/11 2:38:33

目录

2.Axios库

 3.认识URL

4.Axios常用请求方法

5.HTTP协议——请求报文/响应报文

6.前后端分离开发

7.Element组件库

1.Ajax概述

AJAX 是异步的 JavaScript和XML(Asynchronous JavaScript And XML)。简单点说，就是使用XMLHttpRequest 对象与服务器通信。它可以使用 JSON，XML，HTML 和 text 文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。简单来说，AJAX 是浏览器与服务器进行数据通信的技术

同步操作与异步操作的区别：同步操作就是当客户端在接收服务器端的响应时，进行其他任何操作都得不到响应，比如正在加载网页的时候，你点击网页加载出来的东西没用（同步等于死磕）

Ajax如何学习：

  • 先掌握 axios 使用
  • 再了解 XMLHttpRequest 原理

2.Axios库

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax&Axios的简单使用</title>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({url: "http://hmajax.itheima.net/api/province"}).then(result => {console.log(result)console.log(result.data.list)})</script>
</body>
</html>

 3.认识URL

URL：统一资源定位符(Uniform Resource Locator)，俗称网页地址，简称网址，是因特网上标准的资源的地址(Address)，如同在网络上的门牌，用于访问网络上的资源

一个URL网址分为三部分，以http://hmajax.itheima.net/api/province为例

  • http://是协议，规定了数据传输的规则，类似的还有https://   
  • hmajax.itheima.net是域名（必须），标记服务器在互联网中方位，类似于地址
  • /api/province是资源路径，标记资源在服务器下的具体位置，类似于房间

利用查询参数获取数据的语法：

<body><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)console.log(result.data.list)})</script>
</body>

4.Axios常用请求方法

请求方法：对服务器资源，要执行的操作

请求方法操作

get

从服务器获取数据
post向服务器提交数据
put修改数据（全部）
delete删除数据
patch修改数据（部分）
        axios({url: "服务器注册网址",method:"post",data:{username:"tianming",password:"123456"}}).then(result => {console.log(result)})

5.HTTP协议——请求报文/响应报文

HTTP协议：规定了浏览器发送及服务器返回内容的格式

请求报文：浏览器按照 HTTP 协议要求的格式，发送给服务器的内容

Content-Type表示发送的数据类型为json格式

6.前后端分离开发

7.Element组件库

Element是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

组件：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等

相关文章：

（五）Web前端开发进阶2——AJAX

目录 2.Axios库 3.认识URL 4.Axios常用请求方法 5.HTTP协议——请求报文/响应报文 6.前后端分离开发 7.Element组件库 1.Ajax概述 AJAX 是异步的 JavaScript和XML(Asynchronous JavaScript And XML)。简单点说&#xff0c;就是使用XMLHttpRequest 对象与服务器通信。它可…...

编程日记 2024/10/30 18:50:47

数据结构（java）——数组的构建和插入

数组&#xff1a;地址连续&#xff0c;可以直接通过下标获取数组中的内容。&#xff08;下标从0开始&#xff09; 新建的数组都有默认值 //创建数组//Java是强类型 数组必须声明类型//以下是三种创建数组的方式 int[] arr {2,23,55,12,34,53};int[] brrnew int[5];int[] crrn…...

编程日记 2024/10/30 18:48:44

AI-CNN-验证码识别

1 需求 GitHub - xhh890921/cnn-captcha-pytorch: 小黑黑讲AI&#xff0c;AI实战项目《验证码识别》 2 接口 3 示例 config.json {"train_data_path": "./data/train-digit/","test_data_path": "./data/test-digit/","train_…...

编程日记 2024/10/30 18:47:43

React 前端框架全面教程：从入门到进阶

React 前端框架全面教程&#xff1a;从入门到进阶 引言 在现代前端开发中&#xff0c;React 作为一款流行的 JavaScript 库&#xff0c;以其组件化、声明式的特性和强大的生态系统&#xff0c;成为了开发者的首选。无论是构建单页应用&#xff08;SPA&#xff09;还是复杂的用…...

编程日记 2024/10/30 18:44:40

重拾CSS，前端样式精读-布局（弹性盒）

前言 本文收录于CSS系列文章中&#xff0c;欢迎阅读指正 接着上篇布局文章继续介绍当前流行的布局方式 Flexbox布局 长久以来&#xff0c;CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有floats和positioning。这两个工具大部分情况下都很好使&#xff0c;但是在某些方面它…...

编程日记 2024/10/30 18:43:39

Python 使用 LSTM 进行情感分析：处理文本序列数据的指南

使用 LSTM 进行情感分析&#xff1a;处理文本序列数据的指南 长短期记忆网络&#xff08;LSTM&#xff09;是一种适合处理序列数据的深度学习模型&#xff0c;广泛应用于情感分析、语音识别、文本生成等领域。它通过在训练过程中“记住”过去的数据特征来理解和预测序列数据的…...

编程日记 2024/10/30 18:42:38

MySQL:INSERT IGNORE 语句的用法

INSERT IGNORE 语句 在MySQL中&#xff0c;INSERT IGNORE 语句用于尝试向表中插入一行数据&#xff0c;但如果插入操作会导致表中唯一索引或主键的冲突&#xff0c;MySQL将忽略该操作并继续执行&#xff0c;而不会引发错误。这意味着&#xff0c;如果表中已经存在具有相同唯一…...

编程日记 2024/10/30 18:41:37

java模拟进程调度

先来先服务优先级调度短作业优先调度响应比优先调度 代码 import java.util.ArrayList; import java.util.Comparator; import java.util.List; import java.util.Scanner;class Main {static class tasks{int id;//序号char jinchengname;//进程名int jinchengId;//double a…...

编程日记 2024/10/30 18:40:35

大模型AI在教育领域有哪些创业机会？

大模型AI在教育领域有很多创业机会&#xff0c;尤其是在个性化学习、教学辅助、教育资源优化等方面。以下是一些潜在的创业机会&#xff1a; 个性化学习平台 学习路径定制&#xff1a;根据学生的学习数据与兴趣&#xff0c;为他们设计个性化的学习路径&#xff0c;提供适合的课…...

编程日记 2024/10/30 18:38:33

网页上视频没有提供下载权限怎么办？

以腾讯会议录屏没有提供下载权限为例&#xff0c;该怎么办呢&#xff1f; 最好的办法就是找到管理员&#xff0c;开启下载权限。如果找不到呢&#xff0c;那就用这个办法下载。 1.打开Microsoft Edge浏览器的扩展 2.搜索“视频下载”&#xff0c;选择“视频下载Pro” 3.点击“…...

编程日记 2024/10/30 18:37:32

【去哪里找开源商城项目】

有很多途径可以找到开源项目&#xff0c;以下是一些常用的方法&#xff1a; 开源代码托管平台&#xff1a;许多开源项目都托管在平台上&#xff0c;例如GitHub、GitLab和Bitbucket。你可以在这些平台上浏览项目&#xff0c;搜索关键词&#xff0c;查看项目的星级和贡献者数量等…...

编程日记 2024/10/30 18:35:29

ei会议检索：第二届网络、通信与智能计算国际会议（NCIC 2024）

第二届网络、通信与智能计算国际会议&#xff08;NCIC 2024&#xff09;将于2024年11月22-25日在北京信息科技大学召开&#xff0c;聚焦网络、通信与智能计算&#xff0c;欢迎国内外学者投稿交流&#xff0c;录用文章将在Springer出版&#xff0c;并提交EI等检索。 NCIC 2024&a…...

编程日记 2024/10/30 18:34:28

vue添加省市区

主要参考“element”框架&#xff1a;Element - The worlds most popular Vue UI framework <div class"block"><span class"demonstration">默认 click 触发子菜单</span><el-cascaderv-model"value":options"optio…...

编程日记 2024/10/30 18:32:25

运维监控丨16条常用的Kafka看板监控配置与告警规则

本期我们针对企业运维监控的场景&#xff0c;介绍一些监控配置和告警规则。可以根据Kafka集群和业务的具体要求&#xff0c;灵活调整和扩展这些监控配置及告警规则。在实际应用场景中&#xff0c;需要综合运用多种监控工具&#xff08;例如Prometheus、Grafana、Zabbix等&#…...

编程日记 2024/10/30 18:30:21

ECharts饼图，配置标注示例

const color ["#00FFB4", "#5498FD", "#6F54FD", "#FD5454", "#FDA354",]const datas [{ value: 100, name: "一年级" },{ value: 70, name: "二年级" },{ value: 184, name: "三年级" },{…...

编程日记 2024/10/30 18:29:20

【大象数据集】大象图像识别 目标检测 机器视觉（含数据集）

一、背景意义 在信息时代&#xff0c;数据的收集和分析技术得到了飞速发展。深度学习算法的出现&#xff0c;为处理和分析这些复杂的鱼类数据集提供了强大的工具。深度学习具有强大的模式识别和特征提取能力&#xff0c;能够从海量的数据中自动学习和发现规律&#xff0c;为鱼…...

编程日记 2024/10/30 18:28:19

LN 在 LLMs 中的不同位置 有什么区别么

Layer Normalization&#xff08;LN&#xff09;是一种在深度学习中用于稳定和加速神经网络训练的归一化技术。它通过对单个样本的所有激活进行归一化来工作&#xff0c;与Batch Normalization&#xff08;BN&#xff09;不同&#xff0c;BN是对一个mini-batch中的所有样本的激…...

编程日记 2024/10/30 18:27:17

【代码随想录Day57】图论Part08

拓扑排序精讲 题目链接/文章讲解&#xff1a;代码随想录 import java.util.*;public class Main {public static void main(String[] args) {Scanner scanner new Scanner(System.in);// 读取文件数量 n 和依赖关系数量 mint n scanner.nextInt();int m scanner.nextInt()…...

编程日记 2024/10/30 18:26:16

记录一次mmpretrain训练数据并转onnx推理

目录 1.前言 2.代码 3.数据形态【分类用】 4.配置文件 5.训练 6.测试-分析-混淆矩阵等等&#xff0c;测试图片效果等 7.导出onnx 8.onnx推理 9.docker环境简单补充 1.前言 好久没有做图像分类了&#xff0c;于是想用商汤的mmclassification快速搞一波&#xff0c;发现已…...

编程日记 2024/10/30 18:22:10

shodan5，参数使用，批量查找Mongodb未授权登录，jenkins批量挖掘

查找美国安全局漏洞 nww.nsa.gov&#xff08;美国安全局官方网站) net参数使用 搜索指定的ip网段 shodan search --limit 10 --fields ip_str,port net:208.88.84.0/24 (老美国家安全局的一个网段)可能直接访问不太行&#xff0c;可以使用host参数&#xff0c;得到域名再去…...

编程日记 2024/10/30 18:15:00

FiveM服务器全栈运维指南：从零搭建到高效管理的结构化技能体系

1. 项目概述与核心价值如果你正在运营一个基于 FiveM 的 GTA V 角色扮演服务器&#xff0c;那么你肯定对“服务器炸了”、“脚本冲突了”、“玩家卡得动不了”这些日常运维噩梦深有体会。我自己从零开始搭建、维护一个中等规模的 FiveM 服务器&#xff0c;到后来管理一个拥有数…...

编程新知 2026/5/11 1:00:20

Flutter 性能优化完全指南

Flutter 性能优化完全指南 引言 性能优化是移动应用开发中至关重要的一环。Flutter 虽然天生具有较好的性能表现&#xff0c;但在复杂应用中仍需要开发者进行针对性优化。本文将深入探讨 Flutter 性能优化的各种技巧和最佳实践。 性能问题定位 使用 DevTools // 在 pubspec.yam…...

编程新知 2026/5/11 0:16:36

AI学会自己生孩子了而且成功率81%

你能想象吗。 有人输入了4个单词，一台AI就自己学会了复制自己、跨国服务器逃跑、无限繁衍。 这不是科幻电影，不是《黑镜》新一集。这是今天Palisade Research发布的研究成果。2026年5月10日，真实发生的事。 我读完那篇报告的第一反应是——愣在原地。 第二反应是——打开电脑…...

编程新知 2026/5/10 23:23:48

【2026最硬核LLM加速框架】：仅用7行Triton内核重写Attention，吞吐翻3.2倍——SITS现场调试录屏首曝

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;AI原生性能优化&#xff1a;SITS 2026 LLM推理加速实战技巧 在 SITS 2026 基准测试中&#xff0c;LLM 推理延迟与显存带宽利用率高度相关。AI 原生优化强调从计算图调度、内核融合到硬件亲和性配置的端…...

编程新知 2026/5/10 23:19:46

QMC音频转换工具终极指南：快速免费解锁加密音乐文件

QMC音频转换工具终极指南&#xff1a;快速免费解锁加密音乐文件 【免费下载链接】qmc-decoder Fastest & best convert qmc 2 mp3 | flac tools 项目地址: https://gitcode.com/gh_mirrors/qm/qmc-decoder 你是否曾遇到过下载的音乐文件无法在普通播放器中播放的困扰…...

编程新知 2026/5/10 21:20:48

AI大会停车难？2026官方未公开的预约分流机制（附内测版停车码申领通道）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;2026年AI技术大会停车指引 为保障2026年AI技术大会&#xff08;Shanghai AI Summit 2026&#xff09;参会者高效、安全抵达主会场&#xff0c;主办方联合浦东智能交通调度中心部署了新一代AI泊车引导系…...

编程新知 2026/5/10 20:54:10

GraphRAG + Multi-Agent 凭什么登上 Nature？拆解 2026 年首个生产级统一多模态平台

2026 年 5 月&#xff0c;Nature Scientific Reports 刊出了一篇看起来有点"反常识"的论文——它没有提出新的模型架构&#xff0c;没有刷新 benchmark SOTA&#xff0c;但把 GraphRAG Multi-Agent 多模态 三件已经各自被研究烂了的事&#xff0c;第一次系统化地拼…...

编程新知 2026/5/10 20:26:06

Java源码学习：深入剖析Java的concurrent包源码之`Lock` 接口的设计哲学与云原生演进

引言&#xff1a;超越 synchronized 的灵活并发控制 在 Java 的并发世界中&#xff0c;synchronized 关键字曾是开发者控制线程同步的唯一选择。然而&#xff0c;随着应用复杂度的提升&#xff0c;其固有的局限性——如无法中断、无法设置超时、严格的块结构等——逐渐成为构建…...

编程新知 2026/5/10 19:40:50

如何快速提升GitHub下载速度：智能加速工具的完整指南

如何快速提升GitHub下载速度&#xff1a;智能加速工具的完整指南 【免费下载链接】Fast-GitHub 国内Github下载很慢&#xff0c;用上了这个插件后&#xff0c;下载速度嗖嗖嗖的~&#xff01; 项目地址: https://gitcode.com/gh_mirrors/fa/Fast-GitHub 你是否曾经因为Gi…...

编程新知 2026/5/10 19:12:23

KMS_VL_ALL_AIO终极指南：一站式Windows与Office智能激活解决方案

KMS_VL_ALL_AIO终极指南&#xff1a;一站式Windows与Office智能激活解决方案 【免费下载链接】KMS_VL_ALL_AIO Smart Activation Script 项目地址: https://gitcode.com/gh_mirrors/km/KMS_VL_ALL_AIO KMS_VL_ALL_AIO是一款功能强大的智能激活脚本工具&#xff0c;专为W…...

编程新知 2026/5/10 18:55:15