您现在的位置： IT专家网 > Web服务子站 > 技巧

掌握Ajax：建立基于DOM的Web应用程序

作者: , 　出处:developerWorks,　责任编辑: 叶江,　

2006-10-18 09:42

　　本文将把这些知识用于实践。我们将开发一个简单的 Web 应用程序，其用户界面可根据用户动作改变，当然要使用 DOM 来处理界面的改变。阅读完本文之后，就已经把学习到的关于 DOM 的技术和概念付诸应用了。

　　本系列的相关文章中考察了文档对象模型(DOM)编程中涉及到的概念——Web 浏览器如何把网页看作一棵树，现在您应该理解了 DOM 中使用的编程结构。本文将把这些知识用于实践，建立一个简单的包含一些特殊效果的 Web 页面，所有这些都使用 JavaScript 操纵 DOM 来创建，不需要重新加载或者刷新页面。

　　本文将把这些知识用于实践。我们将开发一个简单的 Web 应用程序，其用户界面可根据用户动作改变，当然要使用 DOM 来处理界面的改变。阅读完本文之后，就已经把学习到的关于 DOM 的技术和概念付诸应用了。

　　假设读者已经阅读过上两篇文章，如果还没有的话，请先看一看，切实掌握什么是 DOM 以及 Web 浏览器如何将提供给它的 HTML 和 CSS 转化成单个表示网页的树状结构。到目前为止我一直在讨论的所有 DOM 原理都将在本教程中用于创建一个能工作的(虽然有点简单)基于 DOM 的动态 Web 页面。如果遇到不懂的地方，可以随时停下来复习一下前面的两篇文章然后再回来。（利用DOM进行Web响应和 Ajax 中的高级请求和响应）

　　从一个示例应用程序开始

　　我们首先建立一个非常简单的应用程序，然后再添加一点 DOM 魔法。要记住，DOM 可以移动网页中的任何东西而不需要提交表单，因此足以和 Ajax 媲美;我们创建一个简单的网页，上面只显示一个普通的旧式大礼帽，还有一个标记为 Hocus Pocus! 的按钮(猜猜这是干什么的?)

　　初始 HTML

　　清单 1 显示了这个网页的 HTML。除了标题和表单外，只有一个简单的图片和可以点击的按钮。

　　清单 1. 示例应用程序的 HTML

<html>
<head>
<title>Magic Hat</title>
</head>

<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" />
   </p>
</form>
</body>
</html>