`
love19820823
  • 浏览: 973918 次
文章分类
社区版块
存档分类
最新评论

Ajax: 一个建立Web应用的新途径

 
阅读更多

如果要问做什么事是最有吸引力,那就是创建Web应用。毕竟,上次你听到有人称赞某产品的交互设计是什么时候的事了?(除了iPod之外) 它们都很cool, 而且都是很创新的项目。

  抛开这些不管,Web设计者们对设计交互式的Web没有什么更好的办法,却对我们做桌面软件的同事投去少许羡慕的目光.桌面应用程序有丰富的界面以及对于Web程序来说无法比拟的响应能力。同样,Web的快速发展,在我们所提供的体验和用户从桌面应用程序所得到的体验间产生巨大的差距

  而如今差距正在消失。请看看“Google建议(Google Suggest)”. 观察它按你的输入显示建议条目的更新速度,几乎是立即更新的。再看看"Google Maps". 放大,用你的鼠标搬动和滚动。这些动作几乎是立即响应的,不用等待页面刷新。

  "Google Suggest"和"Google Maps" 是采用Ajax技术的两个典型例子。Ajax是Asynchronous JavaScript and XML的简称,它表现出一个Web开发上的根本转变,那就是,Web上可能做些什么.

  Ajax的定义  Ajax不是一个技术,它实际上是几种技术,每种技术都有其独特这处,合在一起就成了一个功能强大的新技术。Ajax包括:

XHTML和CSS 使用文档对象模型(Document Object Model)作动态显示和交互 使用XML和XSLT做数据交互和操作 使用XMLHttpRequest进行异步数据接收 使用JavaScript将它们绑定在一起   传统的web应用模型工作起来就象这样:大部分界面上的用户动作触发一个连接到Web服务器的HTTP请求。服务器完成一些处理---接收数据,处理计算,再访问其它的数据库系统,最后返回一个HTML页面到客户端。这是一个老套的模式,自采用超文本作为web使用以来,一直都这样用, 但看过《The Elements of User Experience》的读者一定知道,是什么限制了Web界面没有桌面软件那么好用。


图1: 传统Web应用模型(左)与Ajax模型的比较(右).

  这种旧的途径让我们认识到了许多技术,但它不会产生很好的用户体验。当服务器正在处理自己的事情的时候,用户在做什么?没错,等待。每一个动作,用户都要等待。

  很明显,如果我们按桌面程序的思维设计Web应用,我们不愿意让用户总是等待。当界面加载后,为什么还要让用户每次再花一半的时间从服务取数据?实际上,为什么老是让用户看到程序去服务器取数据呢?

  Ajax如何不同凡响  通过在用户和服务器之间引入一个Ajax引擎,可以消除Web的开始-停止-开始-停止这样的交互过程. 它就像增加了一层机制到程序中,使它响应更灵敏,而它的确做到了这一点。

  不像加载一个页面一样,在会话的开始,浏览器加载了一个Ajax引擎---采用JavaScript编写并且通常在一个隐藏frame中。这个引擎负责绘制用户界面以及与服务器端通讯。Ajax引擎允许用异步的方式实现用户与程序的交互--不用等待服务器的通讯。所以用户再不不用打开一个空白窗口,看到等待光标不断的转,等待服务器完成后再响应。


图 2: 传统Web应用的同步交互过程(上)和Ajax应用的异步交互过程的比较(下).

  通常要产生一个HTTP请求的用户动作现在通过JavaScript调用Ajax引擎来代替. 任何用户动作的响应不再要求直接传到服务器---例如简单的数据校验,内存中的数据编辑,甚至一些页面导航---引擎自己就可以处理它. 如果引擎需要从服务器取数据来响应用户动作---假设它提交需要处理的数据,载入另外的界面代码,或者接收新的数据---引擎让这些工作异步进行,通常使用XML, 不用再担误用户界面的交互。

  谁在使用Ajax   在采用Ajax的开发上面,Google做了巨大的投资。去年Google所有主要的产品都用了这项技术---Orkut, Gmail, 以及最近的beta版的Google Groups, Google Suggest和Google Maps---它们全是Ajax的应用。(要想了解更多这些Ajax实际的技术细节,请看它们的分析文章:Gmail, Google Suggest, Google Maps). 其它的像:Flickr, 采用许多人们喜欢的Ajax特性, 还有Amazon的A9.com搜索引擎也采用类似的技术。

  这些项目证明了Ajax不只是学术上的,也有许多真实世界成功应用。这不是什么实验室里的技术。Ajax的应用可大可小,从非常简单的,像单一功能的Google Suggest到非常复杂的Google Maps.

分享到:
评论

相关推荐

    一种建立Web应用的新途径—ajax

    Ajax作为一种创新的Web开发技术,已经深入到众多现代Web应用中,极大地改善了用户体验,提升了网页的交互性。然而,随着技术的发展,开发人员需要不断学习和适应新的工具、框架和最佳实践,以应对Ajax带来的挑战,...

    Ajax与J2EE技术在电信WebGIS中的应用

    通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新,显著提高了Web应用程序的交互性和用户体验。在电信WebGIS中,Ajax可以用来实现地图的平滑缩放和平移,提高地图操作的流畅度,减少用户等待时间。 ...

    Web 2.0 Security - Defending Ajax, RIA, and SOA.pdf

    随着Ajax、RIA和SOA技术的发展,Web应用变得更加复杂,同时也面临着更多的安全威胁。本书通过以下几点来阐述这些挑战: 1. **Ajax的安全性**:Ajax技术使得网页可以实现局部刷新,提高了用户体验,但同时也引入了跨...

    ajax十大框架

    Qooxdoo 支持复杂的用户界面和数据交互,为开发者提供了一种构建高度交互式 Web 应用的新途径。 ### 10. Spry Spry 是 Adobe 开发的一套 AJAX 库,以其丰富的 UI 组件和动态效果著称。Spry 提供了大量预定义的行为...

    ASP.NET AJAX Altas

    ##### 2.3 ASP.NET AJAX架构提供了一个新的途径 - **框架支持**:ASP.NET AJAX提供了一系列控件和API,帮助开发者更容易地实现AJAX功能。 - **降低复杂度**:通过封装复杂的AJAX操作,让开发者能够更加专注于业务...

    AJAX新手快车道.pdf

    AJAX是一项强大的技术,能够显著提升Web应用的性能和用户体验。对于新手而言,通过系统学习技术本质、构建个人技术地图以及掌握实用技巧,可以在较短的时间内成为AJAX领域的熟练开发者。同时,积极参与社区交流和...

    AJAX教程

    2. **构建技术地图**:随着学习的深入,建立起不同技术间的联系,形成一个全面的技术体系,有助于快速定位和解决问题。 3. **技巧掌握**:学习并运用有效的调试和优化技巧,如使用开发者工具、编写单元测试、代码...

    Ajax快速入门

    通过Ajax,开发者可以构建出响应更快、更友好且功能更丰富的Web应用。此外,Ajax的应用使得Web开发更加标准化、和谐高效。 #### 二、Ajax的组成部分 **1. XMLHttpRequest对象**:用于在后台与服务器交换数据,是...

    web2.0 & CRM

    Web2.0技术为客户提供了一个表达意见和建议的平台,同时也为企业提供了一个收集反馈信息的有效渠道。通过博客、论坛、社交网络等工具,企业可以更直接地与消费者沟通,并根据反馈调整产品或服务。这种双向交流有助于...

    AJAX开发简略(含配文代码).rar

    **AJAX(Asynchronous ...总结,AJAX 是构建动态、交互性强的 Web 应用的重要工具,通过JavaScript与服务器进行异步通信,显著提升了用户体验。理解其工作原理,熟练运用到项目中,是每个前端开发者必备的技能。

    book_Web_Code.rar

    每个单元作为一个独立的压缩包,这种结构有利于系统性地学习Web开发。例如,"unit1"可能涵盖HTML基础,"unit2"涉及CSS布局,"unit3"可能讲解JavaScript基本语法。这样的划分让学习者可以按部就班,先建立扎实的基础...

    基于stm32f407+lwip 的web server设备参数配置.rar

    LWIP(Lightweight IP)则是一个轻量级的TCP/IP协议栈,适用于资源有限的嵌入式系统,它为STM32F407这样的微控制器提供了网络连接能力。 基于STM32F407的Web Server项目,是为了实现设备通过网页进行参数配置的功能...

    javaweb 新年大礼

    6. **框架**:Spring框架是JavaWeb开发中最常用的一个,它提供了依赖注入、AOP(面向切面编程)、MVC组件以及数据库集成等功能。学习Spring Boot可以简化项目配置,而Spring MVC则用于构建RESTful API。 7. **Web...

    PHP教师成绩查询系统 WEB前端加ANDROID界面.zip

    总的来说,"PHP教师成绩查询系统"是一个整合了Web技术和移动端应用的综合实践项目,它锻炼了开发者在数据库管理、前后端交互、用户界面设计等方面的能力。通过这个系统,不仅可以提高教学管理效率,也为学习者提供了...

    SQL2005中如何建立HTTP的端点

    以下是一个JavaScript示例,展示如何通过AJAX(Asynchronous JavaScript and XML)发送SOAP请求: ```javascript function SendBatchRequest(strServerName, strUrlPath, strQuery) { var objXmlHttp = null; var...

    java必须看的经典书籍(强顶)

    "Struts快速学习指南"聚焦于Struts框架,这是Java EE领域的一个老牌MVC框架。Struts提供了一种组织应用程序的方式,便于处理HTTP请求和视图渲染。通过这本书,你可以学习如何使用Struts创建动态Web应用,理解MVC模式...

    ASP.NET课程设计案例精编

    ASP.NET是微软公司推出的一种基于.NET Framework的Web应用程序开发平台,它为开发者提供了构建动态、数据驱动的Web应用的强大工具和框架。本课程设计案例精编涵盖了ASP.NET的基础概念、核心组件以及实际应用,旨在...

    ASP.NET编程百例

    7. **ASP.NET MVC**:一个模型-视图-控制器架构,强调分离关注点,提供更灵活的开发模式。 8. **Web Forms与MVC的区别**:理解两者的设计哲学和应用场景,Web Forms更适合快速开发,而MVC则更适合大型、复杂的项目...

    前后端交互CodeWSM

    在IT行业中,前后端交互是构建现代Web应用的关键环节,CodeWSM可能是一个特定的工具、框架或方法论,用于优化这种交互。虽然没有详细的信息介绍CodeWSM,但我们可以根据这个主题探讨前后端交互的一般概念、常用技术...

Global site tag (gtag.js) - Google Analytics