Ajax引擎的原理和应用

d \ eab
f \ ghc
" k l
i \ +j mnWop)qGr-stut
"
mnWop)qGr-vw xy sz

mnW)q-PQ{5 |}i[i \ /
kl
sU~/ d[[ \/j/ mnW)Biblioteka Baidu-PQst
２．Ｄ Ｏ Ｍ （Ｄ ｏｃｕｍ ｅｎｔ Ｏ ｂｊｅｃｔ Ｍ ｏｄｅｌ） Ｄ Ｏ Ｍ 是给 Ｈ ＴＭ Ｌ 和 Ｘ Ｍ Ｌ 文件使用的一组 Ａ ＰＩ。 它提供了文件的结构表述，让你可以改变其中的內容 及可见物。其本质是建立网页与 Ｓｃｒｉｐｔ 或程序语言沟 通的桥梁。所有 Ｗ ｅｂ 开发人员可操作及建立文件的属 性、方法及事件都以对象来展现（例如，ｄｏｃｕｍ ｅｎｔ 就代 表＂文件本身＂这个对像，ｔａｂｌｅ 对象则代表 Ｈ ＴＭ Ｌ 的表 格 对 象 等 等 ）。 这 些 对 象 可 以 由 当 今 大 多 数 的 浏 览 器 以 Ｓｃｒｉｐｔ 来取用。 一个用 Ｈ ＴＭ Ｌ 或 Ｘ Ｈ ＴＭ Ｌ 构建的网页也可以看作 是一组结构化的数据， 这些数 据被封在 Ｄ Ｏ Ｍ （Ｄ ｏｃｕ－ ｍ ｅｎｔ Ｏ ｂｊｅｃｔ Ｍ ｏｄｅｌ） 中，Ｄ Ｏ Ｍ 提供了网页 中各个对象 的读写的支持。 ３．ＪａｖａＳｃｒｉｐｔ ＪａｖａＳｃｒｉｐｔ 是 一 在 浏 览 器 中 大 量 使 用 的 跨 平 台 编 程语言，常被用来做一些网页特效或表单验证。在 Ａ － ｊａｘ 中 Ｊａｖａｓｃｒｉｐｔ则是 Ｘ Ｍ ＬＨ ｔｔｐＲ ｅｑｕｅｓｔ和 Ｄ Ｏ Ｍ 交互的 桥梁和 Ａ ｊａｘ 引 擎工作的主 要推动力。Ｊａｖａｓｃｒｉｐｔ通 过 调用 Ｘ Ｍ ＬＨ ｔｔｐＲ ｅｑｕｅｓｔ的属 性 和 方 法 来 获 取 服 务 端 数 据， 然后调 用 Ｄ Ｏ Ｍ 的 Ａ ＰＩ 来更新 Ｗ ｅｂ 页面的内容 。 实现整个页面的无刷新更新页面。
术 的交互，都要返回一个完整的 Ｗ ｅｂ 页，造成用 户每次 创 都要浪费时间和带宽去重新读取整个页面。
Ａ ｊａｘ 的 工 作 原 理 相 当 于 在 用 户 和 服 务 器 之 间 加
新 了—个中间层— ——Ａ ｊａｘ 引擎，使用户操作与服务器响
应 异 步 化— ——并 不 是 所 有 的 用 户 请 求 都 提 交 给 服 务 器，一些数据验证和处理由 Ａ ｊａｘ 自己来做而不必交给 服务器处理，只有确定需要从服务器读取新数据时再 由 Ａ ｊａｘ 引擎代为向服务器提交请求。在使用 Ａ ｊａｘ 引 擎后，用户从感觉上几乎所有的操作都会很快响应没 有页面重载（白屏）的等待。（如图 １）
ｉｎ ｉｔｓ ｏｗ ｎ ｒｉｇｈｔ， ｃｏｍ ｉｎｇ ｔｏｇｅｔｈｅｒ ｉｎ ｐｏｗ ｅｒｆｕｌ ｎｅｗ ｗ ａｙｓ． Ａ ｊａｘ ｏｆｆｅｒｓ ａｎ ｅｘｃｅｌｌｅｎｔ ｓｏｌｕｔｉｏｎ ｔｏ ｗ ｅｂ ａｐｐｌｉｃａｔｉｏｎｓ ，ｅｓｐｅｃｉａｌｌｙ， ｔｈａｔ ｈａｖｅ
ｒｉｃｈ ｉｎｔｅｒａｃｔｉｏｎ ａｎｄ ｒｅｓｐｏｎｓｉｖｅｎｅｓｓ． Ｋ ｅｙｗ ｏｒｄｓ： Ａ ｊａｘ，Ｘ Ｍ Ｌ Ｈ ｔｔｐＲ ｅｑｕｅｓｔ，Ｗ ｅｂ ａｐｐｌｉｃａｔｉｏｎ，ｕｐｄａｔｉｎｇ ｗ ｅｂ
新 Ｘ Ｍ ＬＨ ＴＴＰ 组件很相似，方法和属性也类似，只是有一 小部分属性不支持。





!! " #
$%&’()*+,-
. #

" # /. # ! $%&’()*01- . #
/
23
"/4 .#/5/6 /75 8"9:! >?@A--B2 6 5
Ｙ ｏｕ，Ｌｉｚｈｅｎ Ｇ ｕｏ，Ｙ ｕｃｈｕｎ Ｌｉ，Ｃ ｕｎｘｉ
摘要：Ａ ｊａｘ 是 ｗ ｅｂ 应 用 的 一 种 新 方 法 。它 并 不 是 一 门 新 的 语 言 或 技 术 ， 实 际 上 是 几 种 已 经 在 各 自 领 域 大 行 其 道 技 术 的 强 强 结
合 ，Ａ ｊａｘ 混 合 了 Ｘ Ｈ ＴＭ Ｌ ／Ｃ ＳＳ，Ｄ Ｏ Ｍ ，Ｘ Ｍ Ｌ 及 Ｘ ＳＬＴ 等 几 项 技 术 ，并 且 利 用 Ｊａｖａｓｃｒｉｐｔ 来 整 合 上 述 技 术 。Ａ ｊａｘ 为 交 互 较 多 ，频 繁 读
《 嵌入式系统应用精选 ２００ 例》
邮局订阅号：８２－９４６ ３６０ 元 ／年 －２０５－
软件时空
中 文 核 心 期 刊《 微 计 算 机 信 息 》（管 控 一 体 化 ）２００６ 年 第 ２２ 卷 第 ２－３ 期
和 Ｄ Ｏ Ｍ 来实现。但是要使网页真正动态起来，不仅要 内 部 的 互 动 ， 还 需 要 从 外 部 获 取 数 据 ， 在 Ｘ Ｍ Ｌ－ Ｈ ＴＴＰＲ ｅｑｕｅｓｔ出现以前， 我们是让用户来输入数据并 通过 Ｄ Ｏ Ｍ 来改 变网页内容 的， 但现在 Ｘ Ｍ ＬＨ ＴＴＰＲ ｅ－ ｑｕｅｓｔ可以 让我们在不 重载页面的 情况下 读 写 服 务 器 上的数据，使用户的输入达到最少。
针 对 以 上 问 题 ，２００５ 年 ２ 月 Ｊｅｓｓｅ Ｊａｍ ｅｓ Ｇ ａｒｒｅｔｔ 提 出 了 Ａ ｊａｘ 这 个 概 念 。 Ａ ｊａｘ 是 Ａ ｓｙｎｃｈｒｏｎｏｕｓ ＪａｖａＳｃｒｉｐｔ ａｎｄ Ｘ Ｍ Ｌ 的缩写。Ａ ｊａｘ 并不 是一门新的 语 言 或 技 术 ，它 实 际 上 是 几 项 技 术 按 一 定 方 式 的 组 合 ， 在 共同的 协作 中 发 挥 各 自 的 作 用，它 包 括 ：使 用 Ｘ Ｈ ＴＭ Ｌ 和 Ｃ ＳＳ 标准化呈现；使用 Ｄ Ｏ Ｍ 实现动态显示和交互； 使用 Ｘ Ｍ Ｌ 和 Ｘ ＳＬＴ 进行数据交换与处理； 使用 Ｘ Ｍ Ｌ－ Ｈ ｔｔｐＲ ｅｑｕｅｓｔ进行异步数据读取； 最后用 ＪａｖａＳｃｒｉｐｔ绑 定和处理所有数据。其中 Ｘ Ｍ ＬＨ ｔｔｐＲ ｅｑｕｅｓｔ，Ｊａｖａｓｃｒｉｐｔ 和 Ｄ Ｏ Ｍ 是 Ａ ｊａｘ 技术的核心。
技
当前 Ｗ ｅｂ 服务逐渐渗入到人们的日常生活中，越 来越多 的人通过 Ｗ ｅｂ 享 受信息化 时 代 带 来 的 的 各 种 服务。一个热门站点的 Ｗ ｅｂ 服务器每时每刻要处理海 量的数据请求。同时我们在浏览 Ｗ ｅｂ 站点的时候，不 时 的 通 过 链 接 从 一 页 跳 到 另 一 页 。我 们 会 发 现 同 一 个 站点上的许多页面上内容都是重复的， 譬如页头、页 尾和广告等。这样一来造成了数据的重复请求，不但 加大了服务器的负担，而且造成用户界面的闪烁或白 屏。
技 很重要的，因为它帮助减少了无状态连接的痛苦，它还 可以排除下载冗余 Ｗ ｅｂ 数据的需要，从而提高进程的
术 速度。当然在其他 Ｗ ｅｂ 浏览器平台下， 例如 Ｍ ｏｚｉｌｌａ （Ｍ ｏｚｉｌｌａ１．０ 以 上）， Ｋ ｏｎｑｕｅｒｏｒ 和 Ｏ ｐｅｒａ（ｖ７．６ｘ＋ ），它 们 都
创 创建了它们自己的继承 Ｘ Ｍ Ｌ 代理类— ——Ｘ Ｍ ＬＨ ｔｔｐＲ ｅ－ ｑｕｅｓｔ 类 。 对 于 大 多 数 情 况 ，Ｘ Ｍ ＬＨ ｔｔｐＲ ｅｑｕｅｓｔ 对 象 和
下面介绍一 下 构 成 Ａ ｊａｘ 引 擎 的 几 个 主 要 技 术 及 其在 Ａ ｊａｘ 引擎中所起的作用。
１．Ｘ Ｍ ＬＨ ｔｔｐＲ ｅｑｕｅｓｔ 在 Ａ ｊａｘ 引擎中的几项技术中 Ｘ Ｍ ＬＨ ｔｔｐＲ ｅｑｕｅｓｔ是 最核心的技术，是 Ａ ｊａｘ 引擎解决无需刷新整个页面就 可以从服务器获取新数据这个问题的关键所在。 在 微 软 ＩＥ 平 台 下 Ｘ Ｍ ＬＨ ＴＴＰＲ ｅｑｕｅｓｔ 是 Ｘ Ｍ Ｌ－ Ｈ ＴＴＰ 组件一个对象， 它通过允许开发人员在 Ｗ ｅｂ 页 面内部使用 Ｘ Ｍ ＬＨ ＴＴＰ Ａ ｃｔｉｖｅＸ 组件扩展自身的功能， 开发人 员可以不用从 当前的 Ｗ ｅｂ 页 面 导 航 而 直 接 传 输数据到服务器上或者从服务器取数据。这个功能是
Ｈ ＴＴＰ ｒｅｑｕｅｓｔ ｈｔｔｐ（ｓ） ｔｒａｎｓｐｏｒｔ Ｘ Ｍ Ｌ ｄａｔａ
ｗ ｅｂ ａｎｄ／ｏｒ Ｘ Ｍ Ｌ ｓｅｒｖｅｒ
ｄａｔａｓｔｏｒｅｓ，ｂａｃｋｅｎｄ ｐｒｏｃｅｓｓｉｎｇ，ｌｅｇａｃｙ ｓｙｓｔｅｍ ｓ
ｓｅｒｖｅｒ－ｓｉｄｅ ｓｙｓｔｅｍ ｓ ｃｌａｓｓｉｃ
ｄａｔａｓｔｏｒｅｓ，ｂａｃｋｎｄ ｐｒｏｃｅｓｓｉｎｇ，ｌｅｇａｃｙ ｓｙｓｔｅｍ ｓ
ｂｏｒｗ ｓｅｒ ｃｌｉｅｎｔ ｕｓｅｒ ｉｎｔｅｒｆａｃｅ Ｈ ＴＴＰ ｒｅｑｕｅｓｔ ｈｔｔｐ（ｓ） ｔｒａｎｓｐｏｒｔ
Ｈ ＴＭ Ｌ＋Ｃ ＳＳ ｄａｔａ
ｗ ｅｂ ｓｅｒｖｅｒ
ｂｒｏｗ ｓｅｒ ｃｌｉｅｎｔ
ｕｓｅｒ ｉｎｔｅｒｆａｃｅ ＪａｖａＳｃｒｉｐｔ ｃａｌｌ
Ｈ ＴＭ Ｌ＋Ｃ ＳＳ ｄａｔａ Ａ ｊａｘ ｅｎｇｉｎｅ
１ Ａ ｊａｘ 的原理
在经典的浏览器与服务器的交互方式中，由用户 触发一个 Ｈ ＴＴＰ 请求到服务器， 服务器对其进行处理 后再返回一个新的 Ｗ ｅｂ 页到浏览器，每当服务器处理 浏览器提交的请求时，客户都只能空闲等待，并且哪 怕只是一次只需从服务器端得到很简单的一个数据
游丽贞：硕士研究生 国 家 自 然 科 学 基 金，合 同 号 ：６０２０２００１
数 据 ，数 据 分 类 良 好 的 Ｗ ｅｂ 应 用 提 供 了 一 个 很 好 的 解 决 方 案 。
关键字： Ａ ｊａｘ，Ｘ Ｍ Ｌ Ｈ ｔｔｐＲ ｅｑｕｅｓｔ，Ｗ ｅｂ 应用， 无刷新更新页面
中图分类号：Ｔ Ｐ ３９１
文 献 标 识 码 ：Ａ
Ａ ｂｓｔｒａｃｔ： Ａ ｊａｘ ｉｓ ａ ｎｅｗ ａｐｐｒｏａｃｈ ｔｏ ｗ ｅｂ ａｐｐｌｉｃａｔｉｏｎ ． Ａ ｊａｘ ｉｓｎ ＇ ｔ ａ ｔｅｃｈｎｏｌｏｇｙ． Ｉｔ＇ ｓ ｒｅａｌｌｙ ｓｅｖｅｒａｌ ｔｅｃｈｎｏｌｏｇｉｅｓ， ｅａｃｈ ｆｌｏｕｒｉｓｈｉｎｇ
２ Ａ ｊａｘ 优缺点分 析
任何一项技术都具有其固有的优点及缺点，对于 它们的优点和缺点的事先的认识， 有利于将来准确 地，有效地利用这项技术。根据以上 Ａ ｊａｘ 的原理和技 术背景可以总结出 Ａ ｊａｘ 有以下优势：
１．减 轻 服 务 器 的 负 担 因为 Ａ ｊａｘ 的根本理念是＂按需取数据＂，所以最大 可能在减少了冗余请求和响影对服务器空间和带宽 造成的负担。同时 Ａ ｊａｘ 可以把原来需要服务器要做的 许多事情放到客户端来做。 我们在上网冲浪的时候可以看到大多数网站的 很 多 页 面 至 少 ９０％ 都 是 一 样 的 ，比 如 ：结 构 、格 式 、页 头 、页 尾 、广 告 等 ，所 不 同 的 只 是 一 小 部 分 的 内 容 ，但 每次服务器都会生成所有的页面再返回给客户端，这 无形之中是一种浪费，不管是对于用户的时 间、带宽、 Ｃ ＰＵ 耗用， 还是对于 ＩＳＰ 的高价租用的带宽和空间来 说。如果按一页来算，只能几 Ｋ 或是几十 Ｋ 可能并不 起眼，但像每天要生成几百万个页面的大 ＩＳＰ 来说，可 以说是损失巨大的。而 Ａ ｊａｘ 可以所为客户端和服务器 的中间层，来处理客户端的请求，并根据需要向服务 器端发送请求，用什么就取什么、用多少就取多少 ，就 不会有数据的冗余和浪费， 减少了数据下载总量，而 且更新页面时不用重载全部内容，只更新需要更新的 那部分即可，相对于纯后台处理并重载的方式缩短了 用户等待时间，也把对资源的浪费降到最低，所以 Ａ － ｊａｘ 对于用户和 ＩＳＰ 来说是双赢的。 ２．刷 新 更 新 页 面 ，减 少 用 户 实 际 和 心 理 等 待 时 间
您的论文得到两院院士关注 文 章 编 号 ：１００８－ ０５７０（２００６）０２－ ３－ ０２０５－ ０３
软件时空
Ａ ｊａｘ 引擎的原理和应用
Ｔ ｈ ｅ ｐ ｒｉｎ ｃｉｐ ｌｅ ａｎ ｄ ａｐ ｐ ｌｉｃａｔｉｏ ｎ ｏ ｆ Ａ ｊａｘ ｅｎ ｇ ｉｎ ｅ
（北京交通大学）游 丽 贞 郭 宇 春 李 纯 喜
ｓｅｒｖｅｒ－ｓｉｄｅ ｓｙｓｔｅｍ ｓ Ａ ｊａｙ
ｗ ｅｂ ａｐｐｌｉｃａｔｉｏｎ ｍ ｏｄｅｌ
ｗ ｅｂ ａｐｐｌｉｃａｔｉｏｎ ｍ ｏｄｅｌ
图１
从（图－１）我们可以看出 Ａ ｊａｘ 引擎，实际上是一个 比较复杂的 ＪａｖａＳｃｒｉｐｔ应用程序， 用 来处理用户 请求
然后根据需要动态读写服务器和更改 Ｄ Ｏ Ｍ 内容。以 前为了使网页能无缝化重构，也就是在页面已经下载 完 毕 后 改 变 页 面 内 容 ， 开 发 人 员 一 直 通 过 ＪａｖａＳｃｒｉｐｔ
75/ ;4 /75 / <#/===
5 CDEFG
"#9" "
HI
/J! /
# /! !/5
>? . # KCLMHI
NO
NO " #8 9."
PQRS-TUVHW
#8X
PQY" Z [ \ @]^_
‘ \ abc