AJAX 技术学习笔记(基础)

Asynchronous JavaScript And XML 概念:异步的 JavaScript 和 XML

原生 AJAX 介绍

作用:

  1. 和服务器进行数据交换,利用HTML一起代替耦合的JSP动态页面
  2. 完成异步交互

同步交互和异步交互:

  • 同步交互*:客户端向服务器端发送请求,必须等待结果返回,才能向服务器端发送下一次请求**(相当于排队,轮到下一个的情况会因为前一个而有所不同)*
  • 异步交互:客户端向服务器端发送请求,不必等待结果返回,就可以向服务器端发送下一次请求(更灵活,相当于有需求就提)

前端和服务端的数据交互桥

| | 同步交互 | 异步交互 |
| 速度 | 需要等待结果,阻止代码运行,可能导致无响应的用户体验 | 无须等待结果,仍可以正常执行其它事务的处理,前端用户操作和后台服务端运算同时进行 |
| 数据交互范围 | 页面全部数据都需要重加载 | 只需与服务端交换必要的数据内容,其它信息仍可保留 |
| 带宽压力 | 较大 | 较小 |
| 问题 | 应该避免代码因为等候读取请求而长时间的停滞,比如使用超时设置 | 其破坏了游览器原本的前进、后退执行逻辑,假如后面逻辑的执行依赖前面逻辑执行的结果,就可能导致出问题 |

安全 更安全 更不安全
[同步交互和异步交互的优劣势]

同步和异步示意图

Axois 异步框架(封装后的AJAX)

Axios 请求方式别名

JSON(JavaScript Object Natation)

因其语法简单,层次结构鲜明,现在多用于数据载体,在网络中进行数据传输。

JavaScript JSON

JSON 数据和 Java 对象转换

相关推荐
mifengxing1 小时前
操作系统 文件系统
笔记·操作系统·计算机408
学运维的Kysan2 小时前
暑假运维学习打卡第二十六天8.17
学习
无聊的菜鸟2 小时前
TMS320F2806X学习笔记(零)—— C2000、CCS、新建工程
笔记·mcu·c2000·f2806x
dear_bi_MyOnly2 小时前
AI人工智能分类识别——机器如何学习
人工智能·学习·分类
ljt27249606613 小时前
Compose笔记(八十三)--onVisibilityChanged
笔记
启雀AI5 小时前
培训平台移动端离线学习方案设计与实现:视频缓存、断点续传与进度同步的工程实践
android·学习·缓存·音视频·企业lms
Fa_Mian_Tuan7 小时前
图论基础|邻接矩阵超详细讲解(含无向/有向/带权图+完整可运行C语言代码)
c语言·数据结构·笔记·算法·图论
Bruce_Liuxiaowei7 小时前
从零到可运行:基于 Vue3 + FastAPI + DeepSeek-V3 的 AI 英语单词学习系统全栈实战
人工智能·python·学习·fastapi·全栈·智能体
zhangrelay8 小时前
ROS 2 Lyrical 第9章 计算机视觉与摄像头应用
linux·笔记·学习·ubuntu·机器人·ros2
FakeOccupational8 小时前
【电路笔记 STM32】stm32f103 实现HAL_UART_Transmit_DMA + 普通模式/连续模式的 UART DMA 收发
笔记·stm32·嵌入式硬件