掌握 Ajax,第 6 部分: 建立基于 DOM 的 Web 应用程序
在不刷新页面的情况下使用 DOM 改变网页界面 |
级别: 中级 Brett McLaughlin (mailto:brett@newInstance.com?subject=建立基于 DOM 的 Web 应用程序&cc=htc@us.ibm.com), 作家兼编辑, O'Reilly Media Inc. 2006 年 10 月 12 日
前面两期文章已经详细介绍了文档对象模型或者 DOM,读者应该很清楚 DOM 是如何工作的了。(前两期 DOM 文章以及 Ajax 系列更早文章的链接请参阅参考资料。)本教程中将把这些知识用于实践。我们将开发一个简单的 Web 应用程序,其用户界面可根据用户动作改变,当然要使用 DOM 来处理界面的改变。阅读完本文之后,就已经把学习到的关于 DOM 的技术和概念付诸应用了。 假设读者已经阅读过上两期文章,如果还没有的话,请先看一看,切实掌握什么是 DOM 以及 Web 浏览器如何将提供给它的 HTML 和 CSS 转化成单个表示网页的树状结构。到目前为止我一直在讨论的所有 DOM 原理都将在本教程中用于创建一个能工作的(虽然有点简单)基于 DOM 的动态 Web 页面。如果遇到不懂的地方,可以随时停下来复习一下前面的两期文章然后再回来。 从一个示例应用程序开始
我们首先建立一个非常简单的应用程序,然后再添加一点 DOM 魔法。要记住,DOM 可以移动网页中的任何东西而不需要提交表单,因此足以和 Ajax 媲美;我们创建一个简单的网页,上面只显示一个普通的旧式大礼帽,还有一个标记为 Hocus Pocus! 的按钮(猜猜这是干什么的?) 初始 HTML 清单 1 显示了这个网页的 HTML。除了标题和表单外,只有一个简单的图片和可以点击的按钮。 清单 1. 示例应用程序的 HTML
可以在本文后面的下载中找到这段 HTML 和本文中用到的图片。不过我强烈建议您只下载那个图片,然后随着本文中逐渐建立这个应用程序自己动手输入代码。这样要比读读本文然后直接打开完成的应用程序能够更好地理解 DOM 代码。 查看示例网页 这里没有什么特别的窍门,打开网页可以看到图 1 所示的结果。 图 1. 难看的大礼帽 关于 HTML 的补充说明 应该 注意的重要一点是,清单 1 和图 1 中按钮的类型是
向示例应用程序添加元素 现在用一些 JavaScript、DOM 操作和小小的图片戏法装扮一下网页。 使用 getElementById() 函数 显然,魔法帽子没有兔子就没有看头了。这里首先用兔子的图片替换页面中原有的图片(再看看图 1),如图 2 所示。 图 2. 同样的礼帽,这一次有了兔子 完成这个 DOM 小戏法的第一步是找到网页中表示
为 HTML 添加 id 属性 这是非常简单的 JavaScript,但是需要修改一下 HTML:为需要访问的元素增加 清单 2. 增加 id 属性
如果重新加载(或者打开)该页面,可以看到毫无变化,增加 抓住 img 元素 现在可以很容易地使用 清单 3. 访问 img 元素
现在打开或重新加载该网页同样没有什么惊奇的地方。虽然现在能够访问图片,但是对它还什么也没有做。
修改图片,麻烦的办法 完成所需修改有两种方法:一种简单,一种麻烦。和所有的好程序员一样,我也喜欢简单的办法;但是运用较麻烦的办法是一次很好的 DOM 练习,值得您花点时间。首先看看换图片比较麻烦的办法;后面再重新分析一下看看有没有更简单的办法。 用带兔子的新照片替换原有图片的办法如下:
创建新的 img 元素 通过上两期文章应该记住 DOM 中最关键的是 具体而言,需要创建一个新的
还有其他类型,但是这三种可以满足 99% 的编程需要。这里需要一个
这行代码可以创建一个
要记住,DOM 会创建结构良好的 HTML,就是说这个目前为空的元素包括起始和结束标签。剩下的就是向该元素增加内容或属性,然后将其插入到网页中。 对内容来说, 如果对已有的属性调用
它创建一个图片元素然后设置适当的资源属性。现在,HTML 应该如清单 4 所示。 清单 4. 使用 DOM 创建新图片
可以加载该页面,但是不要期望有任何改变,因为目前所做的修改实际上还没有影响页面。另外,如果再看看任务列表中的第 5 步,就会发现还没有调用我们的 JavaScript 函数! 获得原始图片的父元素 现在有了要插入的图片,还需要找到插入的地方。但是不能将其插入到已有的图片中,而是要将其插入到已有图片之前然后再删除原来的图片。为此需要知道已有图片的父元素,实际上这就是插入和删除操作的真正关键所在。 应该记得,前面的文章中曾经指出 DOM 确实把网页看成一棵树,即节点的层次结构。每个节点都有父节点(树中更高层次的节点,该节点是它的一个子级),可能还有自己的子节点。对于图片来说,它没有子级 —— 要记住图片是空元素,但是它肯定有父节点。甚至不需要知道父节点是什么,但是需要访问它。 为此,只要使用每个 DOM 节点都有的
确实非常简单!可以肯定这个节点有子节点,因为已经有了一个:原来的图片。此外,完全不需要知道它是一个 插入新图片 现在得到了原来图片的父节点,可以插入新的图片了。很简单,有多种方法可以添加子节点:
因为希望把新图片放在旧图片的位置上,需要使用
现在原图片的父元素有了两个 子元素:新图片和紧跟在后面的旧图片。必须指出,这里包围 这些图片的内容没有变,而且这些内容的顺序也和插入之前完全相同。仅仅是这个父节点中增加了一个子节点,即旧图片之前的新图片。 删除旧图片 现在只需要删除旧图片,因为网页中只需要新图片。很简单,因为已经得到了旧图片元素的父节点。只要调用
现在,用新图片替换旧图片的工作已基本完成了。HTML 应该如清单 5 所示。 清单 5. 用新图片替换旧图片
连接 JavaScript 最后一步,可能也是最简单的,就是把 HTML 表单连接到刚刚编写的 JavaScript 函数。需要每当用户点击 Hocus Pocus! 按钮的时候运行
这种简单的 JavaScript 编程应该非常容易了。将其添加到 HTML 页面中,保存它然后在 Web 浏览器中打开。页面初看起来应该和图 1 相同,但是点击 Hocus Pocus! 后应该看到图 3 所示的结果。 图 3. 兔子戏法
替换图片,简单的办法 如果回顾替换图片的步骤,再看看节点的各种方法,可能会注意到方法
使用
这看起来不是什么大事,但确实能够简化代码。清单 6 说明了这种修改:去掉了 清单 6. 用新图片替换旧图片(一步完成)
当然这不是什么大的修改,但是说明了 DOM 编码中一件很重要的事:执行一项任务通常有多种方法。如果仔细审阅可用 DOM 方法看看是否有更简单的方法可以完成任务,很多时候都会发现可以将四五个步骤压缩为两三个步骤。
替换图片,(真正)简单的办法 既然指出了执行一项任务几乎总是有更简单的方法,现在就说明用兔子图片替换帽子图片的简单得多 的办法。阅读本文的过程中有没有想到这种方法?提示一下:与属性有关。 要记住,图片元素很大程度上是由其
这样就够了!看看清单 7,它显示了这种解决方案,包括整个网页。 清单 7. 修改 src 属性
这是 DOM 最棒的一点:更新属性的时候网页马上就会改变。只要图片指向新的文件,浏览器就加载该文件,页面就更新了。不需要重新加载,甚至不需要创建新的图片元素!结果仍然和图 3 相同,只不过代码简单得多了。
把兔子藏起来 现在网页看起来很漂亮,但是仍然有点原始。虽然兔子从帽子中跳出来了,但是屏幕下方的按钮仍然显示 Hocus Pocus! 和调用 修改按钮的标签 最简单的是当用户点击按钮之后改变它的标签。这样就不会看起来像还有什么魔法,网页中最糟糕的就是暗示用户错误的东西。在修改按钮的标签之前需要访问该节点,而在此之前需要引用按钮 ID。这是老套路了,清单 8 为按钮增加了 清单 8. 增加 id 属性
现在用 JavaScript 访问按钮很简单了:
当然,您可能已经输入了下面这行 JavaScript 来改变按钮的标签值。这里再次用到了
通过这个简单的 DOM 操作,兔子跳出来之后按钮的标签马上就会改变。现在,HTML 和完成的 清单 9. 完成的网页
把兔子收回去 从此新的按钮标签中可能已经猜到,现在要把兔子收回帽子中去。基本上和放兔子出来完全相反:将图片的
实际上仅仅把
事件处理程序 现在这个示例应用程序有一个大问题:虽然按钮的标签 改变了,但是单击按钮时的动作没有 变。幸运的是,当用户单击按钮时可以使用 DOM 改变事件或者发生的动作。因此,如果按钮上显示 Get back in that hat!,点击的时候需要运行
查看 HTML 就会发现这里处理的事件是 但是有点细微的地方:
因此在 HTML 中作这种修改很简单。看看清单 10,它切换按钮触发的函数。 清单 10. 改变按钮的 onClick 函数
这样就得到了一个完成的、可以使用的 DOM 应用程序。自己试试吧!
结束语 现在您应该非常熟悉 DOM 了。前面的文章介绍了使用 DOM 所涉及到的基本概念,详细地讨论了 API,现在又建立一个简单的基于 DOM 的应用程序。一定要花点时间仔细阅读本文,并自己尝试一下。 虽然这是专门讨论文档对象模型的系列文章的最后一期,但肯定还会看到其他关于 DOM 的文章。事实上,如果在 Ajax 和 JavaScript 世界中不使用 DOM 就很难做多少事,至少在一定程度上如此。无论要创建复杂的突出显示还是移动效果,或者仅仅处理文本块或图片,DOM 都提供了一种非常简单易用的访问 Web 页面的方式。 如果对如何使用 DOM 仍然感觉没有把握,花点时间温习一下这三篇文章;本系列的其他文章在使用 DOM 的时候不再多作解释,读者也不希望迷失在这些细节之中而忽略关于其他概念的重要信息,比如 XML 和 JSON。为了保证能够熟练地使用 DOM,自己编写几个基于 DOM 的应用程序试试,这样就很容易理解后面将要讨论的一些数据格式问题了。
下载
|
TrackBack:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/
转载于:https://www.cnblogs.com/hdjjun/archive/2008/07/04/1235652.html
掌握 Ajax,第 6 部分: 建立基于 DOM 的 Web 应用程序相关推荐
- 基于DOM的Web信息提取方法
摘 要 文章提出一种基于DOM的Web信息提取方法,通过归纳学习获得被提取信息的定位路径,利用XPath和XSLT在数据定位和数据转换方面的特点编写提取模式,根据网页元素与DOM节点对应关系,判断所 ...
- spring_在基于Spring的Web应用程序中使用Http Session
spring 在基于Spring的Web应用程序中拥有和使用Http会话有多种方法. 这是基于最近项目经验的总结. 方法1 只需在需要的HttpSession中注入即可. @Service publi ...
- 在Autodesk应用程序商店发布基于浏览器的Web应用程序
你一定已经听说过Autodesk应用程序商店了,通过Autodesk应用程序商店,你可以免费下载或购买来自全球的优秀开发者发布的应用程序,来帮助你更快更方便的完成你的工作.而且作为开发者,您也可以在A ...
- 在基于Spring的Web应用程序中使用Http Session
在基于Spring的Web应用程序中拥有和使用Http会话有多种方法. 这是基于最近项目经验的总结. 方法1 只需在需要的HttpSession中注入即可. @Service public class ...
- 一个非常轻巧的基于Groovy的Web应用程序项目模板
一个非常轻巧的基于Groovy的Web应用程序项目模板 您可能听说过该项目Grails是Ruby on Rails之类的Groovy版本的框架,该框架使您可以通过动态脚本轻松地创建Web应用程序. 尽 ...
- groovy 模板_一个非常轻巧的基于Groovy的Web应用程序项目模板
groovy 模板 一个非常轻巧的基于Groovy的Web应用程序项目模板 您可能听说过该项目Grails是Ruby on Rails之类的Groovy版本的框架,该框架使您可以通过动态脚本更轻松地创 ...
- 一个基于J2EE的web应用程序运行起来需要什么?
2019独角兽企业重金招聘Python工程师标准>>> Eclipse ?IDEA?这是目前市面上最常用的开发工具啦,我的理解是这些只是开发工具,是为了方便开发的,而不是web应用程 ...
- 使用docker构建并测试一个基于Sinatra的Web应用程序
内容来自<第一本Docker书>5.2节和博文整理而成 使用Docker构建并测试Web应用程序 在这个例子里,我们将创建一个应用程序,它接收输入的URL参数,并以JSON散列的结构输出到 ...
- 基于EasyUI的Web应用程序及过去一年的总结
前言 一个多月之前已经提交了离职申请,好在领导都已经批准了,过几天就办理手续了,在此感谢领导的栽培与挽留,感谢各位同事在工作中的给我的帮助,离开这个团队确实有一些不舍,不为别的,只因为这个团队的气氛特 ...
最新文章
- HQL中的substring
- 常用Linux运维命令
- 库克:iPhone决不妥协!不爽换安卓 iPhone 更有“安全性和隐私性”
- UDP --02--UDP广播数据
- SAP License:SAP上线期初导入方法
- power bi可视化表_滚动器可视化功能,用于Power BI Desktop中的股价变动
- mac修改国内镜像源
- 支付宝小程序设置服务器维护,教程|如何开发支付宝小程序服务端:蚂蚁金融云...
- v$active_session_history的wait_time和time_waited 列(转)
- R 语言 用黎曼和求近似 积分
- PID闭环底盘调试记录
- 工作生活要懂得劳逸结合
- android下怎样伪装mac,Android刷成iOS?史上最强苹果伪装教程
- Python实现ATM
- 手机开机卡在android画面,手机一直停在开机画面怎么解决【图文】
- mailbox的controller
- 大数据的变革:保险行业数据价值赋能
- 一文讲透肿瘤微生物组研究怎么做
- ng-options用法详解
- (史上最全)Abaqus和XFLOW流固耦合联合仿真
热门文章
- Python Number(数字)
- python学习笔记(五)——函数基础和函数参数
- 如何解决文件明明存在nginx却提示404
- python中列表生成式strip_列表生成式|让你的代码简洁又美观
- halcon知识:【1】二维码原理
- 简述ajax的重构原因,Ajax 重构的步骤
- php和mysql的概述_PHP的MySQL扩展:MySQL数据库概述_MySQL
- php丢弃,在IIS 7.5中,PHP吓坏了(连接丢失,连接被丢弃)
- mysql5.7.1.9二进制安装_mysql 5.7.9 linux二进制安装
- 无脑博士的试管们java_计蒜客 无脑博士和他的试管们