AJAX 技术学习笔记(基础)

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

原生 AJAX 介绍

作用:

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

同步交互和异步交互:

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

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

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

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

同步和异步示意图

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

Axios 请求方式别名

JSON(JavaScript Object Natation)

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

JavaScript JSON

JSON 数据和 Java 对象转换

相关推荐
网安蟹佬霸几秒前
2026网络安全每日学习计划:每天学多久?学什么?怎么安排?照着做就行!
网络·学习·安全·web安全·学习路线·网安
一条破秋裤10 分钟前
TIM 输入捕获与 PWMI:从边沿到频率、占空比
笔记·stm32·学习
知产xiao_xin36 分钟前
知识产权入门 —— 工业品外观设计
经验分享·笔记·知识产权
2601_9499506344 分钟前
考研英语资料太散?用小程序把真题、词汇和错题放到一起
人工智能·学习·考研·小程序·刷题·小程序推荐
小猪code1 小时前
frp 80/443 Web 服务两种部署模式实操笔记
前端·笔记
熊猫钓鱼>_>1 小时前
鸿蒙AI Agent新范式:从“对话式辅助”到“工程化代理”的Harness架构实战解析
人工智能·笔记·学习·华为·架构·harmonyos
GGMM7891 小时前
西门子 AAOP 亚洲高级操作面板详解(MM420/MM440 专用)
笔记·变频器·变频器维修
GGMM7891 小时前
西门子 IOP 智能操作面板详细使用教程(G120/G120C)
笔记·变频器·变频器维修
2501_919749031 小时前
华为鸿蒙管理学习生活与工作APP—小羊管理
学习·华为·生活·harmonyos·鸿蒙
一条破秋裤2 小时前
STM32 学习笔记:PWM 输出比较原理与计算
笔记·stm32·学习