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,一经查实,立即删除!

相关文章

日语笔记——jy

敬语尊敬自兼丁寧するされるいたすします先生が詳細に説明されるご説明いたします説明しますいうおっしゃる申す言うお名まえはなんとおっしゃいますかほかのことは申すまでもない親の言う事をよく聞く行くいらっしゃる参る行きます先生もいらっしゃるのですかご一緒に参りまし…

Node.js学习路线

Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它允许JavaScript在服务器端运行。Node.js的核心内容和高阶内容涵盖了多个方面,以下是对Node.js的详细解析、核心内容以及高阶内容的归纳: 一、Node.js简介 运行环境:Node.…

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…

【Asterinas】Asterinas 进程启动与切换

Asterinas 进程启动与切换 进程启动 进程创建&#xff1a; Rust pub fn spawn_user_process( executable_path: &str, argv: Vec, envp: Vec, ) -> Result<Arc> { // spawn user process should give an absolute path debug_assert!(executable_path.starts_with…

数据结构 —— 二叉树

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

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

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

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

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

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

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

OpenSSL的一些使用案例

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

什么是校园气象站

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

MySQL之应用层优化和备份与恢复(一)

应用层优化 缓存 作为基础组件的缓存 缓存有可能成为基础设施的重要组成部分。也很容易陷入一个陷阱&#xff0c;认为缓存虽然很好用&#xff0c;但并不是重要到非有不可得东西。你也许会辩驳&#xff0c;如果缓存服务器宕机或者缓存被清空&#xff0c;请求也可以直接落在数…

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

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

前端基础--Vue3

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

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

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

vb 学习简介

vb 第一节 Visual Basic(简称VB)是一种高级编程语言,它最初由微软公司开发,旨在简化Windows应用程序的开发过程。下面,我们将介绍Visual Basic编程语言的基础概念和用途,包括其历史背景、主要特性以及在现代编程中的应用。 历史背景 Visual Basic起源于1991年,当时微软…

代码随想录算法训练营day72 | 117. 软件构建、47. 参加科学大会

本次题目来自于卡码网 117. 软件构建&#xff08;拓扑排序&#xff09; python设置默认值 from collections import defaultdict aa defaultdict(int) 拓扑排序&#xff1a;找到入度为0的节点&#xff0c;然后移除。如果最后都能移除&#xff0c;则无环&#xff0c;可以排…

C#发票识别接口,再长的税号录入都不怕

“十二金”工程是我国政府在信息化建设中的重要一步&#xff0c;“金税工程”总称为中国税收管理信息系统&#xff08;CTAIS&#xff09;&#xff0c;是我国电子政务的核心系统之一,是财政的重要环节。十二金”是面向政府办公业务建立的十二个重点信息应用系统&#xff0c;按“…

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

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

计算机网络--网络层

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