`
zhangljerry
  • 浏览: 143516 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

AJAX开发简略 (第一部分)

阅读更多
在使用浏览器浏览网页的时候,当页面刷新很慢的时候,你的浏览器在干什么?你的屏幕内容是什么?是的,你的浏览器在等待刷新,而你的屏幕内容是一片空白,而你在屏幕前苦苦的等待浏览器的响应。开发人员为了克服这种尴尬的局面,不得不在每一个可能需要长时间等待响应的页面上增加一个DIV,告诉用户“系统正在处理您的请求,请稍候……”。

  现在,有一种越来越流行越热的“老”技术,可以彻底改变这种窘迫的局面。那就是AJAX。如今,随着Gmail、Google-maps的应用和各种浏览器的支持,AJAX正逐渐吸引全世界的眼球。

一、AJAX定义
   AJAX(Asynchronous JavaScript and XML)其实是多种技术的综合,包括Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。其中:

  使用XHTML和CSS标准化呈现,使用DOM实现动态显示和交互,使用XML和XSTL进行数据交换与处理,使用XMLHttpRequest对象进行异步数据读取,使用Javascript绑定和处理所有数据。

  在AJAX提出之前,业界对于上述技术都只是单独的使用,没有综合使用,也是由于之前的技术需求所决定的。随着应用的广泛,AJAX也成为香饽饽了。

二、现状与需要解决的问题
  传统的Web应用采用同步交互过程,这种情况下,用户首先向HTTP服务器触发一个行为或请求的呼求。反过来,服务器执行某些任务,再向发出请求的用户返回一个HTML页面。这是一种不连贯的用户体验,服务器在处理请求的时候,用户多数时间处于等待的状态,屏幕内容也是一片空白。如下图:

  自从采用超文本作为Web传输和呈现之后,我们都是采用这么一套传输方式。当负载比较小的时候,这并不会体现出有什么不妥。可是当负载比较大,响应时间要很长,1分钟、2分钟……数分钟的时候,这种等待就不可忍受了。严重的,超过响应时间,服务器干脆告诉你页面不可用。另外,某些时候,我只是想改变页面一小部分的数据,那为什么我必须重新加载整个页面呢?!当软件设计越来越讲究人性化的时候,这么糟糕的用户体验简直与这种原则背道而驰。为什么老是要让用户等待服务器取数据呢?至少,我们应该减少用户等待的时间。现在,除了程序设计、编码优化和服务器调优之外,还可以采用AJAX。

三、为什么使用AJAX
  与传统的Web应用不同,AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介,从而消除了网络交互过程中的处理—等待—处理—等待缺点。用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写,通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。AJAX引擎允许用户与应用软件之间的交互过程异步进行,独立于用户与网络服务器间的交流。现在,可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作,内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。

  使用AJAX,可以为ISP、开发人员、终端用户带来可见的便捷:

  • 减轻服务器的负担。AJAX的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
  • 无刷新更新页面,减少用户心理和实际的等待时间。特别的,当要读取大量的数据的时候,不用像Reload那样出现白屏的情况,AJAX使用XMLHTTP对象发送请求并得到服务器响应,在不重新载入整个页面的情况下用Javascript操作DOM最终更新页面。所以在读取数据的过程中,用户所面对的不是白屏,是原来的页面内容(也可以加一个Loading的提示框让用户知道处于读取数据过程),只有当数据接收完毕之后才更新相应部分的内容。这种更新是瞬间的,用户几乎感觉不到。
  • 带来更好的用户体验。
  • 可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。
  • 可以调用外部数据。
  • 基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
  • 进一步促进页面呈现和数据的分离。
四、谁在使用AJAX
  在应用AJAX开发上面,Google当仁不让是表率。Orkut、Gmail、Google Groups、Google Maps、Google Suggest都应用了这项技术。Amazon的A9.com搜索引擎也采用了类似的技术。

  微软也在积极开发更为完善的AJAX应用:它即将推出代号为Atlas的AJAX工具。Atlas的功能超越了AJAX本身,包括整合Visual Studio的调试功能。另外,新的ASP.NET控件将使客户端控件与服务器端代码的捆绑更为简便。Atlas客户脚本框架(Atlas Clent Script Framework)也使与网页及相关项目的交互更为便利。但Visual Studio 2005中并不包含此项功能。

  微软最近宣布Atlas客户脚本框架将包含如下内容(详细资料请访问Atlas计划网站):

  • 一个可扩展的核心框架,它添加了JavaScript功能:如生命同时期管理、继承管理、多点传送处理器和界面管理。
  • 一个常见功能的基本类库,有丰富的字符串处理、计时器和运行任务。
  • 为HTML附加动态行为的用户界面框架。
  • 一组用来简化服务器连通和网络访问的网络堆栈。
  • 一组丰富的用户界面开发控件,如:自动完成的文本框、动画和拖放。
  • 处理浏览器脚本行为差异的浏览器兼容层面。

  典型的,微软将AJAX技术应用在MSN Space上面。很多人一直都对MS Space服务感到很奇怪,当提交回复评论以后,浏览器会暂时停顿一下,然后在无刷新的情况下把我提交的评论显示出来。这个就是应用了AJAX的效果。试想,如果添加一个评论就要重新刷新整个页面,那可真费事。

  目前,AJAX应用最普遍的领域是GIS-Map方面。GIS的区域搜索强调快速响应,AJAX的特点正好符合这种需求。

五、用AJAX改进你的设计
   AJAX虽然可以实现无刷新更新页面内容,但是也不是什么地方都可以用,主要应用在交互较多、频繁读数据、数据分类良好的Web应用中。现在,让我们举两个例子,看看如何用AJAX改进你的设计。

例子1:数据校验
  在输入form表单内容的时候,我们通常需要确保数据的唯一性。因此,常常在页面上提供“唯一性校验”按钮,让用户点击,打开一个校验小窗口;或者等form提交到服务器端,由服务器判断后在返回相应的校验信息。前者,window.open操作本来就是比较耗费资源的,通常由window. showModalDialog代替,即使这样也要弹出一个对话框;后者,需要把整个页面提交到服务器并由服务器判断校验,这个过程不仅时间长而且加重了服务器负担。而使用AJAX,这个校验请求可以由XMLHttpRequest对象发出,整个过程不需要弹出新窗口,也不需要将整个页面提交到服务器,快速又不加重服务器负担。例子2:按需取数据—级联菜单
  以前,为了避免每次对菜单的操作引起的重载页面,不采用每次调用后台的方式,而是一次性将级联菜单的所有数据全部读取出来并写入数组,然后根据用户的操作用JavaScript来控制它的子集项目的呈现,这样虽然解决了操作响应速度、不重载页面以及避免向服务器频繁发送请求的问题,但是如果用户不对菜单进行操作或只对菜单中的一部分进行操作的话,那读取的数据中的一部分就会成为冗余数据而浪费用户的资源,特别是在菜单结构复杂、数据量大的情况下(比如菜单有很多级、每一级菜又有上百个项目),这种弊端就更为突出。

  现在应用AJAX,在初始化页面时我们只读出它的第一级的所有数据并显示,在用户操作一级菜单其中一项时,会通过Ajax向后台请求当前一级项目所属的二级子菜单的所有数据,如果再继续请求已经呈现的二级菜单中的一项时,再向后面请求所操作二级菜单项对应的所有三级菜单的所有数据,以此类推……这样,用什么就取什么、用多少就取多少,就不会有数据的冗余和浪费,减少了数据下载总量,而且更新页面时不用重载全部内容,只更新需要更新的那部分即可,相对于后台处理并重载的方式缩短了用户等待时间,也把对资源的浪费降到最低。

例子3:读取外部数据
  AJAX可以调用外部数据,因此,可以对一些开发的数据比如XML文档、RSS文档进行二次加工,实现数据整合或者开发应用程序。六、AJAX的缺陷

  AJAX不是完美的技术。使用AJAX,它的一些缺陷不得不权衡一下:

  • AJAX大量使用了Javascript和AJAX引擎,而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持,Mozilla虽然也支持AJAX,但是提供XMLHttpRequest的方式不一样。所以,使用AJAX的程序必须测试针对各个浏览器的兼容性。
  • AJAX更新页面内容的时候并没有刷新整个页面,因此,网页的后退功能是失效的;有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。
  • 对流媒体的支持没有FLASH、Java Applet好。
  • 一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax。
分享到:
评论

相关推荐

    AJAX开发简略 (第一部分).pdf

    ### AJAX开发简略知识点概述 #### 一、引言 在传统的Web开发中,每当用户与网站进行交互时,如提交表单或点击链接,浏览器都会发送一个完整的HTTP请求到服务器,并等待服务器返回一个新的HTML页面。这个过程不仅...

    AJAX开发简略(第一版)

    **AJAX开发简略(第一版)** AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,提升了用户体验。...

    AJAX开发简略 (第二部分)

    【AJAX开发简略 (第二部分)】 在深入理解了AJAX的概念、作用及其潜在问题之后,如果决定将其应用于实际的开发工作中,就需要掌握如何有效使用AJAX的关键技术。AJAX涉及的技术主要包括JavaScript、XMLHttpRequest、...

    ajax开发简略

    1. **创建XMLHttpRequest对象**:在JavaScript中,Ajax的第一步是创建一个XMLHttpRequest对象。这个对象是所有Ajax交互的基础,它允许客户端与服务器进行通信。 2. **建立连接**:一旦有了XMLHttpRequest对象,就...

    AJAX开发简略PPT和相关AJAX开发例子代码下载.

    这个压缩包中的“AJAX开发简略[1]”可能包含了一个PPT文件,详细介绍了AJAX的基础概念和技术,以及一些示例代码,帮助开发者更好地理解和应用AJAX。学习这些内容,开发者可以创建更动态、响应更快的网页应用。

    AJAX开发简略 Ajax 学习

    在JavaScript中创建XMLHttpRequest对象是第一步,然后设置HTTP请求的类型(GET或POST)、URL以及是否异步处理。当请求被发送到服务器时,会触发状态改变,我们可以通过监听XMLHttpRequest对象的onreadystatechange...

    AJAX开发简略各种例题和文档

    本资源包“AJAX开发简略”提供了丰富的例题和文档,旨在帮助初学者快速理解和掌握AJAX的核心概念和应用。** ### 1. AJAX基础 - **XMLHttpRequest对象**:AJAX的核心是XMLHttpRequest对象,它允许JavaScript在后台与...

    AJAX开发简略含续.pdf

    - **级联菜单**:根据用户的第一个选择动态填充第二个选择的选项。 ##### 4. 文档对象模型(DOM) DOM将HTML文档视为一棵树,每个HTML元素都是树中的一个节点。通过DOM,可以轻松地访问和修改文档中的元素及其属性...

    AJAX开发简略

    **AJAX(Asynchronous JavaScript and XML)开发简略** AJAX,全称为异步JavaScript和XML,是一种在不重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现局部...

    AJAX开发简略(第一部分)

    开发人员为了克服这种尴尬的局面,不得不在每一个可能需要长时间等待响应的页面上增加一个DIV,告诉用户“系统正在处理您的请求,请稍候……”。现在,有一种越来越流行越热的“老”技术,可以彻底改变这种窘迫的...

    AJAX从入门到精通

    两本书 一本为AJAX新手快车道(已经加了书签目录) 一本为AJAX开发简略(含续一) 都是PDF格式的 第一本用来入门,第二本用来提高,同时工作的时候可以参考 推荐用foxit reader打开

    基于PHP的陈老师云点播 php版.zip

    【描述】中的信息虽简略,但我们可以推测这个项目可能包含了以下几个关键部分: 1. **PHP基础**:首先,理解PHP的基本语法、变量、控制结构、函数等是必要的。PHP常用于开发Web应用,因为它可以方便地与HTML结合,...

    网上购物系统(JavaBean+Servlet+jsp).zip

    【标题】"网上购物系统(JavaBean+Servlet+jsp)"是一个基于Java技术栈开发的电子商务应用程序,它利用了JavaBean、Servlet和JSP(JavaServer Pages)这三种核心技术来实现前端用户界面、业务逻辑处理以及数据存储交互...

    team-proj-09

    JavaScript是Web开发中不可或缺的一部分,常用于前端交互、后端服务器以及移动应用开发。它具有动态类型、原型化继承、基于对象和事件驱动的特点,使得其在构建复杂、高性能的网络应用时非常灵活。 【描述】项目...

    web:StackSync网页

    "StackSync网页 测试1"表明这是一个测试版本,可能是开发过程中的一个迭代,用于验证和优化StackSync的功能。测试通常包括对性能、兼容性、用户体验等方面的评估。 【标签】"JavaScript"是广泛使用的编程语言,特别...

    3. 函数:JavaScript函数是第一类对象,可以作为变量赋值,作为参数传递,也可以作为返回值。函数定义包括函数声明(function name(){})和函数表达式(如匿名函数或箭头函数)。 4. 对象:JavaScript的对象是一种...

Global site tag (gtag.js) - Google Analytics