📄 掌握 ajax，第 6 部分 建立基于 dom 的 web 应用程序.htm
字号:
</body>
</html>
</PRE></TD></TR></TBODY></TABLE><BR>
<P><A name=3.5><SPAN class=smalltitle>连接 JavaScript</SPAN></A></P>
<P>最后一步，可能也是最简单的，就是把 HTML 表单连接到刚刚编写的 JavaScript 函数。需要每当用户点击 <B>Hocus
Pocus!</B> 按钮的时候运行 <CODE>showRabbit()</CODE> 函数。为此只要向 HTML 中增加一个简单的
<CODE>onClick</CODE> 事件处理程序即可。</P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode><input type="button" value="Hocus Pocus!" <SPAN class=boldcode>onClick="showRabbit();"</SPAN> />
</PRE></TD></TR></TBODY></TABLE><BR>
<P>这种简单的 JavaScript 编程应该非常容易了。将其添加到 HTML 页面中，保存它然后在 Web
浏览器中打开。页面初看起来应该和<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#fig1">图
1</A> 相同，但是点击 <B>Hocus Pocus!</B> 后应该看到<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#fig3">图
3</A> 所示的结果。 </P><BR><A name=fig3><B>图 3. 兔子戏法</B></A><BR><IMG
height=628 alt=兔子戏法
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/rabbit-out.jpg"
width=572> <BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><IMG height=1 alt=""
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/blue_rule.gif"
width="100%"><BR><IMG height=6 alt=""
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/c.gif" width=8
border=0></TD></TR></TBODY></TABLE>
<TABLE class=no-print cellSpacing=0 cellPadding=0 align=right>
<TBODY>
<TR align=right>
<TD><IMG height=4 alt=""
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/c.gif"
width="100%"><BR>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD vAlign=center><IMG height=16 alt=""
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/u_bold.gif"
width=16 border=0><BR></TD>
<TD vAlign=top align=right><A class=fbox
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#main"><B>回页首</B></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>
<P><A name=4><SPAN class=atitle>替换图片，简单的办法</SPAN></A></P>
<P>如果回顾替换图片的步骤，再看看节点的各种方法，可能会注意到方法
<CODE>replaceNode()</CODE>。该方法可用于把一个节点替换为另一个节点。再考虑一下前面的步骤：</P>
<OL>
<LI>创建新的 <CODE>img</CODE> 元素。
<LI>访问当前 <CODE>img</CODE> 元素的父元素，也就是它的容器。
<LI>在已有 <CODE>img</CODE> 元素<I>之前</I> 插入新的 <CODE>img</CODE>
元素作为该容器的子元素。
<LI>删除原来的 <CODE>img</CODE> 元素。
<LI>连接起来以便在用户点击 <B>Hocus Pocus!</B> 的时候调用刚刚创建的 JavaScript 函数。
</LI></OL>
<P>使用 <CODE>replaceNode()</CODE> 可以减少需要的步骤数。可以将第 3 步和第 4 步合并在一起：</P>
<OL>
<LI>创建新的 <CODE>img</CODE> 元素。
<LI>访问当前 <CODE>img</CODE> 元素的父元素，也就是它的容器。
<LI>用创建的新元素替换旧的 <CODE>img</CODE> 元素。
<LI>连接起来以便在用户点击 <B>Hocus Pocus!</B> 的时候调用刚刚创建的 JavaScript 函数。
</LI></OL>
<P>这看起来不是什么大事，但确实能够简化代码。<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#listing6">清单
6</A> 说明了这种修改：去掉了 <CODE>insertBefore()</CODE> 和
<CODE>removeChild()</CODE> 方法调用。</P><BR><A name=listing6><B>清单 6.
用新图片替换旧图片（一步完成）</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
var newImage = document.createElement("img");
newImage.setAttribute("src", "rabbit-hat.gif");
var imgParent = hatImage.parentNode;
<SPAN class=boldcode>imgParent.replaceChild(newImage, hatImage);</SPAN>
}
</script>
</head>
<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" onClick="showRabbit();" />
</p>
</form>
</body>
</html>
</PRE></TD></TR></TBODY></TABLE><BR>
<P>当然这不是什么大的修改，但是说明了 DOM 编码中一件很重要的事：执行一项任务通常有多种方法。如果仔细审阅可用 DOM
方法看看是否有更简单的方法可以完成任务，很多时候都会发现可以将四五个步骤压缩为两三个步骤。</P><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><IMG height=1 alt=""
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/blue_rule.gif"
width="100%"><BR><IMG height=6 alt=""
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/c.gif" width=8
border=0></TD></TR></TBODY></TABLE>
<TABLE class=no-print cellSpacing=0 cellPadding=0 align=right>
<TBODY>
<TR align=right>
<TD><IMG height=4 alt=""
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/c.gif"
width="100%"><BR>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD vAlign=center><IMG height=16 alt=""
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/u_bold.gif"
width=16 border=0><BR></TD>
<TD vAlign=top align=right><A class=fbox
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#main"><B>回页首</B></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>
<P><A name=5><SPAN class=atitle>替换图片，（真正）简单的办法</SPAN></A></P>
<P>既然指出了执行一项任务几乎总是有更简单的方法，现在就说明用兔子图片替换帽子图片的<I>简单得多</I>
的办法。阅读本文的过程中有没有想到这种方法？提示一下：与属性有关。</P>
<P>要记住，图片元素很大程度上是由其 <CODE>src</CODE> 属性控制的，他引用了某个地方的文件（不论是本地 URI
还是外部 URL）。到目前为止，我们一直用新图片替换图片节点，但是直接<I>修改已有图片的 <CODE>src</CODE>
属性要简单得多！</I>这样就避免了创建新节点、寻找父节点和替换旧节点的所有工作，只要一步就能完成了：</P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>hatImage.setAttribute("src", "rabbit-hat.gif");
</PRE></TD></TR></TBODY></TABLE><BR>
<P>这样就够了！看看<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#listing7">清单
7</A>，它显示了这种解决方案，包括整个网页。</P><BR><A name=listing7><B>清单 7. 修改 src
属性</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
<SPAN class=boldcode>hatImage.setAttribute("src", "rabbit-hat.gif");</SPAN>
}
</script>
</head>
<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" onClick="showRabbit();" />
</p>
</form>
</body>
</html>
</PRE></TD></TR></TBODY></TABLE><BR>
<P>这是 DOM
最棒的一点：更新属性的时候网页马上就会改变。只要图片指向新的文件，浏览器就加载该文件，页面就更新了。不需要重新加载，甚至不需要创建新的图片元素！结果仍然和<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#fig3">图
3</A> 相同，只不过代码简单得多了。</P><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><IMG height=1 alt=""
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/blue_rule.gif"
width="100%"><BR><IMG height=6 alt=""
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/c.gif" width=8
border=0></TD></TR></TBODY></TABLE>
<TABLE class=no-print cellSpacing=0 cellPadding=0 align=right>
<TBODY>
<TR align=right>
<TD><IMG height=4 alt=""
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/c.gif"
width="100%"><BR>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD vAlign=center><IMG height=16 alt=""
src="掌握 Ajax，第 6 部分 建立基于 DOM 的 Web 应用程序.files/u_bold.gif"
width=16 border=0><BR></TD>
<TD vAlign=top align=right><A class=fbox
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#main"><B>回页首</B></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>
<P><A name=6><SPAN class=atitle>把兔子藏起来</SPAN></A></P>
<P>现在网页看起来很漂亮，但是仍然有点原始。虽然兔子从帽子中跳出来了，但是屏幕下方的按钮仍然显示 <B>Hocus
Pocus!</B> 和调用
<CODE>showRabbit()</CODE>。这就是说如果在兔子出来之后仍然点击按钮，就是在浪费处理时间。更重要的是，它毫无用处，而没有用的按钮不是好东西。我们来看看能否利用
DOM 再作一些修改，无论兔子在帽子里还是出来都让这个按钮派上用场。</P>
<P><A name=6.1><SPAN class=smalltitle>修改按钮的标签</SPAN></A></P>
<P>最简单的是当用户点击按钮之后改变它的标签。这样就不会看起来像还有什么魔法，网页中最糟糕的就是暗示用户错误的东西。在修改按钮的标签之前需要访问该节点，而在此之前需要引用按钮
ID。这是老套路了，<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro6/#listing8">清单
8</A> 为按钮增加了 <CODE>id</CODE> 属性。</P><BR><A name=listing8><B>清单 8. 增加
id 属性</B></A><BR>
<TABLE cel⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -