作者:empty 页数:115 出版社:empty |
第1部分:Ajax简介Ajax山HTML、JavaScript T 技术、DHTML和DOM组成, 这一杰出的方法可以将竿的Web界面转化成交互性的Ajax应用程序, 本系列的作者是一位Ajax专家, 他演示了这些技术如何协同工作一一从总体述到细节的讨论一一使高效的Web开发成为现实。他还揭开了Ajax核心概念的神秘面纱, 包括XMLHttpRequest对象。五年前, 如果不知道XML, 您成是一只无人重视的丑小鸭。十八个月前, Ruby成了关注的中心, 不知道Ruby的程序员只能坐冷板凳了。今天, 如果想跟上最新的技术时尚, 那您的口标就是Ajax.但是, Ajax不仅仅是一种时尚, 它是一种构建网站的强大方法,而且不像学习一种全新的语言那样闲难。请访问A iax技术资中心, 这是有仆在详细探讨Ajax是什么之前, 先让我们花儿分了解关Ajax编程模型信息的一站式中Ajax做什么, 日前, 编写应用程序时有两种基本的选择:心:包括很多文档、教程、论坛, blog、两者是类似的,桌面应用程序通常以CD为介质(有时候可从网站下载)开完全安装到您的计算机上,桌面应用程序可能使用互联网下载更新, 但运行这些应用程序的代码在桌面计算机上。Web应用程序运行在某处的Web服务器上——毫不奇怪, 要通过Web浏览器访问这种应用程序。不过,比这些应用程序的运行代码放在何处更重要的是,应用程序如何运转以及如何与其进行交互。桌面应用程序股很快(就在您的计算机上运行,不用等待互联网连接),具有漂亮的用户界面(常和操作系统有关)和非凡的动态性,可以单击、选择、输入、打开菜单和子菜单、到处邀游,基本上不需要等待,另方面, Web应用程序是最新的潮流, 它们提供了在桌面上不能实现的服务(比如Amazon.com和eBay) .但是, 伴随着Web的强大面出现的是等待, 等待服务器响应, 等待屏幕新, 等待请求返回和生成新的页面,虽然这样说过于简略了, 但基本的概念就是如此。您可能已经猪到, Ajax尝试建立桌面应用程序的功能和交互性, 与不断更新的Web应用程序之间的桥梁, 可以使用像桌面应用程序中常见的动态用户界面和漂亮的控件, 不过是在Web应用程序中,还等什么呢?我们米看看Ajax如何将笨拙的Web界面转化成能迅速响应的Ajax应用程序吧,老技术,新技巧在谈到Ajax到, 实际上涉及到多种技术, 要灵活地运用它必须深入了解这我不同的技术(本系列的头儿篇文章将分别讨论这些技术》。好消息是您可能已经非常熟悉其中的大部分技术,更好的是这些技术都很容易学习, 并不像完整的编程讲言(如Java或Ruby) 郝样难,下面是Ajax应用程序所用到的基本技术;我们来进一步分析这些技术的职责,以后的文章中我将深入讨论这些技术,目前只要熟悉这些组件和技术就可以了,对这共代码越熟悉,就越容易从对这些技术的零放了解转变到真正把握这些技术《同时也真正打开了Web床用程序开发的大门) ,XMLHttpRequest对象要了解的一个对象可能对您来说也是最陌生的, 即X HL HttpRequest。这是一个JavaScript对象, 创建该对象很简单,如单1所示,
下一期文章中将述步讨论这个对象,现在要知道这是处理所有服务器通信的对象、维续阅读之前,先停下来想想:通过XMLHttpRequest对象与服务器进行对话的是JavaScript技术, 这不是一般的应用程序, 这恰恰是Ajax的强大功能的来源,在般的Web应用程序中, 用户填写表单字段并单击Sub mlt按钮。然后整个表单发送到服务器, 服务器将它转发给处理表单的脚本(通常是PHP或Java, 也可能是CGI进程或者类似的东西) , 脚木执行完成后再发送回全新的更面, 该页面可能是带有己经填充某些数据的新表单的HTML.也可能是确认页面,或者是只有根据原来表单中输入数据选择的某些选项的爽面。当然,在服务器上的脚本或程序处理和返网新表单时用户必须等符,所幕变成一片空白,等到服务器返回数据后再重新绘制。这就是交互性养的原因,用户得不到立即反馈,因此感觉不同于桌面应用程序。Ajax基本上就是把JavaScript技术和XN LEtt pRa quest对象放在Web表单和服务器之向.当用户项写表单时, 数据发送给一些JavaScript代码而不是直接发送给服务器, 相反, JavaScript代码抽表单数据并向服务器发送请求, 同时用户落上的表单也不会闪烁, 消失或延迟。换句话说, JavaScript代码在客后发送请求, 用户甚至不知道请求的发出。更好的是, 请求是异步发送的, 就是说JavaScript代码(和用户)不用等待服务器的响应。因此用户可以继续输入数据、滚动屏和使用应用程序。然后, 服务器将数据返回JavaScript代码(仍然在Web表单中) , 后者决定如何处理这些数据。它可以迅速更新表单数据,让人感觉程序是立即完成的,表单没有捉交成刷新而用户得到了新数据。JavaScript代码甚至可以对收到的数据执行某种计算, 再发送另一个请求, 完全不需要用户孩!这就是XMLHttpRequest的强大之处, 它可以根据需要自行与服务器进行交互, 用户甚至可以完全不知道后发生的一切,结果就是类似丁桌面应用程序的动态、快速响应、高交互性的体验,但是背后又拥有互联网的全部强火力量。
加入一些JavaScript得到X HL HttpRequest的句柄后, 其他的JavaScript代码就常简单了。事实上, 我们将使用JavaScript代码完成+常基本的任务:wiki和新闻。任何新信息都能在这里找到。Ajax的定义潮便说一下, Ajax是Asynchronous JavaScript andXML(以及DHTML等) 的缩写, 这个短语是Adaptive Path的JesseJames Garrett发明的(请参岁考资鞋) , 按照Jesse的解释, 这不是个首字母缩写词。桌面应用程序Web应用程序HTML用于建立Web表单并确定应用程序其他部分使用的字段。JavaScript代码是运行Ajax应用程序的核心代码,帮助改进与服务器应用程序的通信。DHTML或Dynamic HTML, 用于动态更新表单,我们将使用div、span和其他动态HTML元素来标话HTML,文档对象模型DOM用半(通过JavaScript代码) 处理HTML结构和(某些情况下) 服务器返回的XML,获取表单数据:JavaScript代码很容易从HTML表单中取数据并发送到服务器。修改表单上的数据:更新表单也很简单,从设置字段值到迅速件换图像。解析HTML和XML:使用JavaScript代码操纵DOM(请参阅下一节) , 处理HTML表单服务器返回的XML数据的结构。
对于前两点, 需要非常熟悉got Elem at By idl万法, 如造单2所示。清单2.用JavaScript代码捕获和设置字段值x nl Http-nen Activexobject(“Microsoft.XMLHTTP“) ;//Get the value of the“phone fl eld and stuffit in a variable called phonevar phone=document.getElementById C phone ) .value;//Set some values on a form using anarraycal1ed responsedocument.getElementById( order ) .value-response[0] ;d acumen t.getElement By TdC address ) .value-response[1] ;这里没有特别需要注意的地方,真是好极了!您应该认识到这里并没有非常复杂的东西。只要掌握了XML ELt pRe quast.Ajax应用科序的其他部分就是如单2所示的简单JavaScript代码了, 混合有少量的HTML.同时, 还要用一点儿DOM, 我们就来石石电.以DOM结束
最后还有DOM, 即文档对象模型。可能对有些读者来说DOM有点儿令人生畏, HTML设计者很少使用它, 邮使JavaScript程序员也不大用到它, 除非要完成某项高端编程任务。大量使用DOM的是复杂的Java和C/C++程序, 这可能就是DOM彼认为难以学习的原因。幸运的是, 在JavaScript技术中使用DOM很容易, 也非常直观。现在, 按照常规也许应该说明如何使用DOM, 或者至少要恰出些示例代码, 但这样做也可能误导您, 即使不理会DOM, 仍然能深入地探讨Ajax.这也是我准各采用的方法。以后的文章将再次讨论DOM, 现在只要知道可能需要DOM就可以了, 当需要在JavaScript代码和服务器之间传递XML和改变HTML表单的时候, 我们再深入研究DOM。没有它也能做一些有趣的工作, 因此现在就把DOM放到:边吧。获取Request对象有了上面的基研知识后, 我们来看看一些其体的例子。XML Htp Request是Ajax应用程序的核心, 而且对很多读者来说可能还比较附生,我们就从这里开始电,从毒单1可以看出,创建和使用这个对象非常简单,不是吗?等一等,还记得儿年前的那些讨厌的浏览器战争吗?没有一样东西在不同的浏览器上得到向样的结果。不管您是否相信, 这些战争仍然在继续, 虽然规模较小、但令人奇怪的是, XMI.ELte Re quast成了这场战争的牺牲品之一, 因此获得X HL HttpRequest对象可能需要采用不同的方法, 下面我将详细地进行解释。使用Microsoft浏览器Microsoft浏览器InternetExplorer使用MSXML解析器处理XML(可以通过参考资料进一步了解MSXML) .因此如果编写的Ajax应用程序要和Inte met Explorer打交道, 那么必须用一种特殊的方式创对象,仙并不是这么简单, 根据Inte met Explorer中安装的JavaScript技术版本不同.MSXML实际上有两种不同的版本, 因此必须对这两种情况分别编写代码。请参阅壶单3.其中的代码在Microsoft浏览器上创定了一个X HL HttpRequest。