热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Ajax技术概述与现状应用

AJAX全称为“AsynchronousJavaScriptandXML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合。Ajax并没有创造出某种具体的新技术,它所使用的所有技术都是在很

  AJAX全称为“Asynchronous Javascript and XML”(异步Javascript和XML),是指一种创建交互式网页应用的网页开发技术。

  Ajax技术是目前在浏览器中通过Javascript脚本可以使用的所有技术的集合。Ajax并没有创造出某种具体的新技术,它所使用的所有技术都是在很多年前就已经存在了,然而Ajax以一种崭新的方式来使用所有的这些技术,使得古老的B/S方式的Web开发焕发了新的活力,迎来了第二个春天。

  具体来说,Ajax基于以下的技术:

  XHTML:对应W3C的XHTML规范,目前是XHTML1.0。
  CSS:对应W3C的CSS规范,目前是CSS2.0
  DOM:这里的DOM主要是指HTML DOM,XML DOM包括在下面的XML中
  Javascript:对应于ECMA的ECMAScript规范
  XML:对应W3C的XML DOM、XSLT、XPath等等规范
  XMLHttpRequest:对应WhatWG的Web Applications1.0规范(-apps/current-work/)的一部分

  可以看出,除了XMLHttpRequest以外,所有的技术都是目前已经广泛使用,得到了广泛理解的基于Web标准的技术。而XMLHttpRequest虽然尚未被W3C采纳,其实已经是一个事实上的标准。几乎所有主流的浏览器,例如IE、Firefox、Netscape、Opera、Safari全部都支持这个技术。所以Ajax就是目前做Web开发最符合标准的技术。上述的所有技术都已经可以在浏览器中使用,因此用户不需要安装任何额外的软件(只需要一个浏览器,例如IE),就可以运行任何符合标准的Ajax应用。这对于Ajax技术的普及、降低部署维护的成本是非常重要的。

  此外,随着浏览器的发展,更多的技术还会被添加进Ajax的技术体系之中。例如,目前Firefox浏览器的最新版本已经可以直接支持矢量图形格式SVG。Firefox已经可以支持Javascript 2.0(对应ECMAScript 4.0规范)中的E4X(Javascript的XML扩展)。Firefox、Opera、和Safari浏览器还可以支持Canvas(也是Web Applications1.0规范的一部分),网络上已经有人开发出了使用Canvas技术制作的3D射击游戏的演示版。但是因为这些技术目前还没有得到市场占有率最高的IE浏览器的支持,因此目前只能被应用于一些有限的场合(例如,在企业/机关内部,可以要求用户只使用Firefox浏览器)。

  Ajax技术之中,最核心的技术就是XMLHttpRequest,它最初的名称叫做XMLHTTP,是微软公司为了满足开发者的需要,1999年在IE5.0浏览器中率先推出的。后来这个技术被上述的规范命名为XMLHttpRequest。它正是Ajax技术之所以与众不同的地方。简而言之,XMLHttpRequest为运行于浏览器中的Javascript脚本提供了一种在页面之内与服务器通信的手段。页面内的Javascript可以在不刷新页面的情况下从服务器获取数据,或者向服务器提交数据。而在这个技术出现之前,浏览器与服务器通信的唯一方式就是通过HTML表单的提交,这一般都会带来一次全页面的刷新。

  XMLHttpRequest的出现为Web开发提供了一种全新的可能性,甚至整个改变了人们对于Web应用由什么来组成的看法。在这个技术出现之前,由于技术上的限制,人们认为Web应用就是由一系列连续切换的页面组成的。因此整个Web应用被划分成了大量的页面,其中大部分是一些很小的页面。用户大部分的交互都需要切换并刷新整个页面,而在这个过程中(下一个页面完全显示出来之前),用户只能傻等,什么都做不了。这就是我们所习以为常的Web应用,10年以前就是这个样子。然而XMLHttpRequest技术的出现使得我们可以打破这种笨拙的开发模式,以一种全新的方式来做Web开发,为用户提供更好的交互体验。大量的探索者(自豪的说,也包括笔者在内)以XMLHttpRequest技术为基础,将一些古老的Web技术重新包装整合。经过了多年的不懈努力,终于在2005年开花结果。在这一年,出现了一个新的术语Ajax,来描述这样一类的技术和开发方式。

  与传统的Web开发不同,Ajax并不是以一种基于静态页面的方式来看待Web应用的。从Ajax的角度看来,Web应用仅由少量的页面组成,其中每个页面其实是一个更小型的Ajax应用。而一些简单的Ajax应用,例如一个简单的RSS阅读器,甚至只有一个页面。每个页面上面都包括有一些使用Javascript开发的Ajax组件。这些组件使用XMLHttpRequest对象以异步的方式与服务器通信,从服务器获取需要的数据后使用DOM API来更新页面中的一部分内容。因此Ajax应用与传统的Web应用的区别主要在3个地方:

  1. 不刷新整个页面,在页面内与服务器通信。

  2. 使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的的响应能力。

  3. 应用仅由少量页面组成。大部分交互在页面之内完成,不需要切换整个页面。

  由此可见,Ajax使得Web应用更加动态,带来了更高的智能,并且提供了表现能力丰富的Ajax UI组件。这样一类新型的Web应用叫做RIA(Rich Internet Application)应用。除了Ajax,还包括有Flash等技术。

  与1990年代末的DHTML相比,Ajax更加强调符合真正的Web标准的开发方式。Ajax对于现有基于Web标准的技术的利用程度比DHTML高出了很多。而DHTML声名狼藉,最终失败的最大原因就是在于不重视基于真正的Web标准来做开发。

  DHTML其实是浏览器大战的时代微软和Netscape为了吸引眼球而制造的一个名词,并没有得到W3C的认可。并且经常被开发人员滥用,制造出一大堆不符合真正的Web标准的Javascript脚本和HTML标记,常常只能运行在某种特定的浏览器中(主要是IE)。

  DHTML总是过于注重各种花哨的视觉效果,而Ajax最关注的问题则是真正改善Web应用可用性,这正是Ajax技术诞生的使命,甚至也正是Javascript脚本语言诞生的使命。跨浏览器自然是Web应用可用性的重要组成部分,只有基于真正的Web标准来做开发,才有可能跨浏览器为用户提供一致的交互体验。而跨浏览器仅仅是基于真正的Web标准做开发的一个原因。另外一个原因是,唯有这样,才能充分地利用Web标准发展的成果(例如上述的SVG、E4X等符合标准的技术),并且建造出向后兼容的Web应用。向后兼容的意思就是我们今天建造的Web应用,当明天用户都使用浏览器的新版本(例如IE 7.0)之后,不必再加以修改就能直接运行在这些新版本之上。这样可以降低Web应用的维护成本,并且可以真正达到改善可用性,使用户获得更好的交互体验的目标(想想看,假设用户将自己的浏览器升级为IE 7.0,并且访问一个她过去经常去的网站,突然发现网站的某个功能失效了,她会有什么感觉?)。做过多年Web开发的开发者都知道,以前专门为IE5.0开发的Web应用,尤其是使用了很多Javascript的应用,不加以修改和重新测试就运行在IE6.0上几乎是不可能的。在这里就是没有做到向后兼容。Ajax技术会使得这些问题都不再存在。

  Ajax技术有两个推动力,Web标准的成熟和软件交互设计和可用性理论的成熟。在软件的可用性方面,除了一些通用的软件可用性和交互设计理论之外(这方面的经典著作包括《面向使用的软件设计》、《About Face 2.0》中文版等等),Web应用的可用性(Web usability)也是国外非常热门的一个研究领域,主要侧重于研究如何提高Web应用的可用性。美国在这个领域有着非常深入的研究,并且对于一些公共机构网站的可用性还有相关的法律条款来约束(Section508,508条款,于2001年6月21日成为美国的法律,直接影响了联邦部门和一些代理机构,还有为他们服务的网页设计师。这条法律也适用于政府投资项目和任何采用了该法律的州)。对于这些网站,如果无法达到条款上的一些可用性要求,网站经营者就违法了。如果是开发公司无法达到这些要求,就别指望从联邦政府手中拿到这些项目。

  为了对如何提高Web应用的可用性做出指导,W3C在20世纪90年代建立了Web Accessibility Initiative(WAI),致力于为网站建造者提供实现可访问性(与可用性同义)的方法和策略()Web可用性方面的经典著作包括《网站重构》。

  综上所述,可以认为Ajax就是Web标准和Web应用的可用性理论的集大成者。它极大地改善了Web应用的可用性和用户的交互体验,最终得到了用户和市场的广泛任何。所以可以说,Ajax就是用户和市场的选择。

  目前Ajax已经成为了Web应用的主流开发技术,大量的业界巨头已经采纳并且在大力推动这个技术的发展。最近的动态包括:

  1. IBM、Oracle、Yahoo!、BEA、RedHat、Novell等页界领先的公司启动了Open Ajax项目。致力于为Ajax开发建造先进强大的的开发工具。IBM在2月底已经发布了Open Ajax项目的Ajax Toolkit Framework(ATF)1.0,是一个基于Eclipse IDE的Ajax开发工具。

  2. 微软开发了自己的Ajax框架Altas,不过主要是和服务器端他们自己的ASP.NET框架配合工作。

  3. Sun虽然行动迟缓,但是也将Ajax技术列入了J2EE的blueprint(蓝图)中,作为J2EE技术的有益的补充。

  除了上述这些公司之外,Google公司不可不提,因为正是他们率先采用Ajax技术建造出了一大堆非常出色的应用,才将Ajax技术引到了聚光灯下。Google公司建造的Ajax应用包括Google Maps、GMail、Google Suggest等等,其中公认最优秀最复杂的Ajax应用是Google Maps。由于完全基于Ajax技术来建造Google Maps的界面,Google Maps提供了远远超越其竞争对手的地图服务的交互体验。如果说Google后台的地图技术并不存在巨大优势的话,那么Ajax技术和优秀的交互设计成为了他们压倒竞争对手的最后一根稻草。最终使得Google Maps脱颖而出,获得了用户的青睐。

  我们可以对比一下微软前后的两个地图服务就可以看出差别。

  微软公司所提供的旧的地图服务:。是传统Web应用的代表,性能很差而且极其难用。

  微软公司所推出了新的地图服务:。新的地图服务包括这个网站上的很多其他服务完全基于Ajax技术来建造,获得了极好的可用性。这个地图可以看作是在Google推出了Google Maps服务之后,微软公司痛定思痛的产物,在很多地方模仿了Google Maps。

  Ajax的典型应用除了Google Maps,还有微软的Windows Live、Yahoo!的Flickr等等。此外国内新浪的blog也使用了一些Ajax的技术。


推荐阅读
  • Microsoft即将发布WPF/E的CTP(Community Technology Preview)和SDK,标志着RIA(Rich Internet Application)技术的新里程碑。更多详情及下载链接请参见MSDN官方页面。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • 本文探讨了如何通过WebBrowser控件在用户点击输入框时自动显示图片验证码。该过程可能涉及JavaScript事件的触发与响应。 ... [详细]
  • ServletContext接口在Java Web开发中扮演着重要角色,它提供了一种方式来获取关于整个Web应用程序的信息。通过ServletContext,开发者可以访问初始化参数、共享数据以及应用资源。 ... [详细]
  • 本文探讨了在不使用服务器控件的情况下,如何通过多种方法获取并修改页面中的HTML元素值。除了常见的AJAX方式,还介绍了其他可行的技术方案。 ... [详细]
  • 解决JAX-WS动态客户端工厂弃用问题并迁移到XFire
    在处理Java项目中的JAR包冲突时,我们遇到了JaxWsDynamicClientFactory被弃用的问题,并成功将其迁移到org.codehaus.xfire.client。本文详细介绍了这一过程及解决方案。 ... [详细]
  • 深入分析十大PHP开发框架
    随着PHP技术的发展,各类开发框架层出不穷,成为了开发者们热议的话题。本文将详细介绍并对比十款主流的PHP开发框架,旨在帮助开发者根据自身需求选择最合适的工具。 ... [详细]
  • 本文详细介绍了如何使用PHP检测AJAX请求,通过分析预定义服务器变量来判断请求是否来自XMLHttpRequest。此方法简单实用,适用于各种Web开发场景。 ... [详细]
  • 探讨如何真正掌握Java EE,包括所需技能、工具和实践经验。资深软件教学总监李刚分享了对毕业生简历中常见问题的看法,并提供了详尽的标准。 ... [详细]
  • 本文详细介绍了如何利用Go语言和WebSockets技术构建一个高效的实时聊天系统。随着网络应用的日益复杂化,实时交互成为了提升用户体验的关键要素之一。通过本指南,开发者可以学习到最新的技术和最佳实践。 ... [详细]
  • 理解文档对象模型(DOM)
    本文介绍了文档对象模型(DOM)的基本概念,包括其作为HTML文档的节点树结构,以及如何通过JavaScript操作DOM来实现网页的动态交互。 ... [详细]
  • 本文深入探讨了JavaScript中实现继承的四种常见方法,包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说,理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]
  • 本文将详细介绍如何在ThinkPHP6框架中实现多数据库的部署,包括读写分离的策略,以及如何通过负载均衡和MySQL同步技术优化数据库性能。 ... [详细]
  • 本文探讨了浏览器的同源策略限制及其对 AJAX 请求的影响,并详细介绍了如何在 Spring Boot 应用中优雅地处理跨域请求,特别是当请求包含自定义 Headers 时的解决方案。 ... [详细]
  • 本文将介绍如何利用Python爬虫技术抓取国内主流在线学习平台的数据,并以51CTO学院为例,进行详细的技术解析和实践操作。 ... [详细]
author-avatar
手机用户2602918163
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有