AJAX技术的原理与应用_付忠庆.pdf

Ajax 技术原理及应用 摘要 Ajax 技术是目前最为流行的WEB 前端技术之一，它主要用于实现网页的动态 更新；提高了用户浏览网页的效率；同时，这种局部的更新方式降低了网络带宽 和服务器压力，在各个领域的网页中均有应用。本论文从底层出发，分析 Ajax 技术的实现原理，并且举出了常用的应用方案，对Ajax 在实际应用中对比与其 他技术做出评价和总结。 关键字 Ajax web 技术 JavaScript 网页前端 正文 一、 原理 严格来说，Ajax （Asynchronous JavaScript and XML ）技术并不是一项技术。 Ajax 是由一组技术构成的。这组技术贯穿整个WEB 前段。这组技术可以包 括 1. 表示部分，一般使用CSS 和XHTML 来表示，用户直观看到。 2. 使用DOM （Document Object Model）模型来交互和动态显示。 3. 使用XMLHttpRequest 来和服务器进行异步通信。 4. 使用JavaScript 来绑定和调用。 从图 1 中我们可以看出：由事件触发，创建一个XMLHttpRequest 对 象，把HTTP 方法（Get/Post）和目标URL 以及请求返回后的回调函数 设置到XMLHttpRequest 对象，通过XMLHttpRequest 向服务器发送请 求，请求发送后继续响应用户的界面交互，只有等到请求真正从服务器返 回的时候才调用callback()函数，对响应数据进行处理。其中， XMLHttpRequest 是Ajax 的核心技术，下面将介绍几个关键环节。 图1.Ajax 技术的原理 1. DOM （Document Object Model ）技术 DOM 技术提供了对整个 HTML 文件中的元素访问的方法。它将 HTML 文件抽象成一个树形结构，从而达到便捷控制 HTML 文件的目 的，而DOM 可以被JavaScript 用来读取修改HTML 文档的特点为Ajax 技术能够实现提供了可能。 图2.一棵DOM 树 从图2 中可以看出文档（document ）中HTML 是整这个树的根节点， 而此根节点有head 、body两个元素，在HTML 文档中对应HTML 标 签的两个子标签，而每个叶子结点上都会有自己的元素。图2.所表示的 DOM 可以用代码1 来实现。 html head title 文档标题 /title /head body h1我的标题/h1 a href=””我的链接/a /body /html 代码1.DOM 的HTML 实现 2. JavaScript 脚本语言 JavaScript 是一门脚本语言，本文重点介绍如何获得DOM 以及对进行修 改。 a)获得节点 可以通过一下三种方法获得，他们都忽略文档的树形结构。 getElementById(id) ：通过id 获取元素节点，如果页面上含有多个相同id 的节点，那么只获取第一个节点，理论上，id 在页面中应该是唯一的。jQuery 中通过$(#id)来获得节点，这种方式类似于CSS 中的id 选择器。 getElementsByName(name) ：通过name 获取一组元素节点，返回的是具 有相同name 的节点数组。注意，这个方法在IE 和W3C(Firefox 、Chrome)下 表现是不一样的，这个方法应该不是 DOM LEVEL 1 里的规范，IE 支持 LEVEL 1 ，和后来的标准就有很