[b]1、当我们在浏览器地址栏中输入地址,或者点击一个按钮、超链接是,浏览器将向Web服务器发送请求,请求发送后,浏览器将等待服务器对请求的处理,直到接收到到服务器响应的内容后,浏览器将内容显示给用户,由于数据量、网络传输以及服务器处理等各种原因,浏览器等待服务器处理请求的过程可能是漫长的。而在这个过程中,客户端的其他操作被阻止,用户只能等待,停止与页面的交互,并且,这种请求每次都需要重新刷新(重载)页面以显示新的响应内容,在复杂的web应用中,当用户需要频繁与服务器进行交互时,客户端需要频繁向服务器发送请求,这种等待与频繁的刷新页面对应用系统是致命的。而Ajax技术使这种交互的等待时间仅可能短,不再刷新页面,使Web应用系统操作更流畅和联系,使客户端得到更丰富的应用体验和交互操作。
2、Ajax是Asynchronous JavaScript and XML的缩写称为异步 JavaScript和XML,是一种创建交互式Web应用程序的开发技术,Ajax并不是一种设计语言,而是综合运行各种已有开发技术的一种新的Web开发方式,Ajax应用涉及HTML、XML、DOM、CSS以及JavaScript。
3、Ajax用于创建富客户端应用程序,富客户端是指表现能力丰富的客户端,包括多种方式的输入,直观、及时的反馈,以及丰富、高效的用户交互。在说明Ajax如何实现富客户端之前,首先说明传统的Web应用处理方式。
4、看一下普通的桌面应用程序,例如Word,这些程序被安装在本地计算机上,数据文件也存储到本地计算机上,程序总是运行流畅,用户操作总能得到迅速的反馈,基本上不需要等待。Web应用程序实现桌面应用无法完成的任务。但对于Web应用程序,程序在远程服务上运行,客户端需要向服务器发送请求,然后等待服务器处理请求,在服务器处理请求后将结果返回给客户端,客户端浏览器将响应呈现给用户,在这种处理模式下,响应效率自然无法与操作本地桌面应用程序相比,用户请求到服务器返回相应之间必须存在延迟,用户必须等待,而且传输网络的不稳定更使这种相应效率变得不稳定。当这种延迟稍长时会使用户操作出现停顿。甚至用户无法操作而放弃请求。而随着Web应用程序的功能日益复杂,客户端与服务端需要更频繁的交互,传输的数量日益加大,这种延迟将被扩大。
5、传统的请求处理方式下,当用户单击超链接,或者提交表单时,浏览器向服务器发送HTTP请求并等待服务器响应。服务器接收并处理客户端请求,处理完毕后将处理结果返回给客户端, 客户端浏览器接收服务器端响应,刷新页面以显示响应内容,这种方式的问题在于:。
- HTTP请求是同步的,当浏览器发送请求后,浏览器需要等待服务器响应,在接收到服务器响应之前,客户端不能做任何事,用户只能等待。
- 服务器返回给客户端的内容包括无用的数据,在传统方式下,服务器返回的结果总是包括完整的页面内容,而在这些内容中,大部分内容与原来页面中的内容相同。无用的数据增加了响应的延迟。
- 客户端浏览器接收到服务器响应时,浏览器刷新整个页面以显示服务器的相应内容。而不是只更新那些变化的内容。
等待、无用的数据、刷新页面,这些因素使传统的处理方式无法满足功能日益复杂的Web应用程序,而Ajax技术能解决这些问题。与传统Web应用相比较,Ajax具有如下主要内容特点:
- HTTP请求是异步的,Ajax通过异步请求方式处理请求,请求由脚本通过后台发送,用户不会感觉到发送的过程,当发送请求后,客户端不需要等待服务器响应。对服务器响应内容的处理由JavaScript脚本在后台进行处理,在服务器处理请求的过程中,用户可以继续其他操作。页面中的链接,表单等元素仍然可用。注意:异步请求并不是没有延迟,只不过这样延迟对客户端用户来说是感觉不到的。
- 服务器返回的响应内容只包括需要的那部分数据,不包括无用的数据,减少处理数据的时间。
- 浏览器不需要刷新整个页面,而是通过JavaScript更新也慢中的部分内容。
6、异步请求、精简的数据以及避免页面的刷新,这些使得基于Ajax的Web应用操作流畅和连续、能够给客户端提供直观、及时的反馈和丰富、高效的用户交互体验。
7、 那么,Ajax如何实现这种处理方式的呢?
Ajax的核心技术是XMLHttpRequest对象,XMLHttpRequest使JavaScript脚本能够在后台发送HTTP请求并获取和处理服务器的响应的内容。通过XMLHttpRequest对象提供的open()、send()方法,可以向服务器发送请求,open()方法可以将请求设置为异步方式,在服务器处理请求的过程中。客户端不需要等待,不影响客户端用户的其他操作,当接收到服务区响应后,JavaScript脚本通过XMLHttpRequest对象的responseTest或者responseXML获取响应内容。结合DOM,JavaScript可以将响应内容添加到当前页面中指定的位置。例如:将返回的内容添加到某个表单元素,或者通过insertHTML属性将响应内容放置到某个页面元素中。或者通过appendChild()方法将响应的内容添加为指定节点的子节点。因为服务器返回的内容是通过JavaScript脚本添加到页面中,所以服务器返回的响应内容可以只是需要更新的部分内容,而不需要返回完整的HTML文件,浏览器也不需要刷新整个页面。而只是通过JavaScript脚本更新需要更新的部分内容。
分享到:
相关推荐
ajax原理及应用,概念,技术以及xmlhttprequest实例化
Ajax引擎的原理和应用.pdf
关于动态网页技术Ajax的开发与应用以及web网页开发Servlet原理及应用。帮助理解Ajax和Serverlet
本文介绍了Ajax的基本原理,交互过程和与之相关的技术及简单的实现方法,在此基础上给出了一个完整的实例,以使得能够对Ajax有一个更清楚的理解。 关键字:Ajax,JavaScript,DOM,无刷新页面,不完全刷新 引言 计算机桌面...
Ajax 原理和应用.如果你对Ajax不了解或者不是很熟悉的,可以来看看 文档通过10个方面,比较详细的给你介绍这一技术。 1、ajax技术的背景 2、ajax技术的意义 3、关于ajax的名字 。。。等等
内容包括JavaScript基础语法、支持闭包的函数、基于原型的面向对象、JavaScript内建对象及应用、正则表达式原理及应用、BOM与DOM、事件模型、...Canvas/SVG图形图像处理、Cookie与隐藏框架、Ajax原理及应用、错误处理等...
内容包括JavaScript基础语法、支持闭包的函数、基于原型的面向对象、JavaScript内建对象及应用、正则表达式原理及应用、BOM与DOM、事件模型、...Canvas/SVG图形图像处理、Cookie与隐藏框架、Ajax原理及应用、错误处理等...
主要较少的xmlHttpRequest对象。包括get传值与post传值
AJAX原理及其在Web开发中的应用.pdf
Ajax引擎的原理和应用借鉴.pdf
31.1.2 Ajax运行原理 677 31.1.3 Ajax与Atlas的关系 677 31.2 搭建Ajax开发环境 678 31.2.1 Ajax开发环境下载与安装 678 31.2.2 AjaxControlToolkit下载与安装 679 31.3 Ajax开发典型应用 681 31.3.1 ...
主要介绍了Ajax原理与应用案例,结合实例形式分析了ajax原理、功能、创建及使用方法,需要的朋友可以参考下
Ajax基本原理 Ajax核心技术及其研究应用 AJAX_In_Action
1、ajax是什么及其工作原理Ajax 由 HTML、JavaScript 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。2、创建XMLHttpRequest对象对于Ajax,最核心的一个对象是...
Ajax是Asynchrohous Java ScriPt antXML的缩写。它是几项技术按一定的方式组合在一起...通过对Ajax的工作原理、相关技术以及具体应用的介绍,阐明了Ajax在web应用方面具有独特的优势,必将成为Web应用开发的主流技术
将接ajax的实现原理,并讲解ajax常用知识点
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体概述到细节的...
AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 主要包含了以下几种技术 Ajax(Asynchronous JavaScript + XML)的定义 基于web标准...
针对传统的Web考勤系统使用submit方式进行数据交互导致的响应时间长、用户体验差等问题,提出了采用Ajax技术设计矿用考勤系统的方案,分析了Ajax技术原理,介绍了基于Ajax技术的矿用考勤系统实现过程。Ajax技术通过...