- 浏览: 7331222 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (1546)
- 企业中间件 (236)
- 企业应用面临的问题 (236)
- 小布Oracle学习笔记汇总 (36)
- Spring 开发应用 (54)
- IBatis开发应用 (16)
- Oracle基础学习 (23)
- struts2.0 (41)
- JVM&ClassLoader&GC (16)
- JQuery的开发应用 (17)
- WebService的开发应用 (21)
- Java&Socket (44)
- 开源组件的应用 (254)
- 常用Javascript的开发应用 (28)
- J2EE开发技术指南 (163)
- EJB3开发应用 (11)
- GIS&Mobile&MAP (36)
- SWT-GEF-RCP (52)
- 算法&数据结构 (6)
- Apache开源组件研究 (62)
- Hibernate 学习应用 (57)
- java并发编程 (59)
- MySQL&Mongodb&MS/SQL (15)
- Oracle数据库实验室 (55)
- 搜索引擎的开发应用 (34)
- 软件工程师笔试经典 (14)
- 其他杂项 (10)
- AndroidPn& MQTT&C2DM&推技术 (29)
- ActiveMQ学习和研究 (38)
- Google技术应用开发和API分析 (11)
- flex的学习总结 (59)
- 项目中一点总结 (20)
- java疑惑 java面向对象编程 (28)
- Android 开发学习 (133)
- linux和UNIX的总结 (37)
- Titanium学习总结 (20)
- JQueryMobile学习总结 (34)
- Phonegap学习总结 (32)
- HTML5学习总结 (41)
- JeeCMS研究和理解分析 (9)
最新评论
-
lgh1992314:
[u][i][b][flash=200,200][url][i ...
看看mybatis 源代码 -
尼古拉斯.fwp:
图片根本就不出来好吧。。。。。。
Android文件图片上传的详细讲解(一)HTTP multipart/form-data 上传报文格式实现手机端上传 -
ln94223:
第一个应该用排它网关吧 怎么是并行网关, 并行网关是所有exe ...
工作流Activiti的学习总结(八)Activiti自动执行的应用 -
ZY199266:
获取不到任何消息信息,请问这是什么原因呢?
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息 -
xiaoyao霄:
DestinationSourceMonitor 报错 应该导 ...
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息
Ajax的工作原理
使用Ajax的主要原因:1、通过适当的Ajax应用达到更好的用户体验;2、把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。
Ajax是Asynchronous JavaScript and XML的缩写。它包括
使用XHTML和CSS标准化呈现;
使用DOM实现动态显示和交互;
使用XML和XSLT进行数据交换与处理;
使用XMLHttpRequest进行异步数据读取;
最后用JavaScript绑定和处理所有数据;
工作原理
Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax其核心只有JavaScript、XMLHTTPRequest和DOM,在旧的交互方式中,由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端, 每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。而使用Ajax后用户从感觉上几乎所有的操作都会很快响应没有页面重载(白屏)的等待。
1、XMLHTTPRequest
Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。
XMLHttpRequest 对象方法描述
abort() 停止当前请求
getAllResponseHeaders() 作为字符串返问完整的headers
getResponseHeader("headerLabel") 作为字符串返问单个的header标签
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 设置未决的请求的目标 URL, 方法, 和其他参数
send(content) 发送请求
setRequestHeader("label", "value") 设置header并和请求一起发送 ('post'方法一定要 )
XMLHttpRequest 对象属性描述
onreadystatechange 状态改变的事件触发器,readyState 对象状态(integer):
0 = 未初始化 1 = 读取中 2 = 已读取 3 = 交互中 4 = 完成
responseText 服务器进程返回数据的文本版本
responseXML 服务器进程返回数据的兼容DOM的XML文档对象
responseBody 服务器返回的主题(非文本格式)
responseStream 服务器返回的数据流
status 服务器返回的状态码, 如:404 = "文件末找到" 、200 ="成功"
statusText 服务器返回的状态文本信息
2、JavaScript
JavaScript是一在浏览器中大量使用的编程语言。
3、DOM Document Object Model。
DOM是给 HTML 和 XML 文件使用的一组 API。它提供了文件的结构表述,让你可以改变其中的內容及可见物。其本质是建立网页与 Script 或程序语言沟通的桥梁。所有WEB开发人员可操作及建立文件的属性、方法及事件都以对象来展现(例如,document 就代表“文件本身“这个对像, table 对象则代表 HTML 的表格对象等等)。这些对象可以由当今大多数的浏览器以 Script 来取用。一个用HTML或XHTML构建的网页也可以看作是一组结构化的数据,这些数据被封在DOM(Document Object Model)中,DOM提供了网页中各个对象的读写的支持。
4、XML
可扩展的标记语言(Extensible Markup Language)具有一种开放的、可扩展的、可自描述的语言结构,它已经成为网上数据和文档传输的标准。
5、综合
Ajax引擎,实际上是一个比较复杂的JavaScript应用程序,用来处理用户请求,读写服务器和更改DOM内容。JavaScript的Ajax引擎读取信息,并且互动地重写DOM,这使网页能无缝化重构,也就是在页面已经下载完毕后改变页面内容,这是我们一直在通过JavaScript和DOM在广泛使用的方法,但要使网页真正动态起来,不仅要内部的互动,还需要从外部获取数据,在以前,我们是让用户来输入数据并通过DOM来改变网页内容的,但现在,XMLHTTPRequest,可以让我们在不重载页面的情况下读写服务器上的数据,使用户的输入达到最少。
Ajax使WEB中的界面与应用分离(也可以说是数据与呈现分离),而在以前两者是没有清晰的界限的,数据与呈现分离的分离,有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。也可以把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理。
四、应用
Ajax理念的出现,揭开了无刷新更新页面时代的序幕,并有代替传统web开发中采用form(表单)递交方式更新web页面的趋势。
五、Ajax的优势
1、减轻服务器的负担。因为Ajax的根本理念是“按需取数据”,所以最大可能在减少了冗余请求和响影对服务器造成的负担;
2、无刷新更新页面,减少用户实际和心理等待时间;
3、也可以把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,节约空间和带宽租用成本;
4、Ajax使WEB中的界面与应用分离(也可以说是数据与呈现分离);
Ajax原始代码如下:常用的东东
function() {
var xhr = new AjaxXmlHttpRequest();
$("#btnAjaxOld").click(function(event) {
var xhr = new AjaxXmlHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
document.getElementById("divResult").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "data/AjaxGetCityInfo.aspx?resultType=html", true); xhr.send(null); });
}
//跨浏览器获取XmlHttpRequest对象
function AjaxXmlHttpRequest() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持AJAX!");
return false; } }
}
return xmlHttp;
}
发表评论
-
【转】互联网常见Open API文档资源
2012-07-17 17:22 2413原文出处:http://www.williamlong.i ... -
【转】JavaScript编程模式:模块的力量
2012-07-06 12:50 1879块模式是一个常用的JavaScript编程模式。它 ... -
【转】JavaScript闭包和模块模式
2012-07-06 12:45 2058原文:http://www.joezimj ... -
highcharts制作强大的页面图表
2011-11-26 13:58 4826官方网址:http://www.highc ... -
JS 在IE和FireFox中的区别(三)
2009-12-26 18:45 3101(7)form表单提交问题 ... -
JS 在IE和FireFox中的区别(二)
2009-12-26 18:44 211110. const 问题现有问题:IE:不支持 const ... -
JS 在IE和FireFox中的区别
2009-12-26 18:43 23391. HTML 对象的 id 作为对象名的问题IE:HT ... -
window.showModalDialog()方法用例
2009-12-19 18:31 2121项目中使用到的父子窗体交互,仅有一个参数,想传递多个参数,其 ... -
js 父子窗体交互
2009-12-19 18:29 34191>父窗体是使用window.open(url,name ... -
js 时间工具类的应用
2009-11-21 15:08 2332项目中使用的时间工具类,主要针对javascript中 ... -
企业中使用MapAbc开发应用
2009-08-22 09:41 2953在项目中使用地图时必须考虑企业的访问量和各种Map ... -
js操作select控件大全(包含新增、修改、删除、选中、清空、判断存在等)
2009-06-14 08:43 2982js 代码// 1.判断select选项中 是否存在Value ... -
JS的正则表达式
2009-05-17 09:10 1756校验是否全由数字组成 [code] function ... -
40种网页常用小技巧
2009-05-14 19:40 16951. oncontextmenu="window.e ... -
Ajax的学习应用
2009-05-11 17:01 1884Ajax的常用方式在java web 中的开发的应用代码如下: ... -
Prototype的源码分析
2009-05-11 16:52 2562/**这个文件是对xmlhttp ... -
XMLHTTP对象的API详解
2009-05-11 16:51 5051XMLHttpRequest 提供客户端同http服务器通 ... -
prototype的学习使用(二) Ajax的局部更新
2009-05-11 13:13 1919Ajax对象 上面提到的共通方法非常好,但是面对它吧,它们 ... -
prototype的学习使用(一)
2009-05-11 13:05 2059一些实用的函数这个类库带有很多预定义的对象和实用函数,这些东 ... -
iframe高度自适应问题
2009-05-09 08:15 3379iframe高度自适应问题是个难题,至少困扰了我很久,通过go ...
相关推荐
【Ajax常用实例代码】主要涵盖了Web开发中的几个关键应用场景,包括用户登录注册注销、数据库交互、跨页面数据传递、文本片段展示以及获取服务器信息。这些功能在构建动态、交互性强的Web应用时非常常见,而Ajax技术...
以下是对Ajax常用技术的详细说明: 1. **XMLHttpRequest对象**:Ajax的核心是XMLHttpRequest(XHR)对象,它是JavaScript内置的对象,负责与服务器进行异步通信。通过创建XMLHttpRequest实例,可以发送HTTP请求到...
下面是一个传统的AJAX请求的示例代码: ```javascript var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); else if (window....
### Ajax技术解析与示例代码详解 在现代Web开发中,Ajax(Asynchronous JavaScript and XML)是一种用于创建异步Web应用程序的技术。它允许网页在不重新加载整个页面的情况下,通过后台加载数据并更新部分页面内容...
《疯狂Ajax讲义》是由知名IT作者李刚编写的一本深入解析Ajax技术的教程,其源代码是书中实例和练习的实现,旨在帮助读者更好地理解和掌握Ajax的核心概念和技术。Ajax,全称Asynchronous JavaScript and XML(异步...
本资源主要探讨了Ajax常用的设计模式及其实际应用场景,这对于提升Web应用的用户体验和性能至关重要。 首先,我们来了解一下Ajax的核心组成部分: 1. JavaScript:它是实现Ajax交互的关键,通过创建XMLHttpRequest...
本压缩包包含了一些Java环境下进行Ajax编程常用的类库,下面将详细介绍这些类库及其在Ajax开发中的作用。 1. dom4j:这是一个Java的XML处理库,提供了丰富的API来读取、写入、修改和操作XML文档。在Ajax中,dom4j...
本教程的源代码应该包含了一个使用Ajax的小项目,你可以通过阅读和运行代码来加深对上述知识点的理解。这个项目可能是模拟一个简单的数据交互,比如从服务器获取数据并在页面上显示,或者将用户输入的数据发送到...
总结来说,ASP分页源代码是实现服务器端数据分块显示的脚本,而AJAX源代码则涉及利用JavaScript进行异步数据加载。两者结合,可以构建出既高效又用户体验良好的数据分页系统。在实际应用中,需要考虑性能优化、错误...
jQuery 中 AJAX 常用的方法总结 jQuery 是一个功能强大且流行的 JavaScript 库,它提供了许多有用的方法来处理 AJAX 请求。AJAX(Asynchronous JavaScript and XML)是一种创建交互式网页的技术,它允许网页从...
而"ajax常用等待图片"则是在进行Ajax请求时显示的一种视觉提示,让用户知道后台正在处理数据或加载内容。 当用户触发一个Ajax请求时,由于网络延迟或者服务器处理时间,用户可能需要等待一段时间才能看到结果。这...
全书内容由浅入深,充分考虑了Ajax学习者的特点,并在配套光盘中提供了书中实例的全部源代码,以方便读者能够举一反三,编写出适合需求的程序。 本书不仅适合Ajax技术的初学者,还能够帮助有一定编程...
本文将深入探讨Ajax的常用框架及其API,包括DWR (Direct Web Remoting),jQuery,Ext JS,MooTools和Prototype,以及Scriptaculous。 1. **DWR**:DWR是一款开源Java库,它允许JavaScript与服务器端的Java对象进行...
这段代码会在收到服务器响应后,将数据插入到id为'result'的元素中。 **总结** Ajax技术是现代Web开发中的重要组成部分,它使得网页交互更加高效、平滑。通过理解和掌握Ajax,开发者能够创建出更具吸引力的用户...
在压缩包中的"AJAX.sln"可能是一个包含使用AJAX技术的ASP.NET解决方案,而"Web"可能是一个项目文件夹,里面包含了使用AJAX的Web应用程序代码。开发者可以研究这些文件以了解AJAX在实际项目中的应用和实现方式,包括...
Base64和AjaxUpload上传文件代码实例是两种常用的文件上传方式,它们都可以实现文件上传到服务器端,但它们之间有着明显的区别。 Base64上传文件是一种基于文本编码的上传方式,它将文件转换为Base64字符串,然后将...
这篇博文"jQuery常用代码片段"很可能是为了分享一些实用的jQuery代码示例,帮助开发者提高工作效率。下面我们将深入探讨jQuery的一些核心功能和常见用法。 1. **选择器**: jQuery的选择器类似于CSS,可以轻松地选取...
在"Ajax控件集合"中,包含了各种常用的Ajax控件,这些控件可以帮助开发者轻松地在Web应用中实现Ajax功能。这些控件通常是由JavaScript、HTML和CSS构建的,并可能利用XML或其他数据格式来传递信息。以下是一些可能...