走过平凡人生、留下平凡足迹 注册 | 登陆
浏览模式: 标准 | 列表分类:AJAX

如何学习AJAX

现在浏览器端以 JavaScript 为核心,基于各种 Web 标准(即:早已完成标准化的XHTML/CSS/DOM/XML/XSLT 和正在进行标准化的XMLHTTP)的技术正在加速整合,Ajax 就是这一系列技术的一个统称。
 
虽然网络上已经有大量的相关资源,但是为了打好基础,认真读上几本书还是很有必要的。
 
好在 Ajax 并不是什么全新的技术,它仅仅是传统技术的发展和增值,是对于这些基于 Web 标准的传统技术的重新包装,使其更加适合于企业应用,并且和服务器端结合地更加紧密。因此学习 Ajax,首先就要从深入学习这些传统的技术开始。
 
我由浅入深地列出一些我读过的书籍,提供给大家做参考:
 
1、XHTML 教程(XHTML)   作者:Chelsea Valentine, Chris Minnick   New Riders 原版,人民邮电出版社中文版
是的,今天你最应该学习的是 XHTML,而不是 HTML。HTML 4.x 已经是一个被废弃了的标准,今天的标准是 XHTML 1.0。XHTML 1.0 也不是 XHTML 最新的版本,但是它是目前唯一得到浏览器广泛支持和唯一实用的 XHTML 版本。

» 阅读全文

Tags: ajax

Ajax基础教程 2.1 - XMLHttpRequest对象概述

在使用XMLHttpRequest对象发送请求和处理响应之前,必须先用JavaScript创建一个XMLHttpRequest对象。由于XMLHttpRequest不是一个W3C标准,所以可以采用多种方法使用JavaScript来创建XMLHttpRequest的实例。Internet ExplorerXMLHttpRequest实现为一个ActiveX对象,其他浏览器(如FirefoxSafariOpera)把它实现为一个本地JavaScript对象。由于存在这些差别,JavaScript代码中必须包含有关的逻辑,从而使用ActiveX技术或者使用本地JavaScript对象技术来创建XMLHttpRequest的一个实例。

» 阅读全文

Ajax基础教程 1.4 - 可用性问题

前面谈到的都是用户的期望,除此以外,可用性也不能不提。Ajax方法相当新,还没有多少成熟的最佳实践。不过,标准Web设计原则还是适用的。随着时间推移,当越来越多的人开始尝试这种方法时,就会发现可能存在哪些限制,并建立适当的指导原则。也就是说,你应该让用户来指导你。根据在应用中使用Ajax的方式,你可能会动态地改变页面中的某些部分,习惯于整个浏览器刷新的用户可能不会注意到与以前相比有什么变化。这个问题引出了一些新的特性,如37signals所普及的黄褪技术(Yellow Fade TechniqueYFT),这个特性已经用在Ajax的招牌应用Basecamp中了。

基本说来,YFT是指“取页面中有变化的部分,并置为黄色”。假设你的应用原本没有大量使用黄色,用户就很可能会注意到这种改变。过一段时间后,再让黄色逐渐褪色,直到恢复为原来的背景色。当然,你也可以选用你喜欢的其他颜色,只要能把用户的注意力吸引到有变化的部分。

可能YTF并不适用于你的应用,你也可以选择用一种不那么张扬但仍很有用的方式来提醒用户。Gmail在右上角显示了一个闪动的红色“Loading”加载记号,提醒用户正在获取数据(见图1-7)。

1-7 Gmail的“Loading”记号

究竟要使用YFT还是其他类似的技术,实际上取决于你的用户。最简单的方法是让一组用户代表来进行测试。可以通过文字问卷,也可以使用基于Web的原型应用,这要看你处在设计过程的哪个阶段。但是不论如何测试,在真正采用Ajax完成复杂设计之前都应该取得一些用户反馈。

而且要从小处做起。在刚开始使用Ajax时,不应该马上就创建一个可调整列的动态门户网站,而是应该先试着处理客户端验证,逐步转向服务器端。待有所了解后,可以再尝试更动态的使用,如填写一个下拉列表,或者设置某些默认文本。

不管你要如何应用Ajax,记住别做稀奇古怪的事情。我们知道,这不算是一个学术性的建议。不过,目前这方面还没有严格的规则。先听听用户怎么说,部署之前一定要先做测试,而且要记住,如果太过古怪,用户很快就会点击“跳过本页”链接跳过你精心设计的这些部分。

要知道使用Ajax 时有几个常犯的错误。我们已经讨论过,有变化时如何向用户提供可视化的提示,不仅如此,Ajax还会以其他方式改变标准的Web方法。首先,不同于IFRAME和隐藏框架,通过XHR做出请求不会修改浏览器的历史栈。在许多情况下这没有什么问题(你可能会点击后退箭头,只是要看看是不是什么都没有改变,但这么做能有几次呢?),不过,如果你的用户确实想用后退按钮,就有问题了。

其次,与其他基于浏览器的方法不同,Ajax不会修改地址栏中显示的链接,这表明你不能轻松地为一个页面建立书签,或者向朋友发送一个链接。对于许多应用来说,可能没有这个要求,但是如果你的网站专门为人提供行车路线之类的东西,就要针对这个问题提供一个解决方案。

有一点很重要,使用Ajax不要过度。记住,JavaScript会在客户端的浏览器上运行,如果有数千行JavaScript代码,可能会让用户感觉速度太慢。如果脚本编写不当,就会很快失去控制,特别是当通信量增加时。

Ajax允许你异步地完成操作,这个最大的优点同时也是它最突出的缺点。我们以前总是告诉用户,Web应用是以一种请求/响应模式完成操作的,用户也已经接受了这种思想。但是用了Ajax,就不再有这个限制。我们可以只修改页面的一部分,如果用户没想到这一点,他们很可能会被搞糊涂。所以,你要注意一定要让用户明白这一点,不要想当然地以为他们知道。记住,只要有疑问,就要请用户代表进行测试!

Tags: ajax, javascript, php

Ajax基础教程 1.3 - Web应用的发展历程

最初,所有Web页面都是静态的,用户请求一个资源,服务器再返回这个资源。什么都不动,什么都不闪。坦率地讲,对于许多Web网站来说,这样也是可以的,这些网站的Web页面只是电子形式的文本,在一处生成,内容固定,再发布到多处。在浏览器发展的最初阶段,Web页面的这种静态性不成问题,科学家只是使用因特网来交换研究论文,大学院校也只是通过因特网在线发布课程信息。企业界还没有发现这个新“渠道”会提供什么商机。实际上,以前公司主页显示的信息通常很少,无非是一些联系信息或者只是一些文档。不过没过多久,Web用户就开始有新的要求了,希望能得到更动态的网上体验。个人计算机成为企业不可或缺的资源,而且从个人宿舍到住家办公室开始出现越来越多的计算机。随着Windows 95的问世,随着人们已经领教了Corel WordPerfectMicrosoft Excel丰富的功能,用户的期望也越来越高。

1.3.1  CGI

要让Web更为动态,第一个办法是公共网关接口(Common Gateway InterfaceCGI)。与静态的Web获取不同,使用CGI可以创建程序,当用户发出请求时就会执行这个程序。假设要在Web网站上显示销售的商品,你可以利用CGI脚本来访问商品数据库,并显示结果。通过使用简单的HTML表单和CGI脚本,可以创建简单的网上店面,这样别人就可以通过浏览器来购买商品。编写CGI脚本可以用多种语言,从PerlVisual Basic都可以,这使得掌握不同编程语言的人都能编写CGI脚本。

不过,要创建动态的Web页面,CGI并不是最安全的方法。如果采用CGI,将允许别人在你的系统上执行程序。大多数情况下这可能没有问题,但是倘若某个用户有恶意企图,则很可能会利用这一点,让系统运行你本来不想运行的程序。尽管存在这个缺陷,到如今CGI仍在使用。

1.3.2  applet

很显然,CGI可以有所改进。19955月,Sun公司的John GageAndreessen(目前在Netscape通信公司)宣布一种新的编程语言诞生,这就是JavaNetscape Navigator为这种新语言提供了支持,最初是为了支持机顶盒。(你可能原认为最早涉足智能家居的公司是MicrosoftSony其实不然。)就像所有革命都机缘巧合一样,Java和因特网的出现恰到好处,在适当的时间、适当的地点横空出世,JavaWeb上发布仅几个月,就已经有成千上万的人下载。由于NetscapeNavigator支持Java,动态Web页面掀开了新的一页:applet时代到来了。

applet允许开发人员编写可嵌入在Web页面上的小应用程序。只要用户使用支持Java的浏览器,就可以在浏览器的Java虚拟机(Java Virtual MachineJVM)中运行applet。尽管applet可以做很多事情,但它也存在一些限制:通常不允许它读写文件系统,它也不能加载本地库,而且可能无法启动客户端上的程序。除了这些限制外,applet是在一个沙箱安全模型中运行的,这是为了有助于防止用户运行恶意代码。

对许多人来说,最初接触Java编程语言就是从applet开始的,当时这是创建动态Web应用的一种绝好的方法。applet允许你在浏览器中创建一个胖客户应用,不过要在平台的安全限制范围内。当时,在很多领域都广泛使用了applet,但是,Web社区并没有完全被applet“征服”[2]。胖客户的开发人员都很熟悉一个问题:必须在客户端上部署适当的Java版本。因为applet在浏览器的虚拟机中运行,所以开发人员必须确保客户端安装了适当版本的Java。尽管这个问题也可以解决,但它确实妨碍了applet技术的进一步推广。而且如果applet写得不好,很可能对客户主机造成影响,这使许多客户对于是否采用基于applet的解决方案犹豫不定。如果你还不太熟悉applet,请看图1-1,图中显示了Sun公司提供的时钟applet

1-1 Sun的时钟applet

1.3.3  JavaScript

与此同时,Netscape创建了一种脚本语言,并最终命名为JavaScript(建立原型时叫做Mocha,正式发布之前曾经改名为LiveWireLiveScript,不过最后终于确定为JavaScript)。设计JavaScript是为了让不太熟悉JavaWeb设计人员和程序员能够更轻松地开发applet(当然,Microsoft也推出了与JavaScript相对应的脚本语言,称为VBScript)。NetscapeBrendan Eich来设计和实现这种新语言,他认为市场需要的是一种动态类型脚本语言。由于缺乏开发工具,缺少有用的错误消息和调试工具,JavaScript很受非议,但尽管如此,JavaScript仍然是一种创建动态Web应用的强大方法。

最初,创建JavaScript是为了帮助开发人员动态地修改页面上的标记,以便为客户提供更丰富的体验。人们越来越认识到,页面也可以当作对象,因此文档对象模型(Document Object ModelDOM)应运而生。刚开始,JavaScriptDOM紧密地交织在一起,但最后它们还是“分道扬镳”,并各自发展。DOM是页面的一个完全面向对象的表示,该页面可以用某种脚本语言(如JavaScriptVBScript)进行修改。

最后,万维网协会(World Wide Web ConsortiumW3C)介入,并完成了DOM的标准化,而欧洲计算机制造商协会(ECMA)批准JavaScript作为ECMAScript规约。根据这些标准编写的页面和脚本,在遵循相应原则的任何浏览器上都应该有相同的外观和表现。

在最初的几年中,JavaScript的发展很是坎坷,这是许多因素造成的。首先,浏览器支持很不一致,即使是今天,同样的脚本在不同浏览器上也可能有不同的表现;其次,客户可以自由地把JavaScript关闭,由于存在一些已知的安全漏洞,往往鼓励用户把JavaScript关掉。由于开发JavaScript很有难度(你会用alert吗?),许多开发人员退避三舍,有些开发人员干脆不考虑 JavaScript,认为这是图形设计人员使用的一种“玩具”语言。许多人曾试图使用、测试和调试复杂的JavaScript,并为此身心俱疲,所以大多数人在经历了这种痛苦之后,最终只能满足于用JavaScript创建简单的基于表单的应用。

1.3.4  servletASPPHP……太多了

尽管applet是基于Web的,但胖客户应用存在的许多问题在applet上也有所体现。在大量使用拨号连接的年代(就算是今天,拨号连接也很普遍),要下载一个复杂applet的完整代码,要花很多时间,用户不能承受。开发人员还要考虑客户端上的Java版本,有些虚拟机还有更多的要求[3]。理想情况下只需提供静态的Web页面就够了,毕竟,这正是设计因特网的本来目的。当然,尽管静态页面是静态的,但是如果能在服务器上动态地生成内容,再把静态的内容返回,这就太好了。

Java问世一年左右,Sun引入了servlet。现在Java代码不用再像applet那样在客户端浏览器中运行了,它可以在你控制的一个应用服务器上运行。这样,开发人员就能充分利用现有的业务应用,而且,如果需要升级为最新的Java版本,只需要考虑服务器就行了。Java推崇“一次编写,到处运行”,这一点使得开发人员可以选择最先进的应用服务器和服务器环境,这也是这种新技术的另一个优点。servlet还可以取代CGI脚本。

servlet向前迈出了很大一步。servlet提供了对整个Java应用编程接口(API)的完全访问,而且提供了一个完备的库可以处理HTTP。不过,servlet不是十全十美的。使用servlet设计界面可能很困难。在典型的servlet交互中,先要从用户那里得到一些信息,完成某种业务逻辑,然后使用一些“打印行”创建HTML,为用户显示结果。代码清单1-1所示的代码就相当常见。

代码清单1-1 简单的servlet代码

response.setContentType("text/html;charset=UTF-8");

        PrintWriter out = response.getWriter();

 

        out.println("<html>");

        out.println("<head>");

        out.println("<title>Servlet SimpleServlet</title>");

        out.println("</head>");

        out.println("<body>");

        out.println("<h1>Hello World</h1>");

        out.println("<p>Imagine if this were more complex.</p>");

        out.println("</body>");

        out.println("</html>");

 

        out.close();

以上这一小段代码可以生成图1-2所示的一个相当简单的Web页面。

1-2 代码清单1-1中简单servlet的输出

servlet不仅容易出错,很难生成可视化显示,而且还无法让开发者尽展其才。一般地,编写服务器端代码的人往往是软件开发人员,他们只是对算法和编译器很精通,但不是能设计公司精美网站的图形设计人员。业务开发人员不仅要编写业务逻辑,还必须考虑怎么创建一致的设计。因此,很有必要将表示与业务逻辑分离。因此JSPJavaServer Pages)出现了。

在某种程度上,JSP是对 Microsoft Active Server Pages (ASP)做出的回应。MicrosoftSunservlet规约上所犯的错误汲取了教训,并创建了ASP来简化动态页面的开发。Microsoft增加了非常好的工具支持,并与其Web服务器紧密集成。JSPASP的设计目的都是为了将业务处理与页面外观相分离,从这个意义上讲,二者是相似的。虽然存在一些技术上的差别(Sun也从Microsoft那里学到了教训),但它们有一个最大的共同点,即Web设计人员能够专心设计页面外观,而软件开发人员可以专心开发业务逻辑。代码清单1-2显示了一个简单的JSP

代码清单1-2 简单的JSP

<%@page contentType="text/html"%>

<%@page pageEncoding="UTF-8"%>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

    "http://www.w3.org/TR/html4/loose.dtd">

 

<html>

     <head>

          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

          <title>Hello World</title>

     </head>

     <body>

 

     <h1>Hello World</h1>

     <p>This code is more familiar for Web developers.</p>

 

     </body>

</html>

这个代码会生成图1-3所示的输出。

1-3 简单JSP的输出

当然,MicrosoftSun并没有垄断服务器端解决方案。还有许多其他的方案在这个领域都有一席之地,如PHPColdFusion等等。有些开发人员喜欢新奇的工具,还有一些则倾向于更简单的语言。目前来看,所有这些解决方案完成的任务都是一样的,它们都是要动态生成HTML。在服务器端生成内容可以解决发布问题。不过,与使用胖客户或applet所做的工作相比,用户从原始HTML得到的体验就太过单调和苍白了。下面几节将介绍几种力图提供更丰富用户体验的解决方案。

1.3.5  Flash

并不是只有MicrosoftSun在努力寻找办法来解决动态Web页面问题。1996年夏天,FutureWave发布了一个名叫FutureSplash Animator的产品。这个产品起源于一个基于Java的动画播放器,FutureWave很快被Macromedia兼并,Macromedia则将这个产品改名为Flash

利用Flash,设计人员可以创建令人惊叹的动态应用。公司可以在Web上发布高度交互性的应用,几乎与胖客户应用相差无几(见图1-4)。不同于appletservletCGI脚本,Flash不需要编程技巧,很容易上手。在20世纪90年代末期,掌握Flash是一个很重要的特长,因为许多老板都非常需要有这种技能的员工。不过,这种易用性也是有代价的。

1-4 Flash应用

像许多解决方案一样,Flash需要客户端软件。尽管许多流行的操作系统和浏览器上都内置有所需的Shockwave播放器插件,但并非普遍都有。虽然能免费下载,但由于担心感染病毒,使得许多用户都拒绝安装这个软件。Flash应用可能还需要大量网络带宽才能正常地工作,另外,由于没有广泛的宽带连接,Flash的推广受到局限(因此产生了“跳过本页”之类的链接)。虽然确有一些网站选择建立多个版本的Web应用,分别适应于不同的连接速度,但是许多公司都无法承受支持两个或更多网站所增加的开发开销。

总之,创建Flash应用需要专用的软件和浏览器插件。applet可以用文本编辑器编写,而且有一个免费的Java开发包,Flash则不同,使用完整的Flash工具包需要按用户数付费,每个用户需要数百美元。尽管这些因素不是难以逾越的障碍,但它们确实减慢了Flash在动态Web应用道路上的前进脚步。

1.3.6  DHTML革命

MicrosoftNetscape发布其各自浏览器的第4版时,Web开发人员有了一个新的选择:动态HTMLDynamic HTMLDHTML)。与有些人想像的不同DHTML不是一个W3C标准,它更像是一种营销手段。实际上,DHTML结合了HTML、层叠样式表(Cascading Style SheetsCSS)、JavaScriptDOM。这些技术的结合使得开发人员可以动态地修改Web页面的内容和结构。

最初DHTML的反响很好。不过,它需要的浏览器版本还没有得到广泛采用。尽管IENetscape都支持DHTML,但是它们的实现大相径庭,这要求开发人员必须知道他们的客户使用什么浏览器。而这通常意味着需要大量代码来检查浏览器的类型和版本,这就进一步增加了开发的开销。有些人对于尝试这种方法很是迟疑,因为DHTML还没有一个官方的标准。不过,将来新标准有可能会出现。

1.3.7  XML衍生语言

20世纪90年代中期,基于SGML衍生出了W3C的可扩展标记语言(eXtensible Markup LanguageXML),自此以后,XML变得极为流行。许多人把XML视为解决所有计算机开发问题的灵丹妙药,以至于XML几乎无处不在。实际上,Microsoft就已经宣布,Office 12将支持XML文件格式。

如今,我们至少有4XML衍生语言可以用来创建Web应用(W3CXHTML不包括在内):MozillaXULXAMJ,这是结合Java的一种开源语言;MacromediaMXML MicrosoftXAML

XULXUL(读作“zool”)代表XML用户界面语言(XML User Interface Language),由Mozilla基金会推出。流行的Firefox浏览器和Thunderbird邮件客户端都是用XUL编写的。利用XUL,开发人员能构建功能很丰富的应用,这个应用可以与因特网连接,也可以不与因特网连接。为了方便那些熟悉DHTML的开发人员使用,XUL设计为可以跨平台支持诸如窗口和按钮等标准界面部件。虽然XUL本身不是标准,但它是基于各种标准的,如HTML 4.0CSSDOMXMLECMAScript等等。XUL应用可以在浏览器上运行,也可以安装在客户端主机上。

当然,XUL也不是没有缺点。它需要Gecko引擎,而且目前IE还没有相应的插件。尽管Firefox在浏览器市场中已经有了一定的份额,但少了IE的支持还是影响很大,大多数应用都无法使用XUL。目前开展的很多项目都是力图在多个平台上使用XUL,包括Eclipse

XAMLXAML(读作“zammel”)是Microsoft即将推出的操作系统(名为Windows Vista)的一个组件。XAML是可扩展应用标记语言(eXtensible Application Markup Language)的缩写,它为使用Vista创建用户界面定义了标准。与HTML类似,XAML使用标记来创建标准元素,如按钮和文本框等。XAML建立在Microsoft .NET平台之上,而且可以编译为 .NET类。

XAML的局限应当很清楚。作为Microsoft的产品,它要求必须使用Microsoft的操作系统。多数情况下特别是在大公司中,这可能不成问题,但是有些小公司使用的不是Microsoft的操作系统,总不能削足适履吧,就像是没有哪家公司会因为买家没有开某种牌子的车来就把他拒之门外。Vista交付的日期一再推迟,与此同时XAML也有了很大变化,不再只是一个播放器。据说,在未来几年内,我们可能会看到一个全新的XAML

MXMLMacromedia创建了MXML,作为与其Flex技术一同使用的一种标记语言。MXML是最佳体验标记语言(Maximum eXperience Markup Language)的缩写,它与HTML很相似,可以以声明的方式来设计界面。与XULXAML类似,MXML提供了更丰富的界面组件,如DataGridTabNavigator,利用这些组件可以创建功能丰富的因特网应用。不过,MXML不能独立使用,它依赖于FlexActionScript编程语言来编写业务逻辑。

MXMLFlash有同样的一些限制。它是专用的,而且依赖于价格昂贵的开发和部署环境。尽管将来.NET可能会对MXML提供支持,但现在Flex只能在J2EE应用服务器上运行,如TomcatIBMWebSphere,这就进一步限制了MXML的广泛采用。

XAMJ:让人欣喜的是,开源社区又向有关界面设计的XML衍生语言领域增加了新的成员。XAMJ作为另一种跨平台的语言,为Web应用开发人员又提供了一个工具。这种衍生语言基于Java,而Java是当前最流行的面向对象语言之一,XAMJ也因此获得了面向对象语言的强大功能。XAMJ实际上想要替代基于XAMLHTML的应用,力图寻找一种更为安全的方法,既不依赖于某种特定的框架,也不需要高速的因特网连接。XAMJ是一种编译型语言,建立在“clientlet”(小客户端)体系结构之上,尽管基于XAMJ的程序也可以是独立的应用,但通常都是基于Web的应用。在撰写本书时,XAMJ还太新,我们还没有听到太多批评的声音。不过,批评是肯定会有的,让我们拭目以待。

当谈到“以X开头的东西”时,别忘了W3C XForms规约。XForms设计为支持更丰富的用户界面,而且能够将数据与表示解耦合。毋庸置疑,XForms数据是XML,这样你就能使用现有的XML技术,如XPathXML Schema。标准HTML能做的,XForms都能做,而且XForms还有更多功能,包括动态检查域值、与Web服务集成等等。不同于其他的许多W3C规约,XForms不需要新的浏览器,你可以使用现在已有的许多浏览器去实现。与大多数XML衍生语言一样,XForms是一种全新的方法,所以它要得到采纳尚需时日。

1.3.8  基本问题

有了以上了解,你怎么想?即使是要求最苛刻的客户应用,也已经把Web作为首选平台。很显然,基于Web的应用很容易部署,这种低门槛正是Web应用最耀眼的地方。由于浏览器无处不在,而且无需下载和安装新的软件,用户利用基于浏览器的客户端就能很轻松地尝试新的应用。用户只需点击一个链接就能运行你的应用程序,而不用先下载几兆比特的安装程序才行。基于浏览器的应用也不考虑操作系统是什么,也就是说,不仅使用不同操作系统(如LinuxMac OS X)的人能运行你的应用程序,而且你也不必考虑针对不同的操作系统开发和维护多个安装包。

既然基于Web的应用是前所未有的好东西,那我们为什么还要写这本书?如果回头看看因特网的起源就可以知道,最初因特网实际上就是为了科学家们和学术机构间交换文章和研究成果,这是一种简单的请求/响应模式。那时不需要会话状态,也不需要购物车,人们只是在交换文档。但现在你有很多办法来创建动态的Web应用,如果想让应用真正深入人心,赢得大量的用户,就必须在浏览器上大做文章,这说明,因特网以请求/响应模式作为基础,由此带来的同步性对你造成了妨碍。

Microsoft WordIntuit Quicken之类的胖客户应用相比,Web模型当然只能根据一般用户需要做折中考虑。不过,由于Web应用很容易部署,而且浏览器的发展相当迅速,这意味着大多数用户都已经学会了适应。但是,还是有许多人认为Web应用只能算“二等公民”,给人的用户体验不是太好。因为因特网是一个同步的请求/响应系统,所以浏览器中的整个页面会进行刷新。最初,这种简单的请求并没有什么问题。如果用户做了一两处修改,就必须向服务器发回整个文档,而且要重新绘制整个页面。尽管这样是可行的,但是这种完全刷新的局限,意味着应用确实还很粗糙。

这并不是说开发人员只是袖手旁观,全然接受这种状况。Microsoft对于交互式应用有一定了解,而且对于这种标准请求/响应模式的限制一直都不满意,因此提出了远程脚本(remote scripting)的概念。远程脚本看似神奇,其实很简单:它允许开发人员创建以异步方式与服务器交互的页面。例如,顾客可以从下拉列表中选择状态,这样就会在服务器上运行一个脚本,计算顾客的运费。更重要的是,显示这些运费时无需刷新整个页面!当然,Microsoft的方案只适用于它自己的技术,而且需要Java,但有了这个进步,说明更丰富的浏览器应用并不是海市蜃楼。

对于同步页面刷新问题还有其他一些解决方案。针对Microsoft的远程脚本,Brent Ashley在创建JavaScript远程脚本(JavaScript Remote ScriptingJSRS)时开发了一个平台中立(独立于平台)的方案。JSRS依赖于一个客户端JavaScript库和DHTML,可以向服务器做异步的调用。与此同时,许多人利用了IFRAME标记,可以只加载页面中的某些部分,或者向服务器做“隐藏”的调用。尽管这是一个可行的方法,而且也为很多人所用,但它肯定不是最理想的,还有待改善。

1.3.9  Ajax

终于谈到这里了:客户希望得到一个功能更完备的应用,而开发人员想避开繁琐的部署工作,不想把可执行文件逐个地部署到数以千计的工作站上。我们已经做过很多尝试,但是任何方法都不像它原来标榜的那么完美。不过,最近一个极其强大的工具横空出世了。

是的,我们又有了一个新的选择,新的工具,可以创建的确丰富的基于浏览器的应用。这就是AjaxAjax不只是一个特定的技术,更应算是一种技巧,不过前面提到的JavaScript是其主要组件。我们知道,你可能会说“JavaScript根本不值一提”,但是由于Ajax的出现,人们对这种语言又有了新的兴趣,应用和测试框架再加上更优秀的工具支持,减轻了开发人员肩头的重担。随着Atlas的引入,MicrosoftAjax投入了大力支持,而名声不太好的Rails Web框架也预置了充分的Ajax支持。在Java世界中,Sun已经在其BluePrints Solutions Catalog中增加了许多Ajax组件。

坦率地讲,Ajax并不是什么新鲜玩艺。实际上,与这个词相关的“最新”术语就是XMLHttpRequest对象(XHR),它早在IE 5(于1999年春天发布)中就已经出现了,是作为 Active X控件露面的。不过,最近出现的新现象是浏览器的支持。原先,XHR对象只在IE中得到支持(因此限制了它的使用),但是从Mozilla 1.0Safari 1.2开始,对XHR对象的支持开始普及。这个很少使用的对象和相关的基本概念甚至已经出现在W3C标准中:DOM Level 3 加载和保存规约(DOM Level 3 Load and Save Specification)。现在,特别是随着Google MapsGoogle SuggestGmailFlickrNetflixA9等应用变得越来越炙手可热,XHR也已经成为事实上的标准。

与前面几页提到的方法不同,Ajax在大多数现代浏览器中都能使用,而且不需要任何专门的软件或硬件。实际上,这种方法的一大优势就是开发人员不需要学习一种新的语言,也不必完全丢掉他们原先掌握的服务器端技术。Ajax是一种客户端方法,可以与J2EE.NETPHPRubyCGI脚本交互,它并不关心服务器是什么。尽管存在一些很小的安全限制,你还是可以现在就开始使用Ajax,而且能充分利用你原有的知识。

你可能会问:“谁在使用Ajax?”前面已经提到,Google显然是最早采用Ajax的公司之一,而且已经用在很多技术上,随便说几个应用,如Google MapsGoogle SuggestGmailYahoo!也开始引入Ajax控件,另外Amazon提供了一个简洁的搜索工具,其中大量使用了这个技术,例如,在钻石的某一方面上移动滑块,这会带来动态更新的结果(见图1-5)。并不是每次改变你的查询标准时都会更新页面,而是在移动滑块时就会查询服务器,从而更快、更容易地缩小你的选择范围。

1-5 Amazon的钻石搜索页面

Netflix是一家很有名的DVD租借公司,它也使用了Ajax。当用户浏览影片时,可以得到更详细的信息。当顾客把鼠标放在一个影片的图片上时,这个影片的ID就会发送到中心服务器,然后会出现一个“气泡”,提供这个影片的更多细节(见图1-6)。同样,页面并不会刷新,每个影片的详细信息并不是放在隐藏的表单域中。利用这种方法,Netflix可以提供影片的更多信息,而不会把页面弄乱。顾客浏览起来也更容易,他们不必点击影片,看完影片详细信息后再点击回到影片列表页面;他们只需把鼠标停在影片上,就这么简单!我们想要强调的是,Ajax并不限于.com之类的网站使用,普通公司的开发人员也开始涉足这个技术,有些人已经在使用Ajax来改善原来很丑陋的验证方案,或者用于动态地获取数据了。

1-6 Netflix的浏览页面特性

关键在于,因特网默认的请求/响应模式有了重大转变,这正是Ajax的核心所在,尽管这并非全新的内容。Web应用开发人员现在可以自由地与服务器异步交互,这说明他们可以完成许多原本只能在胖客户上完成的任务。例如,当用户输入邮政编码时,可以验证它是否正确,然后自动用相应的城市名和州名填充到表单中的其他部分;或者,当用户选择美国时,可以引入美国各个州的一个下拉列表。以前也可以用其他方式模拟这些工作,但是使用Ajax的话,这些工作会更加简单。

那么,是谁发明了Ajax?要找出真正的源头,总免不了一场争论。不过有一点是确定的,20052月,Adaptive PathJesse James Garrett最早创造了这个词。在他的文章Ajax: A New Approach to Web ApplicationsAjaxWeb应用的一种新方法)中,Garrett讨论了如何消除胖客户(或桌面)应用与瘦客户(或Web)应用之间的界限。当然,当GoogleGoogle Labs发布Google MapsGoogle Suggest时,这个技术才真正为人所认识,而且此前已经有许多这方面的文章了。但确实是Garrett最早提出了这个好名字,否则我们就得啰啰嗦嗦地说上一大堆:异步(Asynchronous)、XMLHttpRequestJavaScriptCSSDOM等等。尽管原来把Ajax认为是Asynchronous JavaScript + XML(异步JavaScript + XML)的缩写,但如今,这个词的覆盖面有所扩展,把允许浏览器与服务器通信而无需刷新当前页面的技术都涵盖在内。

你可能会说:“哦,那有什么大不了的?”这么说吧,使用XHR而且与服务器异步通信,就能创建更加动态的Web应用。例如,假设你有一个下拉列表,它是根据另外一个域或下拉列表的输入来填写的。在正常情况下,必须在加载第一个页面时把所有数据都发送给客户端,然后使用JavaScript根据输入来填写下拉列表。这么做并不困难,但是会让页面变得很臃肿,取决于这个下拉列表到底有多“动态”,页面有可能膨胀得过大,从而出现问题。利用Ajax,当作为触发源的域有变化,或者失去了输入焦点,就可以向服务器发一个简单的请求,只要求得到更新下拉列表所需的部分信息即可。

来单独考虑一下验证。你写过多少次JavaScript验证逻辑?用JavaC#编写验证逻辑可能很简单,但是由于JavaScript缺乏很好的调试工具,再加上它是一种弱类型语言,所以用JavaScript编写验证逻辑实在是一件让人头疼的事情,而且很容易出错。服务器上还很有可能重复这些客户端验证规则。使用XHR,可以对服务器做一个调用,触发某一组验证规则。这些规则可能比你用JavaScript编写的任何规则都更丰富、更复杂,而且你还能得到功能强大的调试工具和集成开发环境(IDE)。

你现在可能又会说:“这些事情我早已经用IFRAME或隐藏框架做到了。”我们甚至还使用这种技术来提交或刷新过页面的一部分,而不是整个浏览器(页面)。不能不承认,这确实可行。不过,许多人认为这种方法只是一种修补手段,以弥补XHR原来缺乏对跨浏览器的支持。作为Ajax的核心,XHR对象设计为允许从服务器异步地获取任意的数据。

我们讨论过,传统的Web应用遵循一种请求/响应模式。如果没有Ajax,对于每个请求都会重新加载整个页面(或者利用IFRAME,则是部分页面)。原来查看的页面会放到浏览器的历史栈中(不过,如果使用了IFRAME,点击“后退”按钮不一定能得到用户期望的历史页面)。与此不同,用XHR做出的请求不会记录在浏览器的历史中。如果你的用户习惯于使用“后退”按钮在Web应用中进行导航,就可能会产生问题。

Tags: ajax, javascript, php

Ajax基础教程 1.2 - 浏览器历史

提到Web浏览器,大多数人都会想到无处不在的Microsoft Internet Explorer,直到最近像FirefoxSafariOpera之类的浏览器日益兴起,这种情况才稍有改观。许多新手可能会误认为IE是市场上的第一个浏览器,其实不然。实际上,第一个Web浏览器出自Berners-Lee之手,这是他为NeXT计算机创建的(这个Web浏览器原来取名叫WorldWideWeb,后来改名为Nexus),并在1990年发布给CERN的人员使用。Berners-LeeJean-Francois GroffWorldWideWeb移植到C,并把这个浏览器改名为libwww20世纪90年代初出现了许多浏览器,包括Nicola Pellow编写的行模式浏览器(这个浏览器允许任何系统的用户都能访问Internet,从UnixMicrosoft DOS都涵盖在内),还有Samba,这是第一个面向Macintosh的浏览器。

19932月,伊利诺伊大学Urbana-Champaign分校美国国家超级计算应用中心的Marc AndreessenEric Bina发布了Unix版本的Mosaic。几个月之后,Aleks Totic发布了MosaicMacintosh版本,这使得Mosaic成为第一个跨平台浏览器,它很快得到普及,并成为最流行的Web浏览器[1]。这项技术后来卖给了Spyglass,最后又归入Microsoft的门下,并应用在Internet Explorer中。

1993年,堪萨斯大学的开发人员编写了一个基于文本的浏览器,叫做Lynx,它成为了字符终端的标准。1994年,挪威奥斯陆的一个小组开发了Opera,到1996年这个浏览器得到了广泛使用。199412月,Netscape发布了Mozilla1.0版,第一个盈利性质的浏览器从此诞生。2002年又发布了一个开源的版本,这最终发展为200411月发布的、现在十分流行的Firefox浏览器。

Microsoft发布Windows 95时,IE 1.0是作为Microsoft Plus!包的一部分同时发布的。尽管这个浏览器与操作系统集成在一起,但大多数人还是坚持使用NetscapeLynxOperaIE 2.0有了很大起色,增加了对cookie、安全套接字层(Secure Socket LayerSSL)和其他新兴标准的支持。2.0版还可以用于Macintosh,从而成为Microsoft的第一个跨平台浏览器。不过,大多数用户还是很执着,仍然坚持使用他们习用的浏览器。

不过到了1996年夏天,Microsoft发布了IE 3.0版。几乎一夜之间,人们纷纷拥向IE。当时,Netscape的浏览器是要收费的,Microsoft则免费提供IE。关于浏览器领域谁主沉浮,因特网社区发生了两极分化,很多人担心Microsoft会像在桌面领域一样,在Web领域也一统天下。有些人则考虑到安全因素——果然不出所料,发布3.09天之后就报告了第一个安全问题。但是到1999年发布IE 5时,它已经成为使用最广的浏览器。

Tags: ajax, javascript, php

Ajax基础教程 1.1 - Web应用简史

Ajax技术可以提供高度交互的Web应用,给予用户更丰富的页面浏览体验。本书重点介绍Ajax及相关的工具和技术,主要内容包括XMLHttpRequest对象及其属性和方法、发送请求和处理响应、构建完备的Ajax开发工具、使用JsUnit测试JavaScript、分析JavaScript调试工具和技术,以及Ajax开发模式和框架等。本书中所有例子的代码都可以从Apress网站本书主页的源代码(Source Code)免费得到。本书适合各层次Web应用开发人员和网页设计人员阅读。
 

» 阅读全文

Tags: ajax, javascript, php

AJAX 技术在PHP中简单应用 二

3. 使用POST方式

  其实POST方式跟Get方式是比较类似的,只是在执行Ajax的时候稍有不同,我们简单讲述一下。

  假设有一个用户输入资料的表单,我们在无刷新的情况下把用户资料保存到数据库中,同时给用户一个成功的提示。

//构建一个表单,表单中不需要action、method之类的属性,全部由ajax来搞定了。
<form name="user_info">
姓名:<input type="text" name="user_name" /><br />
年龄:<input type="text" name="user_age" /><br />
性别:<input type="text" name="user_sex" /><br />
<input type="button" value="提交表单" onClick="saveUserInfo()">
</form>
//构建一个接受返回信息的层:
<div id="msg"></div>


  我们看到上面的form表单里没有需要提交目标等信息,并且提交按钮的类型也只是button,那么所有操作都是靠onClick事件中的saveUserInfo()函数来执行了。我们描述一下这个函数:

function saveUserInfo()
{
 //获取接受返回信息层
 var msg = document.getElementById("msg");
 //获取表单对象和用户信息值
 var f = document.user_info;
 var userName = f.user_name.value;
 var userAge = f.user_age.value;
 var userSex = f.user_sex.value;
 //接收表单的URL地址
 var url = "/save_info.php";
 //需要POST的值,把每个变量都通过&来联接
 var postStr = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;
 //实例化Ajax
 var ajax = InitAjax();
 //通过Post方式打开连接
 ajax.open("POST", url, true);
 //定义传输的文件HTTP头信息
 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 //发送POST数据
 ajax.send(postStr);
 //获取执行状态
 ajax.onreadystatechange = function() {
  //如果执行状态成功,那么就把返回信息写到指定的层里
  if (ajax.readyState == 4 && ajax.status == 200) {
   msg.innerHTML = ajax.responseText;
  }
 }
}


  大致使用POST方式的过程就是这样,当然,实际开发情况可能会更复杂,这就需要开发者去慢慢琢磨。

  4. 异步回调(伪Ajax方式)

  一般情况下,使用Get、Post方式的Ajax我们都能够解决目前问题,只是应用复杂程度,当然,在开发中我们也许会碰到无法使用Ajax的时候,但是我们又需要模拟Ajax的效果,那么就可以使用伪Ajax的方式来实现我们的需求。

  伪Ajax大致原理就是说我们还是普通的表单提交,或者别的什么的,但是我们却是把提交的值目标是一个浮动框架,这样页面就不刷新了,但是呢,我们又需要看到我们的执行结果,当然可以使用JavaScript来模拟提示信息,但是,这不是真实的,所以我们就需要我们的执行结果来异步回调,告诉我们执行结果是怎么样的。

  假设我们的需求是需要上传一张图片,并且,需要知道图片上传后的状态,比如,是否上传成功、文件格式是否正确、文件大小是否正确等等。那么我们就需要我们的目标窗口把执行结果返回来给我们的窗口,这样就能够顺利的模拟一次Ajax调用的过程。

  以下代码稍微多一点, 并且涉及Smarty模板技术,如果不太了解,请阅读相关技术资料。

上传文件:upload.html
//上传表单,指定target属性为浮动框架iframe1
<form action="/upload.php" method="post" enctype="multipart/form-data" name="upload_img" target="iframe1">

选择要上传的图片:<input type="file" name="image"><br />
<input type="submit" value="上传图片">
</form>
//显示提示信息的层
<div id="message" style="display:none"></div>
//用来做目标窗口的浮动框架
<iframe name="iframe1" width="0" height="0" scrolling="no"></iframe>


  处理上传的PHP文件:upload.php

<?php
 /* 定义常量 */
 //定义允许上传的MIME格式
 define("UPLOAD_IMAGE_MIME", "image/pjpeg,image/jpg,image/jpeg,image/gif,image/x-png,image/png");
 //图片允许大小,字节
 define("UPLOAD_IMAGE_SIZE", 102400);
 //图片大小用KB为单位来表示
 define("UPLOAD_IMAGE_SIZE_KB", 100);
 //图片上传的路径
 define("UPLOAD_IMAGE_PATH", "./upload/");
 //获取允许的图像格式
 $mime = explode(",", USER_FACE_MIME);
 $is_vaild = 0;
 //遍历所有允许格式
 foreach ($mime as $type)
 {
  if ($_FILES['image']['type'] == $type)
  {
   $is_vaild = 1;
  }
 }
 //如果格式正确,并且没有超过大小就上传上去
 if ($is_vaild && $_FILES['image']['size']<=USER_FACE_SIZE && $_FILES['image']['size']>0)
 {
  if (move_uploaded_file($_FILES['image']['tmp_name'], USER_IMAGE_PATH . $_FILES['image']['name']))
  {
   $upload_msg ="上传图片成功!";
  }
  else
  {
   $upload_msg = "上传图片文件失败";
  }
 }
 else
 {
  $upload_msg = "上传图片失败,可能是文件超过". USER_FACE_SIZE_KB ."KB、或者图片文件为空、或文件格式不正确";
 }
 //解析模板文件
 $smarty->assign("upload_msg", $upload_msg);
 $smarty->display("upload.tpl");
?>
模板文件:upload.tpl
{if $upload_msg != ""}
callbackMessage("{$upload_msg}");
{/if}
//回调的JavaScript函数,用来在父窗口显示信息
function callbackMessage(msg)
{
 //把父窗口显示消息的层打开
 parent.document.getElementById("message").style.display = "block";
 //把本窗口获取的消息写上去
 parent.document.getElementById("message").innerHTML = msg;
 //并且设置为3秒后自动关闭父窗口的消息显示
 setTimeout("parent.document.getElementById('message').style.display = 'none'", 3000);
}


  使用异步回调的方式过程有点复杂,但是基本实现了Ajax、以及信息提示的功能,如果接受模板的信息提示比较多,那么还可以通过设置层的方式来处理,这个随机应变吧。

  [ 结束语 ]

  这是一种非常良好的Web开发技术,虽然出现时间比较长,但是到现在才慢慢火起来,也希望带给Web开发界一次变革,让我们朝RIA(富客户端)的开发迈进,当然,任何东西有利也有弊端,如果过多的使用JavaScript,那么客户端将非常臃肿,不利于用户的浏览体验,如何在做到快速的亲前提下,还能够做到好的用户体验,这就需要Web开发者共同努力了。

Tags: ajax, php

AJAX 技术在PHP中简单应用 一

AJAX无疑是2005年炒的最热的Web开发技术之一,当然,这个功劳离不开Google。我只是一个普通开发者,使用AJAX的地方不是特别多,我就简单的把我使用的心得说一下。(本文假设用户已经具有JavaScript、HTML、CSS等基本的Web开发能力)

» 阅读全文

Tags: ajax, php

Records:3312345