AJAX应用的典型设计模式
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
计 算 机 系 统
用
ｈ ｐ ／ ｗＣＳａ ｒ． ｔ： ｔ／ ｗｗ ． － ｏｇ ｎ — ｃ
２１ ０ １年 第 ２ Ｏ卷 第 １ 期
ＡＡ Ｊ Ｘ应用的典型设计模
周 杨
（ 事 经 济 学 院 基础 部计 算 机 教研 室 ， 武汉 ４ ０ ３） 军 ３ ０ ５
摘
要 ： Ｊ Ｘ 是 ＷＥ ＡＡ Ｂ领域 的前沿技术 ，它提供 了新 的互联 网交互模型 ，扩展了 ＷＥ Ｂ应用 的能力 。文章对 比分
ＺＨＯ Ｕ Ｙａ ｇ ｎ
（ ｏ ｐ ｔｒ ｅｃｉｇａｄＲ ｓａｃ ｉ ｅｔ ｎ Ｍｉｔ ｙ ｃｎ ｍｉ ｃｄ ｍｙＷｕ ａ ３ ０ ５Ｃ ｉａ Ｃ ｍ ｕｅ ａｈｎ ｎ ｅｅｒｈｎ Ｓ ｃｉ ， ｌａ ｏ ｏ ｃ Ａ ａ ｅ ， ｈｎ４ ０ ３ ， ｈｎ） Ｔ ｇ ｏ ｉｒＥ ｓ
在 传 统 网页 的 工作模 式 下 ，数据 采用 同步 交互
方 式 。用 户 通 过 点击 网 页 上 的 按 钮 或 链 接 ， 向 ＷＥ Ｂ
服务器 发送 请求信 息 Ｈｔ Ｒ ｑ ｅｔＷＥ ｔ ｅ ｕ ｓ， Ｂ服务器 收到 ｐ 用户 的请 求后 ，与 数据 库服 务器 交 换数据 ，再 向发 出请 求 的 用户 返 回一个 ＨＴ ＭＬ 页 面 显示数 据 的改 变 。 丁是 ，服务器 在处 理请 求时 ，用户多 数时 间处
Ａｂｔａｔ Ａ ａ ｓａｆ ｎ ｔｃｎ ｌ ｙｉ ｔｅＷｅ ． ｔＰｏ ｉｅ ｅ ｏ ｅ ｏ ｔ ｔｉ ｅａｔ ｎ ｗ ｉ ｒａｙ ｓ ｃ： ｊｘｉ ｏ ｔ ｅｈ ｏｏ ｎ ｈ ｂ Ｉ ｒｖｄｓａｎ ｗ ｍ ｄ ｌ ｆｉ ｅ ｔ ｃｉ ， ｈｃ ｇｅｔ ｒ ｒ ｇ ｎ ｍｅ ｎ ｒ ｏ ｈ ｌ ｅｐ ｎ ｅ ｅｃｐｃ ｙｏ ｂａｐｉ ｔ ｎ．ｎｔｉ ｐ ｐｒｗ ｎ ｌ ｅｔｅｍａ ｉｅｅｃｓｂｔ ｅｎｔｅＡ ａ ｅｉ ｘ ａ ｄｄｔ ａ ａｉ ｆＷｅ ｐ ｌ ａ ｏ ｓ Ｉ ｓ ａ ｅ ｅａａ ｚ ｉ ｄｆ ｒｎ ｅ ｅ ｅ ｊｘｄ ｓ ｎ ｈ ｔ ｃｉ ｈ ， ｙ ｈ ｎ ｆ ｗ ｈ ｇ ｐｔ ｒ ｎ ｒｄ ｉｎｌＷｅ ｐ ｌ ａｏ ｓ ｔｅ ｕ ｏｗａｄｆｕ ｙ ｉ ｌ ｊｘ ｄ ｓ ｎ ｐｔ ｍｓｗｈｃ ｒ ｙ ａ ｉ ａ ｅ ｓａｄ ｔ ｉｏ ａ ｔｎ ａ ｔ ｂ ａ ｐｉ ｔ ｎ， ｈ ｎｐ ｔｆｒ ｒ ｏｒｔ ｃ ａ ｅｉ ａ ｅ ｉ ａｅＤ ｎ ｍ ｃ ｃｉ ｐ ａＡ ｇ ｔ ｈ
ＣＳ Ｓ 、ＤＯ Ｍ、Ｘ ＭＬ ｔ Ｒ ｑ ｅｔ ＭＬ 等 大 量 成 熟 技 Ｈｔ ｅｕ ｓ、Ｘ ｐ
于等待状态 ，屏幕 内容 也是一片空 白。Ａ Ａ 工作模 Ｊｘ 式与传统 网页工作模式最 大的不 同是 Ａ Ａ Ｊ Ｘ采 用数据 异步传输 与请 求机制 ，使客户端与服 务器之 间的数据 通信在后 台运行 。在浏览器 与 ＷＥ 服务器之间增加 Ｂ
ｌ ＡＪ ＡＸ技 术 及 其 实 现 原 理
１ ＡＸ技术简 介 ．ＡＪ １ Ａ Ａ （ ｓｎ ｈｏ ｏ ｓＪｖ Ｓｒ ｔＡｎ ＭＬ 作 为 Ｊ Ａ ｙ ｃｒｎ ｕ ａ ａ ｃｉ ｄ Ｘ ） ｘ ｐ ＷＥ Ｂ领域的前沿技术， 是一种创建交互式网页应用 的 开发技术 。 为一种新 的 ＷＥ 作 Ｂ设计方式， Ｊ ｘ本身 ＡＡ 并不算 新技术 ，它是建立 在 Ｊｖ Ｓｒ ｔ ａａ ｃｉ 、ＸＨ ＭＬ 和 ｐ Ｔ
析了 Ａ Ａ ＿作模式与传统 ＷＥ 工作模式的主要区别 ，提 出了动态加载、预见式缓存 、内容分块三个典型的 ＪＸ ［ Ｂ ＡＡ Ｊ Ｘ应用设计模式，并较为深入地分析了各个模式 的设计原理 ，展示 了相关的实例代码 。 关键词： Ｊ ；设计 模式；ＷＥ ＡＡ Ｘ Ｂ；异步
Ｔｙｐ ｃ ｌ Ｊ Ｘ ｓｇ ｔｅ ｎｓ ｉａ Ａ Ａ Ｄｅ ｉ ｎ Ｐａ ｔ ｒ
① 收稿 时 间：０００ ．４收到 修 改稿 时间 ： １．６１ ２ １—５１； ２ ００．１ ０
空间并减轻 了服务器及带宽的负担 ，极大地提高 了用 户界面 的友好程度【。图１ ２ １ 描述 了 Ａ Ａ 工作模式与 ＪＸ
了一个 ＡＪ ｘ 引擎 ， 实质就是一些复杂的 Ｊｖ Ｓ ｒ ｔ Ａ 其 ａａ ｃｉ ｐ
程 序 ，这 些 程 序 通 过 调用 Ｘ Ｈ ｔＲ ｑ ｅｔ对 象 的 属 ＭＬ ｔ ｅｕ ｓ ｐ
性和方法 与服务器进行数据交互 ，并通过 Ｄ ＯＭ 解析
处理 ＸＭＬ文档 和 部 分 更 新 Ｈ ＭＬ 页 面 的 内容 。 此 ， Ｔ 因
Ｌｏ ｄｎ ， ｃ ｅｐ ｅ ｉｔｂｌ ｔ ｎ ｎ ｅ ｔ ａ ｔ ｉ ｎ ｄ． ｅｄ ｓ ｒｂ ｄｔ ｅｖ ｒｏ ｓｄ ｓｇ ａｔｒ ｈ ｓ ｅ ｔ ｆｔ ｅ ａ ｉｇ Ｃａ ｈ － ｒ ｄ ｃａ ｅ Ｄａａａ ｄＣｏ ｔｎ ｒｉ ｏ ｅ Ｗ ｅ ｃ ｉｅ ｈ ａ ｉｕ ｅ ｉｎ ｐ ｔｅｎｓｏｎｔ ｅａ ｐ ｃｓｏ ｐ ｔ ｈ ｐ ｏ ｌｍｓ ｔ ｉａ ｃ ｎ ｎ ｔ ｒｈｉ ｃｕ ｅ ｒ ｂｅ ，ｙｐｃ ｌｓ ｅ ｅａ ｄｉｓａ ｃ ｔ ｔｒ ． ｅ Ｋｅ ｗｏ ｄ ： Ａ ｙ ｒ ｓ ＡＪ Ｘ ； ｅ ｉ ｎ ｐ ｔｅｎ； ＥＢ； ｓ ｎ ｈ ｏ ｉ ｄ ｓｇ ａｔｒ Ｗ ａ ｙ ｃ ｒ ｎ
术基础之上的一项综合技术 ，并能够 对各大浏览器和 平 台都支持的 、具有公开标准 的这 些现有技术进 行重
新应 用 Ｄ。 ｌ
用户发 出 ＨＴ Ｐ请求后，不必再等待服务器 的响应数 Ｔ 据来刷 新页面 ，而是继续通 过页面和服务器进行其他 交互 ，ＡＪ ＡＸ 引擎则会 自动选择适 当的时机 向服务器 请 求数据并将返回的数据显示在客户端 。这样 ，服务 器 负担的部分工作被转交给客户端 处理 ，节 约了 ＩＰ Ｓ
用
ｈ ｐ ／ ｗＣＳａ ｒ． ｔ： ｔ／ ｗｗ ． － ｏｇ ｎ — ｃ
２１ ０ １年 第 ２ Ｏ卷 第 １ 期
ＡＡ Ｊ Ｘ应用的典型设计模
周 杨
（ 事 经 济 学 院 基础 部计 算 机 教研 室 ， 武汉 ４ ０ ３） 军 ３ ０ ５
摘
要 ： Ｊ Ｘ 是 ＷＥ ＡＡ Ｂ领域 的前沿技术 ，它提供 了新 的互联 网交互模型 ，扩展了 ＷＥ Ｂ应用 的能力 。文章对 比分
ＺＨＯ Ｕ Ｙａ ｇ ｎ
（ ｏ ｐ ｔｒ ｅｃｉｇａｄＲ ｓａｃ ｉ ｅｔ ｎ Ｍｉｔ ｙ ｃｎ ｍｉ ｃｄ ｍｙＷｕ ａ ３ ０ ５Ｃ ｉａ Ｃ ｍ ｕｅ ａｈｎ ｎ ｅｅｒｈｎ Ｓ ｃｉ ， ｌａ ｏ ｏ ｃ Ａ ａ ｅ ， ｈｎ４ ０ ３ ， ｈｎ） Ｔ ｇ ｏ ｉｒＥ ｓ
在 传 统 网页 的 工作模 式 下 ，数据 采用 同步 交互
方 式 。用 户 通 过 点击 网 页 上 的 按 钮 或 链 接 ， 向 ＷＥ Ｂ
服务器 发送 请求信 息 Ｈｔ Ｒ ｑ ｅｔＷＥ ｔ ｅ ｕ ｓ， Ｂ服务器 收到 ｐ 用户 的请 求后 ，与 数据 库服 务器 交 换数据 ，再 向发 出请 求 的 用户 返 回一个 ＨＴ ＭＬ 页 面 显示数 据 的改 变 。 丁是 ，服务器 在处 理请 求时 ，用户多 数时 间处
Ａｂｔａｔ Ａ ａ ｓａｆ ｎ ｔｃｎ ｌ ｙｉ ｔｅＷｅ ． ｔＰｏ ｉｅ ｅ ｏ ｅ ｏ ｔ ｔｉ ｅａｔ ｎ ｗ ｉ ｒａｙ ｓ ｃ： ｊｘｉ ｏ ｔ ｅｈ ｏｏ ｎ ｈ ｂ Ｉ ｒｖｄｓａｎ ｗ ｍ ｄ ｌ ｆｉ ｅ ｔ ｃｉ ， ｈｃ ｇｅｔ ｒ ｒ ｇ ｎ ｍｅ ｎ ｒ ｏ ｈ ｌ ｅｐ ｎ ｅ ｅｃｐｃ ｙｏ ｂａｐｉ ｔ ｎ．ｎｔｉ ｐ ｐｒｗ ｎ ｌ ｅｔｅｍａ ｉｅｅｃｓｂｔ ｅｎｔｅＡ ａ ｅｉ ｘ ａ ｄｄｔ ａ ａｉ ｆＷｅ ｐ ｌ ａ ｏ ｓ Ｉ ｓ ａ ｅ ｅａａ ｚ ｉ ｄｆ ｒｎ ｅ ｅ ｅ ｊｘｄ ｓ ｎ ｈ ｔ ｃｉ ｈ ， ｙ ｈ ｎ ｆ ｗ ｈ ｇ ｐｔ ｒ ｎ ｒｄ ｉｎｌＷｅ ｐ ｌ ａｏ ｓ ｔｅ ｕ ｏｗａｄｆｕ ｙ ｉ ｌ ｊｘ ｄ ｓ ｎ ｐｔ ｍｓｗｈｃ ｒ ｙ ａ ｉ ａ ｅ ｓａｄ ｔ ｉｏ ａ ｔｎ ａ ｔ ｂ ａ ｐｉ ｔ ｎ， ｈ ｎｐ ｔｆｒ ｒ ｏｒｔ ｃ ａ ｅｉ ａ ｅ ｉ ａｅＤ ｎ ｍ ｃ ｃｉ ｐ ａＡ ｇ ｔ ｈ
ＣＳ Ｓ 、ＤＯ Ｍ、Ｘ ＭＬ ｔ Ｒ ｑ ｅｔ ＭＬ 等 大 量 成 熟 技 Ｈｔ ｅｕ ｓ、Ｘ ｐ
于等待状态 ，屏幕 内容 也是一片空 白。Ａ Ａ 工作模 Ｊｘ 式与传统 网页工作模式最 大的不 同是 Ａ Ａ Ｊ Ｘ采 用数据 异步传输 与请 求机制 ，使客户端与服 务器之 间的数据 通信在后 台运行 。在浏览器 与 ＷＥ 服务器之间增加 Ｂ
ｌ ＡＪ ＡＸ技 术 及 其 实 现 原 理
１ ＡＸ技术简 介 ．ＡＪ １ Ａ Ａ （ ｓｎ ｈｏ ｏ ｓＪｖ Ｓｒ ｔＡｎ ＭＬ 作 为 Ｊ Ａ ｙ ｃｒｎ ｕ ａ ａ ｃｉ ｄ Ｘ ） ｘ ｐ ＷＥ Ｂ领域的前沿技术， 是一种创建交互式网页应用 的 开发技术 。 为一种新 的 ＷＥ 作 Ｂ设计方式， Ｊ ｘ本身 ＡＡ 并不算 新技术 ，它是建立 在 Ｊｖ Ｓｒ ｔ ａａ ｃｉ 、ＸＨ ＭＬ 和 ｐ Ｔ
析了 Ａ Ａ ＿作模式与传统 ＷＥ 工作模式的主要区别 ，提 出了动态加载、预见式缓存 、内容分块三个典型的 ＪＸ ［ Ｂ ＡＡ Ｊ Ｘ应用设计模式，并较为深入地分析了各个模式 的设计原理 ，展示 了相关的实例代码 。 关键词： Ｊ ；设计 模式；ＷＥ ＡＡ Ｘ Ｂ；异步
Ｔｙｐ ｃ ｌ Ｊ Ｘ ｓｇ ｔｅ ｎｓ ｉａ Ａ Ａ Ｄｅ ｉ ｎ Ｐａ ｔ ｒ
① 收稿 时 间：０００ ．４收到 修 改稿 时间 ： １．６１ ２ １—５１； ２ ００．１ ０
空间并减轻 了服务器及带宽的负担 ，极大地提高 了用 户界面 的友好程度【。图１ ２ １ 描述 了 Ａ Ａ 工作模式与 ＪＸ
了一个 ＡＪ ｘ 引擎 ， 实质就是一些复杂的 Ｊｖ Ｓ ｒ ｔ Ａ 其 ａａ ｃｉ ｐ
程 序 ，这 些 程 序 通 过 调用 Ｘ Ｈ ｔＲ ｑ ｅｔ对 象 的 属 ＭＬ ｔ ｅｕ ｓ ｐ
性和方法 与服务器进行数据交互 ，并通过 Ｄ ＯＭ 解析
处理 ＸＭＬ文档 和 部 分 更 新 Ｈ ＭＬ 页 面 的 内容 。 此 ， Ｔ 因
Ｌｏ ｄｎ ， ｃ ｅｐ ｅ ｉｔｂｌ ｔ ｎ ｎ ｅ ｔ ａ ｔ ｉ ｎ ｄ． ｅｄ ｓ ｒｂ ｄｔ ｅｖ ｒｏ ｓｄ ｓｇ ａｔｒ ｈ ｓ ｅ ｔ ｆｔ ｅ ａ ｉｇ Ｃａ ｈ － ｒ ｄ ｃａ ｅ Ｄａａａ ｄＣｏ ｔｎ ｒｉ ｏ ｅ Ｗ ｅ ｃ ｉｅ ｈ ａ ｉｕ ｅ ｉｎ ｐ ｔｅｎｓｏｎｔ ｅａ ｐ ｃｓｏ ｐ ｔ ｈ ｐ ｏ ｌｍｓ ｔ ｉａ ｃ ｎ ｎ ｔ ｒｈｉ ｃｕ ｅ ｒ ｂｅ ，ｙｐｃ ｌｓ ｅ ｅａ ｄｉｓａ ｃ ｔ ｔｒ ． ｅ Ｋｅ ｗｏ ｄ ： Ａ ｙ ｒ ｓ ＡＪ Ｘ ； ｅ ｉ ｎ ｐ ｔｅｎ； ＥＢ； ｓ ｎ ｈ ｏ ｉ ｄ ｓｇ ａｔｒ Ｗ ａ ｙ ｃ ｒ ｎ
术基础之上的一项综合技术 ，并能够 对各大浏览器和 平 台都支持的 、具有公开标准 的这 些现有技术进 行重
新应 用 Ｄ。 ｌ
用户发 出 ＨＴ Ｐ请求后，不必再等待服务器 的响应数 Ｔ 据来刷 新页面 ，而是继续通 过页面和服务器进行其他 交互 ，ＡＪ ＡＸ 引擎则会 自动选择适 当的时机 向服务器 请 求数据并将返回的数据显示在客户端 。这样 ，服务 器 负担的部分工作被转交给客户端 处理 ，节 约了 ＩＰ Ｓ