Internet学习记录：Ajax

Ajax

• 什么是Ajax
• 为什么需要Ajax富客户端
• 传统Web应用的局限
• AJAX与传统Web应用程序的对比
• 传统Web应用的局限
• Ajax的四个基本原则
• 真实世界的Ajax富客户端
• Ajax概述
• Ajax技术的特点
• 标准Ajax交互
• AJAX引擎中的几个主要技术
• • XMLHttpRequest
  • DOM
  • JavaScript
  • CSS
  • XML
• 几种主要技术之间的关系
• AJAX设计的目的和意义
• 使用Ajax改进现有站点
• 案例：使用Ajax和XSLT的动态搜索

什么是Ajax

Ajax这个概念的最早提出者Jesse James Garrett这样说

• Ajax是Asynchronous JavaScript and XML的缩写。
• Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用, 它包括
  • 使用XHTML和CSS标准化呈现
  • 使用DOM实现动态显示和交互
  • 使用XML和XSLT进行数据交换与处理
  • 使用XMLHttpRequest进行异步数据读取; 最后用JavaScript绑定和处理所有数据
• 技术上，Ajax极大地发掘了Web浏览器的潜力，开启了大量新的可能性
• 商业上，通过眼花缭乱的Ajax应用，普通大众更好地新一代Web应用
• Ajax采用一系列已有的甚至是老旧的技术， 将它们重新锻造、延伸，超越其原有的概 念，应付客户端所要面对的复杂情况

为什么需要Ajax富客户端

• 富客户端有两个要点：
  • “富”：是指客户端的交互模型要有多样化的输入方式和符合直觉的及时反馈手段
  • “客户端”：是与另一个独立的进程相互通信的程序，后者通常运行在服务器上。当多个客户端连接到同一个服务器上时， 可以在它们之间共享信息

传统Web应用的局限

• 网络延迟
  

  

• 异步交互

  • HTTP协议是一个请求/响应的无状态协议
  • 单向的通信协议
  • 客户端可以向服务器发起连接，但是服务器不可以向客户端发起连接
  • 传统的Web应用是建立在页面概念上的

AJAX与传统Web应用程序的对比

传统Web应用的局限

• 独占或瞬态的使用模式
  • Alan Cooper定义了两种主要的使用方式：瞬态的(transient)和独占的(sovereign)
  • 瞬态应用每天偶尔用一下，总是作为次要的活动，突发性的使用
  • 独占应用需要应付用户每天几个小时的持续使用
• 基于Web页面的方案对于瞬态应用是足够的，但是对于独占应用还远远不够

Ajax的四个基本原则

• 浏览器中的是应用而不是内容
  

  

• 服务器交付的是数据而不是内容
  • 传统Web应用中，服务器在每个步骤都需要把模板文件、内容和数据混合发送给浏览器。但是实际上当向购物车中添加一件物品的时候， 服务器真正需要相应的仅仅是更新一下购物车的价格
  • Ajax应用可以通过多种方式来做这个事情
  • Ajax应用的网络通信流量主要集中在加载的前期，此后通信效率则会有效得多。通信流量减少
    

    
    

    

• 用户交互变得流畅而连续
  

  

• 有纪律的严肃编程
  • Ajax应用编程提交给用户运行的应用将会一直运行，直到用户关闭程序为止。
  • 相比之下，Ajax的代码库会比传统的Web 应用大很多，对代码库进行良好的组织非常重要。

真实世界的Ajax富客户端

• Google Maps
• 是结合了地图浏览和搜索引擎的产物。地图可以自由地通过文本来查询。
• 地图是Ajax驱动的
  • 触发下载新地图数据的操作不是点击一个特定的链接，而是用户的操作，用户的工作流程并没有被与服务器的通信所打断
  • 请求本身是异步的，当获取新数据时，相关的链接、缩放控件以及其它功能仍然可用

Ajax概述

Ajax技术的特点

• 网页中包含JavaScript代码而不是冗长的数据
• 服务器不必重复构造新网页
• 减少网络负担
• Framework比较多，比如： MagicAjax.NET，Anthem.NET， Ajax.NET Professional，Atlas，
• jQuery, Google GWT, IBM Ajax Toolkit Framework(ATF)

标准Ajax交互

AJAX引擎中的几个主要技术

XMLHttpRequest

• XMLHttpRequest对象的方法
  

  

• XMLHttpRequest对象的属性
  

  

• 获得XMLHttpRequest对象
  

  

• XMLHttpRequest发送请求
  

  

• XMLHttpRequest的回调函数监测请求
  

  

  
  

  

DOM

• DOM是给HTML和XML文件使用的一组API。它提供了文件的结构表述，可以改变其中的内容及可见物。其本质是建立网页与Script或程序语言沟通的桥梁。所有Web开发人员可操作及建立文件的属性、方法及事件都以对象来展现

JavaScript

• 在AJAX中JavaScript则是XMLHttpRequest和DOM交互桥梁和Ajax 引擎工作的主要推动力。JavaScript通过调用XMLHttpRequest的属性和方法来获取服务端数据，然后调用DOM的API来更新Web页面的内容。实现整个页面的无刷新更新页面

CSS

• CSS为Web页面元素提供了一种可重用的可视化样式定义的方法，它提供了简单而又强大的方法，以一致的方式定义和使用可视化样式。在Ajax应用中，用户界面的样式可以通过CSS独立修改

XML

• 通过XML（Extensible MarkuP Language），可以规范的定义结构化数据， 是网上传输的数据和文档符合统一的标准。用XML表述的数据和文档，可以很容易的让所有程序共享。
• Ajax进行数据通信的数据规范还有其他的规范，如JSON

几种主要技术之间的关系

AJAX设计的目的和意义

• 减轻服务器的负担
• 无刷新更新页面，减少用户实际和心理等待时间
• 基于标准化的并被广泛支持和技术，并且不需要插件或下载小程序
• AJAX可以调用外部数据
• AJAX使Web中的界面与应用分离

使用Ajax改进现有站点

• Customize Me Now 1.0 站点地图
  

  

• 原系统界面
  

  

• 采用Ajax后的系统界面
  

  

• Customize Me Now 2.0 站点地图
  

  

案例：使用Ajax和XSLT的动态搜索

• Ajax模型的流程图

  • 服务器端生成数据，客户端将这些数据直接插进页面

  

  • 通过Ajax将XML和XSLT文档合并，并且显示结果，避免了手工调用DOM方法，减少了JavaScript的代码

• 设置客户端

  • 根据用户的姓名搜索电话簿

• 启动搜索过程

  • 服务器端的PHP代码获得用户输入的信息，运行数据库查询，动态创建XML文档，静态的XSLT文档将动态创建的XML转换成HTML

  • 

• 服务器端的XML文档示例
  

  

  
  

  

  
  

  

• 合并XML和XSLT文档
  

  

• 对结果应用CSS
  

  

• 使Ajax支持书签