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

一. 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.mzph.cn/diannao/39793.shtml

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

相关文章

svn忽略上传文件node_modules文件

文章目录 1.点击svn项目右键-》选中svn的属性2. 点击 新建3. 点击其他4. 选择属性 svn:global-ignores5. 输入忽略文件 1.点击svn项目右键-》选中svn的属性 2. 点击 新建 3. 点击其他 4. 选择属性 svn:global-ignores 5. 输入忽略文件

四、【源码】Bean属性注入

源码地址:https://github.com/spring-projects/spring-framework 仓库地址:https://gitcode.net/qq_42665745/spring/-/tree/04-porperty-inject Bean属性注入 属性注入相关的类 1.PropertyValue:属性对象,name:value 2.Prope…

数据结构 —— 二叉树

1.树的概念及结构 1.1树的概念 树是一种非线性的数据结构,它有着多分支,层次性的特点。 由于其形态类似于自然界中倒过来的数,所以我们将这种数据结构称为“树形结构” 注意: 树形结构中,子树之间不能有交集&#x…

降重工具大揭秘:AI如何帮你轻松搞定论文重写?

已经天临五年了,大学生们还在为论文降重烦恼……手动降重确实是个难题,必须要先付点小经费去靠谱的网站查重,再对着红字标注去改,后面每一次的论文呢查重结果都像赌//博,谁也不知道明明是同一篇文章,第二次…

2024鲲鹏昇腾创新大赛集训营Ascend C算子学习笔记

异构计算架构(CANN) 对标英伟达的CUDA CuDNN的核心软件层,向上支持多种AI框架,向下服务AI处理器,发挥承上启下的关键作用,是提升昇腾AI处理器计算效率的关键平台。主要包括有各种引擎、编译器、执行器、算…

(番外篇)指针的一些相关习题讲解(速进,干货满满)(2)

前言: 小编感觉最近有点太堕落,于是我开始从事这篇文章的撰写,现在也是进入七月份了,我现在文章开头定一个小目标,我决定在七月份发布至少十篇文章,希望我可以说到做到(我前面就口头欠了不少文章…

OpenSSL的一些使用案例

目录 一、介绍 二、基本使用 1、Shell (1)文件加解密 (2)生成密钥文件 2、API (1)md5sum (2)AES256加解密 一、介绍 本篇博客重点不是详细描述 OpenSSL 的用法,只…

什么是校园气象站

在科技日新月异的今天,气象观测不仅局限于专业的气象机构,它已经走进了我们的校园,成为了学生们探索自然、学习科学知识的重要平台。 校园气象站是设置在学校内部,用于进行气象观测、数据记录和科学实验的设施。它通常由气象传感器…

常见锁策略之可重入锁VS不可重入锁

可重入锁VS不可重入锁 有一个线程,针对同一把锁,连续加锁两次,如果产生了死锁,那就是不可重入锁,如果没有产生死锁,那就是可重入锁. 死锁 我们之前引入多线程的时候不是讲了一个加数字的案例么,我们今天以它来举例 当我们这样写的时候会出现什么问题? 分析:第一个synchron…

前端基础--Vue3

Vue3基础 VUE3和VUE2的区别 2020年9月18日,Vue.js发布版3.0版本,代号:One Piece 于 2022 年 2 月 7 日星期一成为新的默认版本! Vue3性能更高,初次渲染快55%, 更新渲染快133% 。体积更小 Vue3.0 打包大小减少41%。 同时Vue3可以更好的支持T…

基于微服务智能推荐健康生活交流平台的设计与实现(SpringCloud SpringBoot)+文档

💗博主介绍💗:✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示:文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…

解决使用monaco-editor编译器,编译器展示内容没有超过编译器高度,但是出现滚动条问题

前言: 最近在完成项目时,有使用编译器进行在线编辑的功能,就选用了monaco-editor编译器,但是实现功能之后,发现即使在编译器展示的内容没有超过编译器高度的情况下,编译器依旧存在滚动条,会展示…

计算机网络--网络层

一、网络层的服务和功能 网络层主要为应用层提供端对端的数据传输服务 网络层接受运输层的报文段,添加自己的首部,形成网络层分组。分组是网络层的传输单元。网络层分组在各个站点的网络层之间传输,最终到达接收方的网络层。接收方网络层将运…

如何在 Java 应用中使用 Jedis 客户端库来实现 Redis 缓存的基本操作

本人详解 作者:王文峰,参加过 CSDN 2020年度博客之星,《Java王大师王天师》 公众号:JAVA开发王大师,专注于天道酬勤的 Java 开发问题中国国学、传统文化和代码爱好者的程序人生,期待你的关注和支持!本人外号:神秘小峯 山峯 转载说明:务必注明来源(注明:作者:王文峰…

堆与栈的概念(RTOS)

目录 #堆在RTOS的概念 #相关代码表示 #堆相关特点 #栈在RTOS中的概念 #栈的代码表示 #栈的相关特点 #为什么每个RTOS任务都要有自己的栈 前言:本篇参考韦东山老师的RTOS,连接放在最后 #堆在RTOS的概念 本文所指的堆与栈并不是数据结构中&#xff…

【unity实战】在Unity中使用有限状态机制作一个敌人AI

最终效果 文章目录 最终效果前言有限状态机的主要作用和意义素材下载逻辑图敌人动画配置优雅的代码文件目录状态机代码定义敌人不同状态切换创建敌人效果更多的敌人参考源码完结 前言 有限状态机以前的我嗤之以鼻,现在的我逐帧分析。其实之前我就了解过有限状态机&…

2.(vue3.x+vite)调用iframe的方法(vue编码)

1、效果预览 2.编写代码 (1)主页面 <template><div><button @click="sendMessage">调用iframe,并发送信息

【udp报文】udp报文未自动分片,报文过长被拦截问题定位

问题现象 某局点出现一个奇怪的现象&#xff0c;客户端给服务端发送消息&#xff0c;服务端仅能收到小部分消息&#xff0c;大部分消息从客户端发出后&#xff0c;服务端都未收到。 问题定位 初步分析 根据现象初步分析&#xff0c;有可能是网络原因导致消息到服务端不可达&a…

【C语言】文件的顺序读写

©作者:末央&#xff06; ©系列:C语言初阶(适合小白入门) ©说明:以凡人之笔墨&#xff0c;书写未来之大梦 目录 前言字符输入输出函数 - fgetc和fputc文本行输入输出函数 - fgets和fputs格式化输入输出函数 - fscanf和fprintf 前言 对文件数据的读写可以分为顺序…

Seal^_^【送书活动第8期】——《ChatGLM3大模型本地化部署、应用开发与微调》

Seal^_^【送书活动第8期】——《ChatGLM3大模型本地化部署、应用开发与微调》 一、参与方式二、本期推荐图书2.1 作者建语2.2 编辑推建2.3 图书简介2.4 前 言2.5 目 录 三、正版购买 大模型领域 既是繁星点点的未知宇宙&#xff0c;也是蕴含无数可能的广阔天地&#xff0c; 正…