AJAX技朮概述_javascript概述

 AJAX技朮方案

AJAX全称为”Asynchronous JavaScript and XML”(异步JavaScript和XML),

是指一种创建交互式网页应用的网页开发技术.

另外很多人对AJAX读音都不是很了解,正确读音应该为”ei zhai ke si”,国际音标为[‘eidзeks]

—————————————————-

主要包含了以下几种技术

.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浏览器作为运行平台.

这些浏览器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari.

但是Opera不支持XSL格式对象,也不支持XSLT.

—————————————————-

发展史

该技术在1998年前后得到了应用.

允许客户端脚本发送HTTP请求(XMLHTTP)的第一个组件由Outlook Web Access小组写成.

该组件原属于微软Exchange Server,并且迅速地成为了Internet Explorer 4.0[3]的一部分.

部分观察家认为,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开发时,网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑.

不给予用户明确的回应 [5],没有恰当的预读数据 [6],或者对XMLHttpRequest的不恰当处理[7],

都会使用户感到延迟,这是用户不欲看到的,也是他们无法理解的[8].

通常的解决方案是,使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容.

一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax;

用JavaScript作的Ajax引擎,JavaScript的兼容性和DeBug都是让人头痛的事;

Ajax的无刷新重载,由于页面的变化没有刷新重载那么明显,

所以容易给用户带来困扰――用户不太清楚现在的数据是新的还是已经更新过的;

现有的解决有:在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等;

对串流媒体的支持没有FLASH、Java Applet好;

—————————————————-

基础应用

　　创建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类的方法.

创建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年)

网址是:http://www.bindows.net,Bindows是一个软件开发包 (SDK),

通过强力联合DHTML,JavaScript,CSS和XML等技术,能生成高度交互的互联网应用程序-成为现代的桌面应用程序的强有力对手.

Bindows应用程序不要求下载和也不需要在用户端安装-仅要求有一个浏览器(也不需要Java,Flash或者ActiveX).

Bindows有可能领导面向对象开发的AJAX应用程序的平台.

1.2 BackBase(自从2003年)

网址是:http://www.backbase.com,是一个全面的浏览器端框架,支持丰富的浏览器功能以及与.NET和Java的集成.

·商业化,来自于Backbase B.V(总部在Amsterdam,成立于2003年).

1.3 DOJO(开发中;自从2004年9月)

网址是:http://dojotoolkit.org/,提供全面窗口小组件和浏览器-服务器消息支持.

·为创建定制的Javascript窗口小组件提供框架支持.

1.4 Open Rico(开发中;自从2005年5月;基于早期的私有框架)

网址是:http://openrico.org/demos.page,是一多用途框架,支持Ajax基础结构和用户交互.

1.5 qooxdoo(开发中;自从2005年5月)

网址是:http://qooxdoo.sourceforge.net/,是另一个雄心勃勃的框架,提供宽范围的UI支持和正在开发中的基础结构特性.

1.6 Tibet(开发中;自从2005年6月)

网址是:http://www.technicalpursuit.com/,目的是提供高度可移植的和全面的Javascript API,

结果是可能自动生成大量的客户端代码.自称是”企业级Ajax”.

——————————————-

.2 纯Javascript:基础结构框架

2.1 AjaxCaller(Alpha版本;自从5月2005年)

　　网址是:http://ajaxify.com/run/testAjaxCaller/,是一基本的线程安全的XMLHttpRequest包装器,

主要针对Ajax新手,仍处于原始的alpha开发阶段,

2.2 Flash JavaScript集成包

　　网址是:http://www.osflash.org/doku.php?id=flashjs,允许JavaScript和Flash内容的集成

2.3 Google AJAXSLT(发行于2005年6月)

　　网址是:http://goog-ajaxslt.sourceforge.net/,是一个Javascript框架,用来执行XSLT转换以及XPath查询.

2.4 HTMLHttpRequest(Beta版;始于2005年)

　　HtmlHttpRequest(http://www.twinhelix.com/javascript/htmlhttprequest/),它使用了XMLHttpRequest和Iframes以改进兼容性.

2.5 交互式网站框架(自从2005年5月)

　　交互式网站框架(http://sourceforge.net/projects/iwf /,是一个项目,

目的是从浏览器端对Ajax基础结构的多方面予以支持.自描述为”使用javascript,css,xml,和html来创造高度交互网站的框架.

包括一个定制的针对高度可读的javascript的xml分析器.实质上,是建立基于AJAX的网站的基础,还有另外一些通用脚本”.

2.6 LibXMLHttpRequest(发行于2003年6月)

　　libXmlRequest(http://www.whitefrost.com /servlet/connector?file=reference/2003/06/17/libXmlRequest.html),

是 XMLHttpRequest的一个瘦包装器.

2.7 RSLite(x)

　　网站是:http://www.ashleyit.com/rs/main.htm,是一个针对XMLHttpRequest的瘦包装器.

2.8 Sack(在开发中,自从2005年5月)

　　网站是:http://twilightuniverse.com/2005/05/sack-of-ajax/,是一个针对XMLHttpRequest的瘦包装器.

2.9 Sarissa(发行于2月,2003年)

　　网站是:http://sarissa.sf.net,是一种Javascript API,它封装了在浏览器端可以独立调用XML的功能.

2.10 XHConn(发行于自从4月,2005年)

　　网站是:http://xkr.us/code/javascript/XHConn/,是一个对XMLHttpRequest的瘦包装器.

——————————————————————

3 服务器端:多种语言

3.1 跨平台异步的接口工具箱(5月2005年)

　　CPAINT:http://cpaint.sourceforge.net/,是一真正的支持PHP和ASP/Vbscript的Ajax实现和JSRS(JavaScript远程脚本)实现.

CPAINT提供给你需求的代码在后台实现AJAX 和JSRS,而返回的数据以JavaScript形式在前台操作,格式化和显示.

这允许你创建能提供接近实时的反馈给用户的web应用程序.

3.2 SAJAX(可用,但是不是1.0版本;自从3月2005年)

　　网站是:http://www.modernmethod.com/sajax/,直接把调用从Javascript发送到你的服务器端语言并再次回返.

3.3 Javascipt对象标志(JSON)和JSON-RPC

　　JSON(http://www.crockford.com/JSON /index.html),是一个”胖的自由的XML选择”,

而JSON-RPC(http://www.json-rpc.org/)是一种远程过程协议,类似于XML-RPC,强有力支持Javascript客户.

3.4 Javascript远程脚本(JSRS)(自从2000年)

　　网址是:http://www.ashleyit.com/rs/jsrs/test.htm,直接把调用从Javascript发送到你的服务器端语言并再次回返.

4 服务器端:Java

4.1 WebORB for Java(自从2005年8月)

　　网址:http://www.themidnightcoders.com/weborb /aboutWeborb.htm,是一个平台,

支持开发AJAX和基于Flash的胖客户端应用程序,并可以把它们与Java对象和XML Web服务相系起来.

在线举例(http://www.themidnightcoders.com/examples)

4.2 Echo 2(自从3月2005年)

　　网址是:http://www.nextapp.com/products/echo2/,

允许你用纯Java代码编写Ajax应用软件(范例(http://demo.nextapp.com/InteractiveTest/ia)).

4.3 Direct Web Remoting (DWR)(2005年)

　　网址是:http://www.getahead.ltd.uk/dwr/,是一个框架,用于直接从Javascript代码中调用Java方法.

4.4 SWATO(2005年)

　　网址是:http://swato.dev.java.net/,是一套可重用的和良好集成的Java/JavaScript库,

它实现了一种更容易的方式来改变你的web应用程序的交互,它是通过AJAX方式实现.

5 服务器端:Lisp

5.1 CL-Ajax

　　网址:http://cliki.net/cl-ajax,实现Javascript直接调用服务器端Lisp函数.

6 服务器端:.NET

6.1 WebORB for.NET(自从8月2005年)

　　网址:http://www.themidnightcoders.com/weborb /aboutWeborb.htm,是一个平台,

用于开发AJAX和基于Flash的胖客户端应用程序,并能把它们连接到.NET对象和XML Web服务.

(在线举例(http://www.themidnightcoders.com/examples))

6.2 Ajax.NET(自从3月2005年)

　　网址是:http://ajax.schwarz-interactive.de/,是一个库,实现从Javascript到服务器端.NET的存取.

7 服务器端:PHP

7.1 AjaxAC(自从2005年4月)

　　网址是:http://ajax.zervaas.com.au/,用单个的PHP类封装了完整的应用程序.

7.2 JPSpan

　　网址是:http://jpspan.sourceforge.net/wiki/doku.php,直接把Javascript调用传递到PHP函数.

7.3 XAJAX

　　网址是:http://xajax.sf.net,直接把Javascript调用传递到PHP函数.

8 服务器端:Ruby

　　Ruby On Rails(http://www.rubyonrails.org/)是一个通常的强力支持Ajax的web框架:今天的文章AJAX技朮概述_javascript概述分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。