把握前沿网络开发技术——增加网站新商机的Ajax

技术与开发

目前,网络已高度发达,深入到了我们生活的方方面面。那么,在Web应用开发方面,什么需求最迫切呢?那就是高度动态、快速反应、强交互性、占用服务器资源少的网页技术,比如:电子地图、新型博客等。Ajax就在这种需求下应运而生!本期,就教大家认识和学习这门最具“钱”途的开发技术。

Ajax,即Asynchronous JavaScript and XML(异步JavaScript和XML),由Jesse James Garrett于2005年在《Ajax:Web应用开发新方法》一文中首次提出,随后在Google的推动下迅速成为Web 2.0时代最热门的开发技术。不管是传统网站还是新兴的Web 2.0网站,都以使用Ajax技术为时髦,而Ajax也确实以其出色的效果,极大地改善了Web应用的交互性,在界面的丰富性和快速响应上逼近了桌面应用。在此情形下,作为即将走上职场从事Web应用开发的大学生朋友,学习并掌握Ajax开发技术是十分必要的。

Ajax开发者的“钱”途

正如一位资深的Web应用开发专家所言:“Ajax不是什么高级技术,却是最实用最讨巧的技术,能让平庸的网页瞬间变得神奇,因此开发者可以以自己的喜好排斥许多网络技术,然而却无法将Ajax拒之门外。”而Ajax之父Jesse James Garrett也毫不掩饰对Ajax的赞美:“在所有Web的交互设计中,Ajax无疑是最富魅力的,这也是它在诞生不久便获得超乎想象的广泛认可的主要原因。”

Google可谓不遗余力,在其主要产品Google Maps、Suggest和Gmail上都大量使用Ajax技术,而大多数人也是通过这些产品获得对Ajax技术的直观感受的。Google之后,Yahoo、Microsoft等亦快速跟进,将Ajax技术应用在Flicker、MSN Space上。国内网站自然也不会袖手旁观,一些大网站纷纷在部分频道中尝试应用Ajax,许多小网站更是全盘Ajax化,并以此吸引或留住访客。而在企业应用中,开发人员也开始使用Ajax技术来改善B/S项目的交互性。

自Ajax诞生以来,对它的研究一直是Web开发技术的热点,目前JSP、Asp.net、PHP等主要的Web应用开发工具都有了成熟的解决方案,尤其是各种开源的Ajax框架,更是为开发者提供了良好的Ajax开发环境。

由于Ajax特别有利于新兴网站的发展,目前已在网站应用上全面开花,新兴网站的普及率高达90%。有业内专家预测,今后,对Ajax程序员的需求将持续增大。3年内,不懂Ajax技术的程序员将会被逐渐淘汰。由此可见,Ajax虽不是进入Web应用开发的敲门砖,但绝对是提升自己技术地位的垫脚石,而且Ajax也能充分张扬显示出前卫的技术形象,使贴有Ajax标签的开发者在同时尚结合得越来越紧密的网络职场更受青睐。

揭开Ajax的面纱

Ajax是一种创建交互式网页应用的开发技术。它并不是一项独立的技术,而是几种网络开发技术的集合,它包括使用XHTML与CSS的标准表现、使用DOM进行动态显示及交互、使用XML和XSLT 进行数据交换及相关操作、使用XMLHttpRequest进行异步数据传输、使用JavaScript将所有的东西绑定在一起。这个令初学者费解的定义来自Jesse James Garrett。其实通俗或初浅地说,Ajax是综合利用多种技术实现网页按需部分刷新的技术,它可以消除传统网页一有更新就要重新加载整个网页的弊病。

谈及Ajax,总要拿它同传统网络应用作比较。图1来自Jesse James Garrett的《Ajax:Web应用开发新方法》,它权威地阐释了Web应用的传统模式和Ajax模式的异同。

13-f15-1.jpg

从图中可以看出,传统模式是按照浏览器端提交HTTP请求给服务器,服务器作处理后,返回一个新的HTML页面给浏览器端的路径进行交互的,这必然导致用户每次提交申请后都要等待服务器的响应和界面的刷新。

而Ajax模式在浏览器端和服务器端引入了一个中间层,即用JavaScript编写的Ajax引擎,它负责渲染用户界面,并协助浏览器端与服务器的通讯。当用户提交申请时,Ajax引擎先对申请进行处理,只有那些需要服务器处理的申请,如数据提交、加载新的页面代码、获取新数据等,才由Ajax引擎与服务器使用XML进行异步通讯。而那些不需要服务器响应的申请,以及从服务器返回的信息,则由Ajax引擎加以处理,然后通过调用DOM(文档对象模型)对部分页面进行刷新。

当然Ajax技术也不是万能的。它比较适合应用在表单驱动的交互、实现多层级联菜单或目录树、多用户间的交流响应(如在线聊天室、文字直播或论坛)等方面,而在某些场合,如表单过于简单,页面需要更新大部分内容,或者必须支持回退操作等,使用Ajax技术要么是杀鸡用牛刀,要么是吃力不讨好。同时,Ajax还是发展中的技术,各种浏览器对Ajax的支持还有一定差异,需要开发者针对不同的浏览器进行特别设计,而且回退功能失效的问题依然没得到很好的解决,因此,开发者对某个Web应用是否适合使用Ajax技术,或者是否值得使用Ajax技术,在开发前须有一个正确的判断。

简单示例

本示例演示了Ajax如何从服务器获取XML文件信息并在不重载页面的情况下利用DOM将信息显示出来。示例由Ajax.html和Test.xml两个文件构成。

Ajax.html内容如下:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Ajax简单示例:访问XML通讯录</title>

<script type="text/javascript">

var http_request;

function startRequest(){

if(window.ActiveXObject){ //针对IE浏览器创建XMLHttpRequest对象

http_request=new ActiveXObject("Microsoft.XMLHTTP");

}else if(window.XMLHttpRequest){

http_request=new XMLHttpRequest(); //针对Mozilla等浏览器创建XMLHttpRequest对象

http_request.overrideMimeType('text/xml');

}

http_request.onreadystatechange=ShowTXL; //页面请求完成后调用ShowXML函数显示XML数据

http_request.open("GET","test.xml",true); //向服务器发出申请并要求返回数据

http_request.send(null);

}

function ShowTXL(){

if(http_request.readyState==4){ //服务器已返回所有数据

if(http_request.status==200){ //XMLHttpRequest准备就绪

document.getElementById("xmltable").innerHTML=http_request.responseText; //调用DOM更新部分页面

} } }

</script>

</head>

<body>

<form action="#">

<input type="button" value="访问XML通讯录" onclick="startRequest();"/>

<div id="xmltable"></div>

</form>

</body>

</html>

Test.xml内容如下:

<table border="1">

<tbody>

<tr>

<th>姓名</th>

<th>单位</th>

<th>电话</th>

</tr>

<tr>

<td>邹辉</td>

<td>千年软件公司</td>

<td>12345678</td>

</tr>

<tr>

<td>吴娟</td>

<td>富润会计事务所</td>

<td>87654321</td>

</tr>

</tbody>

</table>

将两个文件放到IIS服务器默认网站主目录中,然后用IE浏览,效果如图2所示。

限于篇幅,此示例未能展示Ajax的所有组成部分,但最核心的部分如XMLHttpRequest、DOM等已有所涉及,足以令大家窥斑知豹。不难看出,尽管在设计中应用Ajax技术的基本思路已经明晰,不过具体细节仍然过于繁冗,要自如地使用它并非易事。只有那些既有扎实的Web开发基本功,又对Ajax实现方法有透彻了解,同时还能熟练驾驭JavaScript、XMLhttpRequest、CSS、DOM、XML等多种技术的开发者,才能胜任Ajax应用的开发。因此,Ajax既是驱使普通开发者不断前行的动力,也是优秀设计师脱颖而出的机会。

13-f15-2.jpg

不管是JSP、ASP.NET、PHP还是CGI,Ajax都可以在几乎所有服务器端技术中实现,因此,使用这些技术的开发工具都可以用来开发Ajax。而像Microsoft、Borland等开发工具提供商也正在努力,以使旗下的产品能直接支持Ajax的开发。如Microsoft已正式发布了ASP.NET 2.0 Ajax框架,在专门的工具包支持下,可以在Visual Studio 2005中直接开发Ajax应用。为了降低Ajax开发难度,简化Ajax设计过程,以使Ajax在Web中遍地开花,许多组织和公司推出了为数众多的Ajax框架,如MS ASP.NET 2.0 AJAX Extensions(Atlas)、Sajax、DWR、Ajax.Net、Dojo 、Google AJAXSTL等,涵盖了Java、ASP.NET、PHP等主要平台。

如何入门

前面我们已经提到,Ajax包含多种技术,所以,首先我们必须有一门面向对象的高级语言基础,比如C++、VB。然后,我们需要学习网页制作技术HTML、CSS、XML等,进而,我们需要学习JavaScript、XMLHTTPRequest和DOM。其中,JavaScript是重中之重。

作为目前Web应用开发领域最受追捧的技术,Ajax的资源在众多开发者的研究和传播下变得十分丰富,从入门知识到高级应用都很容易在网上搜索到。不过,乱花虽然迷眼,有三本书还是不要轻意放过。

一本是阿斯利森.舒塔编著的《Ajax基础教程》。该书详细介绍了Ajax原理、模式、技术、工具和框架等,特别适合作Ajax入门用书。网上许多介绍Ajax的文章都源自该书,足见其影响之广。

另一本是克拉恩等编著的《Ajax实战》。如果你需要进一步提高Ajax开发水平,读读此书是大有裨益的,因为它几乎囊括了Ajax开发的所有领域,并对每个领域作了细致入微的讲解。

还有一本是国内作者编著的《征服Ajax——Web 2.0快速入门与项目实践》。如果你已掌握了Ajax的基本知识,打算从事实际项目的开发,不妨参考一下本书。

国内已有许多专门讨论Ajax技术的网站,如Ajax联盟(http://www.ajaxw3c.com)、Ajax中国(http://www.okajax.com)等,举凡教程、书藉、示例、源码、工具等都搜罗其中。而一些程序员社区,如CSDN、MSDN、天极网软件频道,都有大量的Ajax开发资讯供各种层次的开发者参考。