Ajax和传统Web应用的对比

传统Web应用与AJAX应用 AJAX不是一个特定的技术。实际上它是若干个技术以全新的方式进行组合,从而充分发挥出它们在各自领域上面的优势 立即下载

一.同步和异步

这两个概念在操作系统中提到过,这次我们再来结合这个看一下。

同步是这样一个过程:提交请求-〉等待服务器处理——〉处理完毕,返回。这个期间客户端浏览器不能够干任何事情。

异步:请求通过事件触发——>服务器处理(这个时候,浏览器可以做其他事情)——〉处理完成。

对比:同步是一心一意,只能够做一件事情,其他事情必须等待当前的事情完成,才能够继续做后面的事情。异步是三心二意的,不必等待得到回应,就可以去做别的事情,也就是可以同时做多件事情。

二、ajax中的同步和异步

ajax发送请求时候分为同步和异步(当然最重要的使用是异步)。

异步传输方式:是使用最多的也是默认的方式。他避免了服务器检索给用户带来的延迟。在异步传输的时候,它只是在后面悄悄的进行 ,用户仍然可以做其他的事情,不会给用户等待的感觉。在传输的数据量比较大的时候,服务器的检索实践就很长了,但是用户却不知道,用于仍然可以在页面上操作,根本就不知道服务器都干了什么,所以能够给用户良好的体验。

同步方式:就比较木讷了,很痴情。当发出了请求之后,浏览器就在那等待,等待服务器检索完毕,返回结果。这个时间段内,鼠标就会变成等待的形状,提醒我们的用户请求还没有响应,您什么也不能做。我们的用户就什么都干不成,能够做的就是等待。这样,用户的体验度就会下降。

但是世界上的事情都不是绝对的,同步也有同步方式的适用场景。假如有这样一个情况,我们的请求的结果是下一步请求的前提,只有知道这一步的请求结果,下面用户才能够继续进行。显而易见,这种情况使用同步请求还是比较合理的。

二、使用ajax的作用和好处?

    传统的web应用允许用户填写表单(Form),当提交表单时就向web服务器发送一个请求。服务器接收处理传来的表单,然后返回一个新的网页。这个做法浪费了很多宽带,因为在前后两个页面中大部分的HTML代码往往是相同的,用于每次应用的交互都需要向服务器发送请求,应用的响应时间依赖于服务器的响应的时间,这样就导致了用户界面的响应比本地慢很多。

    但是ajax应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于xml的WebService接口,并在客户端采用JavaScript处理来自服务器的响应。这样服务器和浏览器之间交换的数据大量减少,所以我们能够看到响应更快的页面。同时很多的处理请求可以在请求的客户端机器上完成,所以Web服务器的处理时间也就减少了。

使用Ajax的最大优点,就是能够在不更新整个页面的前提下维护数据,这使得web应用程序更为迅速的回应用户动作。


   Ajax和传统Web应用的对比:



 具体页面端和服务端的传输过程差别:

  


数据交互的详细过程对比:                                              

                      


  总结一句话:传统的Web开发传送的是页面,ajax方式,传送的是数据。ajax不用返回这个页面,通过一个URL去调用呢Controller中的某个方法,直接传值,大大减少了要交换的数据,所以效率提高。

 总结:

      ajax"Asynchronous  javascript And Xml"(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。通过在后台和服务器进行少量数据交换,Ajax可以使网页实现异步更新。再回头看这个概念,清晰了很多。


微信小程序 - 详细实现可移动悬浮按钮,全屏悬浮元素图标可拖动拖拽并自动吸附边缘,微信小程序实现悬浮球吸附边缘+计算靠边靠拢效果(详细代码,拖拽中途放手,靠左就自动跑到屏幕左侧,反之靠右跑到屏幕右侧) 微信小程序,vue2,vue3,微信小程序悬浮功能小按钮,自动吸附边缘效果,微信小程序之可拖动悬浮按钮的实现,如何实现靠近边缘自动吸住功能,小程序右下角的悬浮效果,实现可拖动悬浮图标,自动向两边靠拢,悬浮按钮的实现,微信小程序悬浮球效果,微信小程序(可拖动悬浮按钮)当靠近屏幕边缘时会磁吸靠近,如何实现全局悬浮按钮,悬浮球判断吸附在左右,全屏悬浮能拖着走,小程序怎么做悬浮图标靠近左右两侧能吸附住,悬浮菜单按钮,悬浮球可拖拽,全局悬浮球,全局悬浮框,实现悬浮按钮可拖动,自动吸附边缘效果,若按钮此时位于页面中间偏 阅读详情

相关推荐

5G物理层基础知识

1、关于RB和RE (1) RB(Resource Block,资源块)频率上连续12个子载波,时域上一个slot(时隙,14个ofdm符号) (2) RE(Resource Element,资源单元)频率上一个子载波,及时域上一个ofdm符号 注意:协议规定,5G每个时隙(非扩展CP)的符号数为14个(扩展CP情况下每个时隙有12个符号),而LTE(非扩展CP)每个时隙的符号数为7个。 简单说:一个12X14的方格,大的整个叫一个RB,每一个小块叫一个RE。另外,一个RE可存放一个调制符号(mo.

qq_39074243的博客 2万+

传统的Web开发技术和Ajax技术有什么区别?

传统的Web开发技术和Ajax技术有什么区别? 无论使用哪种开发技术,流程都是先有客户端发送HTTP请求,然后由服务器对请求生成响应。但传统的Web开发技术和Ajax技术之间还是存在很多差异的。 差异一:发送请求方式不同。 传统Web应用通过浏览器发送请求,而Ajax技术则是通过JavaScript的XMLHTTPRequest对象发送请求。 差异二:服务器响应不同。 针对传统的Web应...

qq_40948117的博客 1712

深度:善用人工智能推动高等教育学习、教学与治理的深层变革

从学习方式的革新到教学模式的重构,再到治理体系的升级,人工智能已不再仅仅是辅助工具,而是成为重塑高等教育生态的核心驱动力。某高校的创新实践表明,引入AI生成虚拟患者后,医学生在临床沟通训练中的共情能力提升27%,印证了技术工具与人文教育的互补效应。美国卡内基梅隆大学的实践表明,经过系统培训的教师,其课程设计效率提升40%,且能精准定位83%学生的学习难点。当每个学生都掌握提示工程原理,每位教师都能驾驭AI教学工具,每所高校都建立智能治理框架时,教育将真正实现"以人为本"与"技术为用"的有机统一。

IT胶囊 1093

Ajax技术和传统Web技术的异同点?

Ajax技术和传统Web技术的异同点? 相同点: 无论使用哪种开发技术,流程都是先由客户端发送HTTP请求,然后由服务器对请求生成响应。 但传统的Web开发技术和Ajax技术之间还是存在很多差异的。 不同点: 1:发送请求方式不同。 传统Web应用通过浏览器发送请求,而Ajax技术则是通过JavaScript的XmlHttpRequest对象。 2:服务器响应不同。 针对传统Web...

Roger_CoderLife的博客 1245

物理专业书库模板(1):物理学书单(适合物理专业本科生、研究生、科研工作者、物理爱好者...)

物理专业书库模板(1):物理学书单(适合物理专业本科生、研究生、科研工作者、物理爱好者...) 求赞求喜欢求分享,建议关注,防止文章丢失。

hepyang的博客 2179

泛微ecology9二次开发-附件上传-安全实践

本文深入探讨了泛微ecology9二次开发中附件上传功能的安全实践。针对原生接口的安全机制,文章提出了同源部署与服务端代理转发两大核心策略,并提供了基于Vue3和Element Plus的完整前端实现代码,重点解决了会话验证、权限控制及文件关联等关键安全问题,确保二次开发应用能安全、稳定地与ecology9系统集成。

qsc9012345的博客 533

AJAX与传统Web开发的不同之处

前言   初次接触AJAX,对它认识比较深刻的地方是,自己安装Tomcat服务器,还有关于Tomcat相关的插件,以及JDK环境的配置,这些在《NetBeans IDE 之Tomcat服务器安装》博客中已经做了总结,有兴趣到博友,可以点击文章进行浏览。   这次的总结是结合实例,来真实体验一下AJAX与传统Web开发的不同之处。比较AJAX与传统Web项目一、用户体验角度1.从下面的表格中,我们看...

冯浩月 2000

高通QCOM Camera Pipeline 可视化工具:从XML到交互式图谱的工程实践

本文详细介绍了高通QCOM Camera Pipeline可视化工具的工程实践,旨在解决Camera驱动与算法工程师在解析复杂XML配置文件时的痛点。该工具能将静态的XML文件(如g_camx_usecase.xml)自动转换为交互式视觉图谱,通过分层布局算法清晰展示Pipeline、Node、Port和Link的拓扑关系,并支持悬停查看、拖动缩放等交互操作,极大提升了开发调试与架构理解的效率。

prometheus5watch的博客 555

【Ajax】实现网页与服务器之间的数据交互

全称 Asynchronous javascript And XML(异步JavaScript 和XML)通俗的理解: 在网页中来利用XMLHttpRequest对象和服务器进行数据交互的方式,就是 AjaxAjax能让我们轻松实现网页于服务器之间的数据交互表单在网页中主要负责数据采集功能html中的标签,就是用于采集用户输入的信息,并通过标签的提交操作,把采集到的信息提交到服务器端进行处理axios是专注于网络数据请求的库相比于原生的XMLHttpRequest对象,axios简单易用。...

m0_53619602的博客 2844

C#企业级工作流管理:从优化到重构的实战指南——代码深度解析与性能调优策略

本文通过Workflow Core与Elsa引擎实现企业审批流程优化,将处理时间从72小时缩短至2小时,效率提升200%。文章包含12个代码示例,涵盖流程梳理、引擎选型(对比Workflow Core与Elsa特性)、模块化重构(策略模式应用)及异常处理机制。关键实现包括:可视化流程建模、Serilog性能监控、Elsa集成配置、策略模式消除重复代码,以及补偿事务设计。最终方案支持高并发,通过数据库连接池优化性能,为企业级工作流系统提供完整技术方案。

墨夶的博客 896

Manus创始人深度复盘:AI Agent产品的技术架构与战略转型

成本对比:同样任务处理,中国区单位成本是亚太区的2.3倍。付费转化率:中国区1.2% vs 全球平均4.7%微信/支付宝等超级App的适配代码占比达17%Zstandard:压缩比38%,耗时12ms。每季度需要投入3名高级工程师专职维护兼容性。国际版API平均延迟:180-220ms。中国版特殊部署延迟:480-720ms。信息保持准确率:93%(7天跨度测试)自研算法:压缩比39%,耗时5ms。存储效率:相比纯文本节省68%空间。:本地化部署导致的延迟与费用差异。LZ4:压缩比42%,耗时8ms。

m0_75253143的博客 7146

【前端笔记】三、前后端通信(http协议和Ajax)

目录一、http协议请求报文1. 请求行2. 首部字段3. 消息体响应报文1. 状态行二、AjaxXMLHttpRequest1.open2. send3. 获取服务器返回的数据 一、http协议 http协议就是前端与后端之间相互通信所遵循的协议,协议定义了传输信息的格式,信息所表示的具体的含义。 前端和后端之间沟通的信息分为两种: 前端给后端发送的信息叫做请求报文,也就是HTTP request 后端回复前端的信息叫做响应报文,也就是HTTP response http协议最主要的内容就是定义了请

小王同学的博客 2783

基于FPGA的UDP 通信(六)

本文基于FPGA和MATLAB对千兆以太网通信模块UDP数据发送(FPGA发送)进行联合调试。

记录所学,分享知识,结识挚友 4730

Ajax: 一个建立Web应用的新途径

一、使用Ajax的主要原因  1、通过适当的Ajax应用达到更好的用户体验;  2、把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。二、引用Ajax这个概念的最早提出者Jesse James Garrett认为:  Ajax是Asynchronous JavaScript and XML的缩

780

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

深入理解和使用ajax实现web应用程序异步处理用户请求

        Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 Web应用传统开发模式:   在Web的传统开发模式中,页面中用户的每一次操作都会触发一次Web服务器的HTTP请求,服务器进行相应的处理后,返回一个HTML页面给客户端。 Web应用Aj...

六年鹿苑的博客 1491

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

AJAX技术汇总

AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。它有机地包含了以下几种技术: Ajax(Asynchronous JavaScript + XML)的定义基于web标准(standards-based presentation)XHTML+CSS的表示; 使用 DOM(Docum

网络第八层 780

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

AJAX笔试面试题汇总

1. 什么是ajax,为什么要使用Ajax(请谈一下你对Ajax的认识) 什么是ajax: AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。 Ajax包含下列技术: 基于web标准(standards-based presentation)XHTML+CSS的表示; 使用 DOM(Document Obj...

weixin_34351321的博客 359

Ajax与传统Web开发的异同

传统web开发模式         传统的Web应用交互由用户触发一个HTTP请求到服务器,服务器接收并对其进行处理后再返回一个新的HTML页到客户端。 每当服务器处理客户端提交的请求时,客户都只能空闲等待,哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都会返回整个的HTML页,所以用户每次都要浪

思想上移,行动下移 1472

ajax应用设计模式,AJAX应用的典型设计模式①.PDF

AJAX应用的典型设计模式①.PDF计 算 机 系 统 应 用 2011 年 第 20 卷 第 1 期①AJAX 应用的典型设计模式周 杨(军事经济学院 基础部计算机教研室,武汉 430035)摘 要: AJAX 是 WEB 领域的前沿技术,它提供了新的互联网交互模型,扩展了 WEB 应用的能力。文章对比分析了 AJAX 工作模...

weixin_36014846的博客 171

专题:ajax

专题:Ajax     什么是Ajax Ajax (Asynchronous JavaScript and XML)不是一个新的技术,事实上,它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起。 Ajax的关键技术 u 使用XHTML(HTML)和CSS构建标准化的展示层 u 使用DOM进行动态显示和交互 u 使用XML和XSLT进行数据交换和操纵 u 使用XMLHt...

yuqilin的专栏 170

Ajax入门总结--jquery实现Ajax

ajax(AsynchronousJavascriptAndXML):只刷新局部页面的技术 ajax的工作流程: 使用javascript获取到页面上的数据 通过Ajax引擎创建XMLHttpRequest对象 XMLHttpRequest会给服务器发送一个http请求 此时服务器进行处理。 服务器响应(XML、JSON、HTML)数据给XMLHttpRequest对象 J...

怪只怪满眼尽是人间烟火 737

前端入门一 —— 使用 JQuery 获取表单数据并通过 Ajax 向服务器提交数据

前端入门一 —— 使用 JQuery 获取表单数据并通过 Ajax 向服务器提交数据一、JQuery 简介二、Ajax 简介三、传统Web应用开发模式与 Ajax 开发模式对比1、传统Web应用开发模式2、Ajax 开发模式3、对比总结四、开发实例1、HTML 代码 register.html2、JS代码 register.js3、页面效果 一、JQuery 简介 jQuery是一个快速、简洁的J...

wj11771的博客 9973

【AJAX】给你不一样的用户体验

AJAX(异步JavaScript和XML),对它早有耳闻,如今,终于见到了它。 一.何为AJAX? AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML) AJAX 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。 ...

weixin_34008805的博客 133

Ajax和jQuery详细笔记

Ajax和jQuery详细笔记

weixin_47541976的博客 433

85---ajax实现的传统方式以及jquery方式,jquery方式的五种方法,json对象的转换方法, JSON类型的Result

1.JSON对象数组 $(function() { var jsonObj = { "name" : "李小", "age" : 18 };//一个json对象 var students = [ { "name" : "李小1", "age" : 18 }, { "name" : "李小2", "age" : 28 }, { "name" : "李小3",

lixiao1048的博客 1221

AJAX面试题

1.AJAX有哪些优点和缺点? 一.优点: (1)最大的一点是页面无需刷新,用户的体验非常好。 (2)使用异步方式与服务器通信,具有更加迅速的响应能力。 (3)可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和宽带的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。 ...

qq_36952524的博客 363
上一篇: 5月份英语博客总结
下一篇: mysql安装
追梦的晓米
博客等级 码龄13年 222粉丝 238原创
评论 14
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值