ajax
百科名片
读音:e:j^ks 。AJAX即“Asynchronous JavaScript and
XML”(异步JavaScript和XML),AJAX并非缩写词,而是由Jesse James
Gaiiett创造的名词,是指一种创建交互式网页应用的网页开发技术。
[]
主要包含了以下几种技术 Ajax(Asynchronous JavaScript + XML)的定义
基于web标准(standards-based
presentation)XHTML+CSS的表示;
使用 DOM(Document Object Model)进行动态显示及交互;
使用 XML 和 XSLT 进行数据交换及相关操作;
使用 XMLHttpRequest 进行异步数据查询、检索;
使用 JavaScript 将所有的东西绑定在一起。参见Ajax的提出者Jesse
James Garrett的原文,原文题目(Ajax: A New Approach to Web Applications)。
类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技
术。事实上,一些基于AJAX的“派生/合成”式(derivative/composite)的技术正在出现,如“AFLAX”。
AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括:、、、、及。
但是Opera不支持XSL格式对象,也不支持XSLT。
[]
发展史 该技术在1998年前后得到了应用。允许客户端脚本发送HTTP请求(XMLHTTP)的第一个组件由
Outlook Web Access小组写成。该组件原属于微软Exchange Server,并且迅速地成为了Internet Explorer
4.0的一部分。部分观察家认为,Outlook Web
Access是第一个应用了Ajax技术的成功的商业应用程序,并成为包括Oddpost的网络邮件产品在内的许多产品的领头羊。但是,2005年初,许
多事件使得Ajax被大众所接受。Google在它著名的交互应用程序中使用了异步通讯,如Google讨论组、Google地图、Google搜索建
议、Gmail等。Ajax这个词由《Ajax: A New Approach to Web
Applications》一文所创,该文的迅速流传提高了人们使用该项技术的意识。另外,对Mozilla/Gecko的支持使得该技术走向成熟,变得
更为易用。
AJAX前景非常乐观,可以提高系统性能,优化用户界面。AJAX现有直接框架
AjaxPro,可以引入AjaxPro.2.dll文件,可以直接在前台页面JS调用后台页面的方法。但此框架与FORM验证有冲突。另微软也引入了
AJAX组建,需要添加AjaxControlToolkit.dll文件,可以在控件列表中出现相关控件。
[]
优点和缺点 传统的web应用允许用户填写表单(form),当提交表单时就向web服务器发送一个请求。服务
器接收并处理传来的表单,然後返回一个新的网页。这个做法浪费了许多带宽,因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都
需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于
XML的web
service接口,并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少,结果我们就能看到响应更快
的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为
迅捷地回应用户动作,并避免了在网络上发送那些没有改变过的信息。
Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像
DHTML应用程序那样,Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着Ajax的成熟,一些简化Ajax使用方法的程序库也相继
问世。同样,也出现了另一种辅助程序设计的技术,为那些不支持JavaScript的用户提供替代功能。
对应用Ajax最主要的批评就是,它可能破坏浏览器后退按钮的正常行为。在动态更新页面的情况
下,用户无法回到前一个页面状态,这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙;
用户通常都希望单击后退按钮,就能够取消他们的前一次操作,但是在Ajax应用程序中,却无法这样做。不过开发者已想出了种种办法来解决这个问题,当中大
多数都是在用户单击后退按钮访问历史记录时,通过建立或使用一个隐藏的IFRAME来重现页面上的变更。(例如,当用户在Google
Maps中单击后退时,它在一个隐藏的IFRAME中进行搜索,然后将搜索结果反映到Ajax元素上,以便将应用程序状态恢复到当时的状态。)
一个相关的观点认为,使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的
解决方案也已出现,大部分都使用URL片断标识符(通常被称为锚点,即URL中#后面的部分)来保持跟踪,允许用户回到指定的某个应用程序状态。(许多浏
览器允许JavaScript动态更新锚点,这使得Ajax应用程序能够在更新显示内容的同时更新锚点。)这些解决方案也同时解决了许多关于不支持后退按
钮的争论。
进行Ajax开发时,网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考
虑。不给予用户明确的回应 ,没有恰当的预读数据
,或者对XMLHttpRequest的不恰当处理,都会使用户感到延迟,这是用户不欲看到的,也是他们无法理解的。通常的解决方案是,使用一个可视化的
组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。
一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax;
用JavaScript作的Ajax引擎,JavaScript的兼容性和DeBug都是让人
头痛的事;
Ajax的无刷新重载,由于页面的变化没有刷新重载那么明显,所以容易给用户带来困扰――用户
不太清楚现在的数据是新的还是已经更新过的;现有的解决有:在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等;
对串流媒体的支持没有FLASH、Java Applet好;
[]
Ajax图书 Ajax基础教程(亚马逊计算机榜首图书,国内第1本Ajax图书)
作 者: (美)阿斯利森,(美)舒塔 著,金灵 等译
出 版 社:
出版时间: 2006-2-1 字 数: 356000 版 次: 1 页 数: 253
印刷时间: 2006/02/01 开 本: 印 次: 纸 张: 胶版纸 I S B N : 9787115144812 包 装: 平装
Ajax技术应知应会90题
编著:卜维丰
改编:丁卫颖、付瑞锋
出版社:电子工业出版社
出版时间:2008年5月
开本:720*1000 1/16 印张:22.75 页数:354页
ISBN:978-7-121-06197-4 定价:39.80元(含光盘一张)
[]
基础应用 创建XMLHttpRequest 方法如下
XMLHttpRequest 类首先由Internet
Explorer以ActiveX对象引入,被称为XMLHTTP。 后来Mozilla﹑Netscape﹑Safari
和其他浏览器也提供了XMLHttpRequest类,不过它们创建XMLHttpRequest类的方法不同。
对于Internet Explorer浏览器:
xmlhttp_request = new
ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0
xmlhttp_request = new
ActiveXObject("Msxml2.XMLHTTP");
xmlhttp_request = new
ActiveXObject("Microsoft.XMLHTTP");
由于在不同Internet
Explorer浏览器中XMLHTTP版本可能不一致,为了更好的兼容不同版本的Internet
Explorer浏览器,因此我们需要根据不同版本的Internet
Explorer浏览器来创建XMLHttpRequest类,上面代码就是根据不同的Internet
Explorer浏览器创建XMLHttpRequest类的方法。
对于Mozilla﹑Netscape﹑Safari等浏览器
创建XMLHttpRequest 方法如下:xmlhttp_request = new
XMLHttpRequest();
如果服务器的响应没有XML mime-type
header,某些Mozilla浏览器可能无法正常工作。
为了解决这个问题,如果服务器响应的header不是text/xml,可以调用其它方法修改该header。
xmlhttp_request = new XMLHttpRequest();
xmlhttp_request.overrideMimeType('text/xml');
在实际应用中,为了兼容多种不同版本的浏览器,一般将创建XMLHttpRequest类的方
法写成如下形式:
try{
if( window.ActiveXObject ){
for( var i = 5; i; i-- ){
try{
if( i == 2 ){
xmlhttp_request = new ActiveXObject(
"Microsoft.XMLHTTP" ); }
else{
xmlhttp_request = new ActiveXObject(
"Msxml2.XMLHTTP." + i + ".0" );
xmlhttp_request.setRequestHeader("Content-Type","text/xml");
xmlhttp_request.setRequestHeader("Charset","gb2312"); }
break;}
catch(e){
xmlhttp_request = false; } } }
else if( window.XMLHttpRequest )
{ xmlhttp_request = new XMLHttpRequest();
if (xmlhttp_request.overrideMimeType)
{
xmlhttp_request.overrideMimeType('text/xml'); } } }
catch(e){ xmlhttp_request = false; }
发送请求了
可以调用HTTP请求类的open()和send()方法,如下所示:
xmlhttp_request.open('GET', URL, true);
xmlhttp_request.send(null);
open()的第一个参数是HTTP请求方式—GET,POST或任何服务器所支持的您想调用
的方式。 按照HTTP规范,该参数要大写;否则,某些浏览器(如Firefox)可能无法处理请求。
第二个参数是请求页面的URL。
第三个参数设置请求是否为异步模式。如果是TRUE,JavaScript函数将继续执行,而
不等待服务器响应。这就是"AJAX"中的"A"。
服务器的响应
这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的
onreadystatechange属性设置为要使用的JavaScript的函数名,如下所示:
xmlhttp_request.onreadystatechange
=FunctionName;
FunctionName是用JavaScript创建的函数名,注意不要写成
FunctionName(),当然我们也可以直接将JavaScript代码创建在onreadystatechange之后,例如:
xmlhttp_request.onreadystatechange =
function(){
// JavaScript代码段
};
首先要检查请求的状态。只有当一个完整的服务器响应已经收到了,函数才可以处理该响应。
XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。
readyState的取值如下:
0 (未初始化)
1 (正在装载)
2 (装载完毕)
3 (交互中)
4 (完成)
所以只有当readyState=4时,一个完整的服务器响应已经收到了,函数才可以处理该响
应。具体代码如下:
if (http_request.readyState == 4) { //
收到完整的服务器响应 }
else { // 没有收到完整的服务器响应 }
当readyState=4时,一个完整的服务器响应已经收到了,接着,函数会检查HTTP服
务器响应的状态值。完整的状态取值可参见W3C文档。当HTTP服务器响应的值为200时,表示状态正常。
处理从服务器得到的数据
有两种方式可以得到这些数据:
(1) 以文本字符串的方式返回服务器的响应
(2) 以XMLDocument对象方式返回响应
[]
基于Ajax的应用程序架构汇总 ·纯Javascript:应用程序框架
1.1 Bindows(自从2003年)
网址是:,Bindows是一个软件开发包
(SDK),它,通过强力联合DHTML,JavaScript,CSS和XML等技术,能生成高度交互的互联网应用程序-成为现代的桌面应用程序的强有
力对手。Bindows应用程序不要求下载和也不需要在用户端安装-仅要求有一个浏览器(也不需要Java,Flash或者ActiveX)。
Bindows有可能领导面向对象开发的AJAX应用程序的平台。
1.2 BackBase(自从2003年)
网址是:,是一个全面的浏览器端框架,支持丰
富的浏览器功能以及与.NET和Java的集成。
·商业化,来自于Backbase B.V(总部在Amsterdam,成立于2003年)。
1.3 DOJO(开发中;自从2004年9月)
网址是:,提供全面窗口小组件和浏览器-服务
器消息支持。
·为创建定制的Javascript窗口小组件提供框架支持。
1.4 Open Rico(开发中;自从2005年5月;基于早期的私有框架)
网址是:,是一多用途框架,支
持Ajax基础结构和用户交互。
1.5 qooxdoo(开发中;自从2005年5月)
网址是:,是另一个雄心勃勃
的框架,提供宽范围的UI支持和正在开发中的基础结构特性。
1.6 Tibet(开发中;自从2005年6月)
网址是:,目的是提供高度
可移植的和全面的Javascript API,结果是,可能自动生成大量的客户端代码。自称是"企业级Ajax"。
2 纯Javascript:基础结构框架
2.1 AjaxCaller(Alpha版本;自从5月2005年)
网址是:,是
一基本的线程安全的XMLHttpRequest包装器,主要针对Ajax新手,仍处于原始的alpha开发阶段,
2.2 Flash JavaScript集成包
网址是:
/doku.php?id=flashjs,允许JavaScript和Flash内容的集成
2.3 Google AJAXSLT(发行于2005年6月)
网址是:,是一个
Javascript框架,用来执行XSLT转换以及XPath查询。
2.4 HTMLHttpRequest(Beta版;始于2005年)
HtmlHttpRequest(
/javascript/htmlhttprequest/),它使用了XMLHttpRequest和Iframes以改进兼容性。
2.5 交互式网站框架(自从2005年5月)
交互式网站框架(
/,是一个项目,目的是从浏览器端对Ajax基础结构的多方面予以支持。自描述为"使用javascript,css,xml,和html来创造高度交互
网站的框架。包括一个定制的针对高度可读的javascript的xml分析器。实质上,是建立基于AJAX的网站的基础,还有另外一些通用脚本"。
2.6 LibXMLHttpRequest(发行于2003年6月)
libXmlRequest(
/servlet/connector?file=reference/2003/06/17/libXmlRequest.html),是
XMLHttpRequest的一个瘦包装器。
2.7 RSLite(x)
网站是:,是一个针
对XMLHttpRequest的瘦包装器。
2.8 Sack(在开发中,自从2005年5月)
网站是:
/sack-of-ajax/,是一个针对XMLHttpRequest的瘦包装器。
2.9 Sarissa(发行于2月,2003年)
网站是:,是一种Javascript
API,它封装了在浏览器端可以独立调用XML的功能。
2.10 XHConn(发行于自从4月,2005年)
网站是:,是一
个对XMLHttpRequest的瘦包装器。
2.11 Jquery
简洁的思想:几乎所有操作都是以选择DOM元素(有强大的Selector)开始,然后是对其
的操作(Chaining等特性)。
3 服务器端:多种语言
3.1 跨平台异步的接口工具箱(5月2005年)
CPAINT:,是一真正的支
持PHP和ASP/Vbscript的Ajax实现和JSRS(JavaScript远程脚本)实现。CPAINT提供给你需求的代码在后台实现AJAX
和JSRS,而返回的数据以JavaScript形式在前台操作,格式化和显示。这允许你创建能提供接近实时的反馈给用户的web应用程序。
3.2 SAJAX(可用,但是不是1.0版本;自从3月2005年)
网站是:,直接把调用
从Javascript发送到你的服务器端语言并再次回返。
3.3 Javascipt对象标志(JSON)和JSON-RPC
JSON(
/index.html),是一个"胖的自由的XML选择",而JSON-RPC()是一种远程过程协
议,类似于XML-RPC,强有力支持Javascript客户。
3.4 Javascript远程脚本(JSRS)(自从2000年)
网址是:
/test.htm,直接把调用从Javascript发送到你的服务器端语言并再次回返。
4 服务器端:Java
4.1 WebORB for Java(自从2005年8月)
网址:
/aboutWeborb.htm,是一个平台,支持开发AJAX和基于Flash的胖客户端应用程序,并可以把它们与Java对象和XML
Web服务相系起来。在线举例(http://)
4.2 Echo 2(自从3月2005年)
网址是:,允
许你用纯Java代码编写Ajax应用软件(范例())。
4.3 Direct Web Remoting (DWR)(2005年)
网址是:,是一个框架,用于
直接从Javascript代码中调用Java方法。
4.4 SWATO(2005年)
网址是:http://swato.dev.java.net/,是一套可重用的和良好集成的
Java/JavaScript库,它实现了一种更容易的方式来改变你的web应用程序的交互,它是通过AJAX方式实现。
5 服务器端:Lisp
5.1 CL-Ajax
网址:,实现Javascript直接调用
服务器端Lisp函数。
6 服务器端:.NET
6.1 WebORB for.NET(自从8月2005年)
网址:
/aboutWeborb.htm,是一个平台,用于开发AJAX和基于Flash的胖客户端应用程序,并能把它们连接到.NET对象和XML
Web服务。(在线举例(http://))
6.2 Ajax.NET(自从3月2005年)
网址是:,是一个
库,实现从Javascript到服务器端.NET的存取。
7 服务器端:PHP
7.1 AjaxAC(自从2005年4月)
网址是:,用单个的PHP类封装了完
整的应用程序。
7.2 JPSpan
网址是:
/doku.php,直接把Javascript调用传递到PHP函数。
7.3 XAJAX
网址是:,直接把Javascript调用传递到
PHP函数。
8 服务器端:Ruby
Ruby On
Rails()是一个通常的强力支持Ajax的web框架:
[]
开发Ajax应用面临的问题及解决方案 对程序员而言,开发Ajax应用最头痛的问题莫过于以下几点:
Ajax在本质上是一个浏览器端的技术,首先面临无可避免的第一个问题即是浏览器的兼容性问
题。各家浏览器对于JavaScript/DOM/CSS的支持总有部分不太相同或是有Bug,甚至同一浏览器的各个版本间对于
JavaScript/DOM/CSS的支持也有可能部分不一样。这导致程序员在写Ajax应用时花大部分的时间在调试浏览器的兼容性而非在应用程序本
身。因此,目前大部分的Ajax链接库或开发框架大多以js链接库的形式存在,以定义更高阶的JavaScript API
、JavaScript对象(模板)、或者JavaScript Widgets来解决此问题。如prototype.js。
Ajax技术之主要目的在于局部交换客户端及服务器之间的数据。如同传统之主从架构,无可避免
的会有部分的业务逻辑会实现在客户端,或部分在客户端部分在服务器。由于业务逻辑可能分散在客户端及服务器,且以不同之程序语言实现,这导致Ajax应用
程序极难维护。如有用户接口或业务逻辑之更动需求,再加上前一个JavaScript/DOM/CSS之兼容性问题,Ajax应用往往变成程序员的梦魇。
针对业务逻辑分散的问题,Ajax开发框架大致可分为两类:
将业务逻辑及表现层放在浏览器,数据层放在服务器:因为所有的程序以JavaScript执行
在客户端,只有需要数据时才向服务器要求服务,此法又称为胖客户端(fat
client)架构。服务器在此架构下通常仅用于提供及储存数据。此法的好处在于程序员可以充分利用JavaScript搭配业务逻辑来做出特殊的用户接
口,以符合终端用户的要求。但是问题也不少,主因在第一,JavaScript语言本身之能力可能不足以处理复杂的业务逻辑。第二,JavaScript
的执行效能一向不好。第三,JavaScript访问服务器数据,仍需适当的服务器端程序之配合。第四,浏览器兼容性的问题又出现。有些Ajax开发框架
如DWR企图以自动生成JavaScript之方式来避免兼容的问题,并开立通道使得JavaScript可以直接调用服务器端的Java程序来简化数据
的访问。但是前述第一及第二两个问题仍然存在,程序员必须费相当的力气才能达到应用程序之规格要求,或可能根本无法达到要求。
将表现层[2]、业务逻辑、及数据层放在服务器,浏览器仅有用户接口引擎(User
Interface engine);此法又称为(thin
client)架构,或中心服务器(server-centric)架构。浏览器的用户接口引擎仅用于反映服务器的表现层以及传达用户的输入回到服务器的
表现层。由浏览器所触发之事件亦送回服务器处理,根据业务逻辑来更新表现层,然后反映回浏览器。因为所有应用程序完全在服务器执行,数据及表现层皆可直接
访问,程序员只需使用服务器端相对较成熟之程序语言(如Java语言)即可,不需再学习JavaScript/DOM/CSS,在开发应用程序时相对容
易。缺点在于用户接口引擎以及表现层通常以标准组件的形式存在,如需要特殊组件(用户接口)时,往往须待原框架之开发者提供,缓不济急。如开源码Ajax
开发框架ZK目前支持及组件,尚无XAML之支持。
Ajax是以异步的方式向服务器提交需求。对服务器而言,其与传统的提交窗体需求并无不同,而
且由于是以异步之方式提交,如果同时有多个Ajax需求及窗体提交需求,将无法保证哪一个需求先获得服务器的响应。这会造成应用程序典型的多进程
(process)或多线程(thread)的竞争(racing)问题。程序员因此必须自行处理或在JavaScript里面动手脚以避免这类竞争问题
的发生(如Ajax需求未响应之前,先disable送出按钮),这又不必要的增加了程序员的负担。目前已知有自动处理此问题之开发框架似乎只有ZK。
[]
其它Ajax的解释 1.Ajax:著名希腊史诗伊利亚特中英雄埃阿斯的名字。
2.Ajax:荷兰著名足球俱乐部阿贾克斯,以培养青年球员而著称,并多次夺得欧洲冠军杯。
3.Ajax:亚甲斯炸药
4.Ajax:艾杰克斯铜锡铅轴承合金