AJAX的概述 ,同步和异步的区别 ,AJAX 的交互模型和传统交互模型的区别

news2025/1/11 14:26:05

一. AJAX的概述

1.1 什么是ajax

同步:

在这里插入图片描述

异步:

在这里插入图片描述

在这里插入图片描述

1.AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

​ 说明:异步:就是不同步。例如我们向后台发送请求,同步的方式是后台必须返回响应数据才可以在浏览器上进行下一步操作,而异步方式可以在不需要等待后台服务器响应数据,直接可以进行其他操作。

2.AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

3.AJAX 是与服务器交换数据并更新部分网页的技术,在不重新加载整个页面的情况下。

小结:

简而言之:ajax就是一项通过js技术发送异步请求 的技术。 异步请求,局部更新,不是整个网页更新。

1.2 同步和异步的区别

#同步
1. 浏览器与服务器是串行的操作,浏览器发起请求的时候,服务器在处理该请求的时候,浏览器只能等待。响应返回,然后才能够发送下一个请求,如果该请求没有响应,不能发送下一个请求,客户端会处于一直等待过程中。
2. 缺点:执行效率低,用户体验差。
#异步
1. 浏览器与服务器是并行工作的,浏览器发送一个请求,不需要等待响应返回,随时可以再发送下一个请求,即不需要等待。
2. 优点:执行效率高,用户体验更好。

在这里插入图片描述

​ AJAX使用异步的提交方式,浏览器与服务器可以并行操作,即浏览器后台发送数据给服务器。用户在前台还是可以继续工作。用户感觉不到浏览器已经将数据发送给了服务器,并且服务器也已经返回了数据。

在这里插入图片描述

小结:

【1】同步请求存在的问题:

  1. 阻塞:请求发出后必须得等到响应结束才能操作页面信息。
  2. 全部更新:整个页面更新。

【2】异步请求好处:

​ 1.非阻塞:请求发出后不用等到响应结束才能操作页面信息。随时可以操作。

​ 2.局部更新:页面的局部位置更新

1.3 AJAX的应用场景

​ Ajax通常用需要发送异步请求的地方,如表单的异步校验,搜索框的自动补全,异步加载数据;

1.3.1 注册表单的用户名异步校验

​ 很多站点的注册页面都具备自动检测用户名是否存在的友好提示,当用户输入的账号已经存在,那么在输入框位置会出现提示信息。该功能整体页面并没有刷新,但仍然可以异步与服务器端进行数据交换,查询用户的输入的用户名是否在数据库中已经存在。

在这里插入图片描述

1.3.2 内容自动补全

​ 不管是专注于搜索的百度,还是站点内商品搜索的京东,都有搜索功能,在搜索框输入查询关键字时,整个页面没有刷新,但会根据关键字显示相关查询字条,这个过程是异步的。

在这里插入图片描述

二.AJAX 的交互模型和传统交互模型的区别

AJAX 的交互模型和传统交互模型的区别如下图所示:

在这里插入图片描述

【1】传统交互模型:浏览器客户端向服务器直接发送请求数据,然后后台服务器接收到请求,处理请求数据,期间浏览器客户端只能等待服务器处理数据,并响应数据,最后服务器将响应数据响应给浏览器客户端,浏览器接收到响应之后才可以继续下一步操作。

【2】AJAX 的交互模型:就是浏览器内部多了一个ajax引擎,浏览器客户端向服务器发送请求的数据,都是先由浏览器将请求数据交给ajax引擎,注意,ajax引擎位于浏览器内部,是由js编写的一个软件。然后接下来都是由ajax引擎和服务器进行交互,此时用户可以在浏览器上进行其他操作,如果再次向服务器发送请求,那么依然是交给ajax引擎处理,并且服务器响应的数据也是交给ajax引擎处理,由ajax引擎来分配浏览器的操作。

注意:ajax引擎内部具有一个核心对象:XMLHttpRequest。都是由该对象进行异步请求交互数据的。 new XMLHttpRequest()启用ajax引擎

小结:ajax支持异步访问,网页局部刷新。主要是依赖于核心对象:XMLHttpRequest。Ajax就是通过XMLHttpRequest对象来发送异步的请求。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1889153.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

南京·2024江苏眼睛健康产业展览会观众邀请·徐州站

6月29日,南京2024全国眼睛健康产业博览会暨眼科医学大会,组委会一行六人来到国家级历史文化名城-徐州,开启了南京全国眼博会江苏省十三个城市线下观众邀请的徐州站工作。徐州,作为华东重要门户城市,华东地区重要的科教…

牛客小白月赛97

A.三角形 判断等边三角形&#xff0c;题不难&#xff0c;代码如下&#xff1a; #include <iostream>using namespace std;int a[110];int main() {int n;cin >> n;int x;int mx 0;for(int i 1; i < n; i){cin >> x;mx max(mx, x);a[x];}for(int i 1…

layui-页面布局

1.布局容器 分为固定和完整宽度 class layui-container 是固定宽度 layui-fluid是完整宽度

【Python】Python的安装与环境搭建

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️Python】 文章目录 前言Python下载环境配置测试环境变量是否配置成功配置环境变量 运行Python交互式解释器&#xff1a;命令行脚本集成开发环境&#xff08;IDE&#xff1a;Integrated Development E…

【Python机器学习】模型评估与改进——回归指标

对于回归问题&#xff0c;可以像分类问题一样进行详细评估&#xff0c;例如&#xff0c;对目标值估计过高与目标值估计过低进行对比分析。 但是&#xff0c;对于我们见过的大多数应用来说&#xff0c;使用默认就足够了&#xff0c;它由所有回归器的score方法给出。业务决策有时…

四个Python代码片段,全面掌握下划线 “_”的妙用!

在Python的世界里&#xff0c;下划线“_”不仅是一个简单的符号&#xff0c;它还承载了许多编程的小技巧&#xff0c;可以让你的编码工作变得更加轻松和高效。 1、快速回顾&#xff1a;下划线在控制台的神秘力量 当你在Python控制台进行连续计算时&#xff0c;知道如何快速引…

智能胎教仪,科技与教育的融合-N9301胎教仪语音方案

随着科学技术的不断进步&#xff0c;人们对婴幼儿教育的认知也日趋成熟和全面。其中&#xff0c;胎教作为一种重要的早期教育方式&#xff0c;近年来备受瞩目。而胎教仪语音芯片的研发&#xff0c;正是为了满足这一需求&#xff0c;为胎儿的健康成长提供更加便捷的胎教方案。 一…

绝区零卡顿严重、延迟高的解决方法提前看

绝区零这款游戏背后是一个错综复杂的架空世界&#xff0c;仿佛一幅波澜壮阔的史诗画卷缓缓展开。在这个世界中&#xff0c;神秘莫测的“空洞”灾害如影随形&#xff0c;给大地带来了无尽的破坏和混沌。经过米哈游团队的精心雕琢&#xff0c;无论是画面UI的细腻呈现&#xff0c;…

Java 虚拟机 一

运行时数据区 我们先看线程隔离的数据区 程序计数器 程序计数器&#xff08; Program Counter Register&#xff09; 是一块较小的内存空间&#xff0c; 它可以看作是当前线程所执行的字节码的行号指示器。 字节码解释器工作时就是通过改变这个计数器的值来选取下一条需要执…

【Unity 3D角色移动】

【Unity 3D角色移动】 在Unity 3D中实现角色移动通常涉及到几个关键步骤&#xff0c;包括设置角色的物理属性、处理输入、更新角色的位置以及动画同步。下面是实现基本3D角色移动的步骤和示例代码&#xff1a; 步骤1&#xff1a;设置角色的物理属性 角色通常使用Character Co…

ABAP中的代码重复使用

文章目录 1 Introduction2 Detail 1 Introduction ABAP offers various options for avoiding such code duplicates and for giving a piece of program code a name under which it can be called: Form routines (these are officially obsolete) Function modules (this …

NPDP究竟值不值得去考?

一、NPDP是什么&#xff1f; NPDP其实就是产品经理国际资格认证&#xff08;New Product Development Professional&#xff09;&#xff0c;是美国产品开发管理协会发起的&#xff0c;集理论、方法和实践一体&#xff0c;在新产品开发方面有一个很全面的知识体系。是国际公认…

【Python】已解决:AttributeError: ‘function’ object has no attribute ‘ELement’

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决&#xff1a;AttributeError: ‘function’ object has no attribute ‘ELement’ 一、分析问题背景 在Python编程中&#xff0c;AttributeError通常表明你试图访问一个对象…

气象观测站:守护天空的守望者

气象观测站的数据对于天气预报至关重要。通过对气压、温度、湿度、风速、风向等气象要素的持续监测&#xff0c;气象学家们能够分析出大气的运动规律&#xff0c;预测出未来的天气变化。这些预测信息对于人们的生产生活、交通运输、防灾减灾等方面都具有重要的指导意义。 除了天…

PLC边缘网关在实际应用中的作用-天拓四方

随着工业自动化的快速发展&#xff0c;PLC已成为工业自动化领域中不可或缺的核心设备。然而&#xff0c;随着工业物联网的兴起&#xff0c;PLC设备面临着数据集成、远程监控以及安全性等方面的挑战。为了解决这些问题&#xff0c;PLC边缘网关应运而生&#xff0c;它作为连接PLC…

【机器学习】在【Pycharm】中的实践教程:使用【逻辑回归模型】进行【乳腺癌检测】

目录 案例背景 具体问题 1. 环境准备 小李的理解 知识点 2. 数据准备 2.1 导入必要的库和数据集 小李的理解 知识点 2.2 数据集基本信息 小李的理解 知识点 注意事项 3. 数据预处理 3.1 划分训练集和测试集 小李的理解 知识点 注意事项 3.2 数据标准化 小李…

线程不安全情况之内存可见性——volatile

内存可见性 影响线程安全的原因有很多&#xff0c;内存可见性的也会引起线程不安全。 以下面的案例来看&#xff0c;线程启动后&#xff0c;t1不断进行循环&#xff0c;直到t2输入数字后改变状态&#xff0c;t1线程才会结束。 private static int count;public static void ma…

区间动态规划——最长回文子序列长度(C++)

把夜熬成粥&#xff0c;然后喝了它。 ——2024年7月1日 书接上回&#xff1a;区间动态规划——最长回文子串&#xff08;C&#xff09;-CSDN博客&#xff0c;大家有想到解决办法吗&#xff1f; 题目描述 给定一个字符串s&#xff08;s仅由数字和英文大小写字母组成&#xff0…

JavaSEJava8 时间日期API + 使用心得

文章目录 1. LocalDate2. LocalTime3. LocalDateTime3.1创建 LocalDateTime3.2 LocalDateTime获取方法 4. LocalDateTime转换方法4.1 LocalDateTime增加或者减少时间的方法4.2 LocalDateTime修改方法 5. Period6. Duration7. 格式转换7.1 时间日期转换为字符串7.2 字符串转换为…

基于YOLOv5的人脸目标检测

本文是在之前的基于yolov5的人脸关键点检测项目上扩展来的。因为人脸目标检测的效果将直接影响到人脸关键点检测的效果&#xff0c;因此本文主要讲解利用yolov5训练人脸目标检测(关键点检测可以看我人脸关键点检测文章) 基于yolov5的人脸关键点检测&#xff1a;人脸关键点检测…