掌握 ajax，第 4 部分 利用 dom 进行 web 响应.htm

主要是我最近两月在公司通过百度学习的内容,有AJAX,DWR,JAVA实现文件的上传和下载.主要目的在与告诉大家一个成功程序员(JAVA)是如何学习的,需要学习什么内容.以及学习的态度.

            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#listing3">3</A> 
            中的 HTML，确保文本具有正确的父元素（而不管文本最终会如何显示在屏幕上）。</P><BR><BR><A 
            name=listing2><B>清单 2. 带有巧妙元素嵌套的标记</B></A><BR>
            <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
              <TBODY>
              <TR>
                <TD class=code-outline><PRE class=displaycode>
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;This is a little tricky&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;h1&gt;Pay &lt;u&gt;close&lt;/u&gt; attention, OK?&lt;/h1&gt;
  &lt;div&gt;
   &lt;p&gt;This p really isn't &lt;em&gt;necessary&lt;/em&gt;, but it makes the 
      &lt;span id="bold-text"&gt;structure &lt;i&gt;and&lt;/i&gt; the organization&lt;/span&gt;
      of the page easier to keep up with.&lt;/p&gt;
  &lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;
</PRE></TD></TR></TBODY></TABLE><BR><BR><BR><A name=listing3><B>清单 
            3. 更巧妙的元素嵌套</B></A><BR>
            <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
              <TBODY>
              <TR>
                <TD class=code-outline><PRE class=displaycode>
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;Trickier nesting, still&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;div id="main-body"&gt;
   &lt;div id="contents"&gt;
    &lt;table&gt; 
     &lt;tr&gt;&lt;th&gt;Steps&lt;/th&gt;&lt;th&gt;Process&lt;/th&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;Figure out the &lt;em&gt;root element&lt;/em&gt;.&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;Deal with the &lt;span id="code"&gt;head&lt;/span&gt; first,
         as it's usually easy.&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;Work through the &lt;span id="code"&gt;body&lt;/span&gt;.
         Just &lt;em&gt;take your time&lt;/em&gt;.&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;
   &lt;/div&gt;
   &lt;div id="closing"&gt;
    This link is &lt;em&gt;not&lt;/em&gt; active, but if it were, the answers
    to this &lt;a href="answers.html"&gt;&lt;img src="exercise.gif" /&gt;&lt;/a&gt; would
    be there. But &lt;em&gt;do the exercise anyway!&lt;/em&gt;
   &lt;/div&gt;
  &lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;
</PRE></TD></TR></TBODY></TABLE><BR>
            <P>在本文末的 GIF 文件 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#fig2">图 
            2 中的 tricky-solution.gif</A> 和 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#fig3">图 
            3 中的 trickier-solution.gif</A> 
            中将会找到这些练习的答案。不要偷看，先花些时间自动解答一下。这样能帮助您理解组织树时应用的规则有多么严格，并真正帮助您掌握 HTML 
            及其树结构。</P>
            <P><A name=N102D4><SPAN class=smalltitle>属性呢？</SPAN></A></P>
            <P>当您试图弄清楚如何处理属性时，是否遇到一些问题呢？前已提及，属性确实具有自己的对象类型，但属性确实不是显示它的元素的子元素，嵌套元素和文本不在同一属性 
            “级别”，您将注意到，清单 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#listing2">2</A> 
            和 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#listing3">3</A> 
            中练习的答案没有显示属性。</P>
            <P>属性事实上存储在浏览器使用的对象模型中，但它们有一些特殊情况。每个元素都有可用属性的列表，且与子对象列表是分离的。所以 
            <CODE>div</CODE> 元素可能有一个包含属性 “id” 和另一个属性 “class” 的列表。</P>
            <P>记住，元素的属性必须具有惟一的名称，也就是说，一个元素不能有两个 “id” 或两个 “class” 
            属性。这使得列表易于维护和访问。在下一篇文章将会看到，您可以简单调用诸如 <CODE>getAttribute("id")</CODE> 
            的方法来按名称获取属性的值。还可以用相似的方法调用来添加属性或设置（重置）现有属性的值。</P>
            <P>值得指出的是，属性名的惟一性使得该列表不同于子对象列表。<CODE>p</CODE> 元素可以有多个 
            <CODE>em</CODE> 
            元素，所以子对象列表可以包含多个重复项。尽管子项列表和属性列表的操作方式相似，但一个可以包含重复项（对象的子项），而一个不能（元素对象的属性）。最后，只有元素具有属性，所以文本对象没有用于存储属性的附加列表。</P>
            <P><A name=N102FE><SPAN class=smalltitle>凌乱的 HTML</SPAN></A></P>
            <P>在继续之前，谈到浏览器如何将标记转换为树表示，还有一个主题值得探讨，即浏览器如何处理不是格式良好的标记。<I>格式良好</I> 是 
            XML 广泛使用的一个术语，有两个基本意思：</P>
            <UL>
              <LI>每个开始标记都有一个与之匹配的结束标记。所以每个 <CODE>&lt;p&gt;</CODE> 在文档中与 
              <CODE>&lt;/p&gt;</CODE> 匹配，每个 <CODE>&lt;div&gt;</CODE> 与 
              <CODE>&lt;/div&gt;</CODE> 匹配，等等。 
              <LI>最里面的开始标记与最里面的结束标记相匹配，然后次里面的开始标记与次里面的结束标记相匹配，依此类推。所以 
              <CODE>&lt;b&gt;&lt;i&gt;bold and 
              italics&lt;/b&gt;&lt;/i&gt;</CODE> 是不合法的，因为最里面的开始标记 
              <CODE>&lt;i&gt;</CODE> 与最里面的结束标记 <CODE>&lt;b&gt;</CODE> 
              匹配不当。要使之格式良好，<I>要么</I> 切换开始标记顺序，<I>要么</I> 
              切换结束标记顺序。（如果两者都切换，则仍会出现问题）。 </LI></UL>
            <P>深入研究这两条规则。这两条规则不仅简化了文档的组织，还消除了不定性。是否应先应用粗体后应用斜体？或恰恰相反？如果觉得这种顺序和不定性不是大问题，那么请记住，CSS 
            允许规则覆盖其他规则，所以，例如，如果 <CODE>b</CODE> 元素中文本的字体不同于 <CODE>i</CODE> 
            元素中的字体，则格式的应用顺序将变得非常重要。因此，HTML 的格式良好性有着举足轻重的作用。</P>
            <P>如果浏览器收到了不是格式良好的文档，它只会尽力而为。得到的树结构在最好情况下将是作者希望的原始页面的近似，最坏情况下将面目全非。如果您曾将页面加载到浏览器中后看到完全出乎意料的结果，您可能在看到浏览器结果时会猜想您的结构应该如何，并沮丧地继续工作。当然，搞定这个问题相当简单：确保文档是格式良好的！如果不清楚如何编写标准化的 
            HTML，请咨询 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#resources">参考资料</A> 
            获得帮助。</P>
            <P><A name=N10347><SPAN class=atitle>DOM 简介</SPAN></A></P>
            <P>到目前为止，您已经知道浏览器将 Web 页面转换为对象表示，可能您甚至会猜想，对象表示是 DOM 树。DOM 表示 
            Document Object Model，是一个规范，可从 World Wide Web Consortium (W3C) 
            获得（您可以参阅 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#resources">参考资料</A> 
            中的一些 DOM 相关链接）。</P>
            <P>但更重要的是，DOM 定义了对象的类型和属性，从而允许浏览器表示标记。（本系列下一篇文章将专门讲述在 JavaScript 和 
            Ajax 代码中使用 DOM 的规范。）</P>
            <P><A name=N10358><SPAN class=smalltitle>文档对象</SPAN></A></P>
            <P>首先，需要访问对象模型本身。这非常容易；要在运行于 Web 页面上的任何 JavaScript 代码中使用内置 
            <CODE>document</CODE> 变量，可以编写如下代码：</P>
            <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
              <TBODY>
              <TR>
                <TD class=code-outline><PRE class=displaycode>var domTree = document;
</PRE></TD></TR></TBODY></TABLE><BR>
            <P>当然，该代码本身没什么用，但它演示了每个 Web 浏览器使得 <CODE>document</CODE> 对象可用于 
            JavaScript 代码，并演示了对象表示标记的完整树（<A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#fig1">图 
            1</A>）。</P>
            <P><A name=N10375><SPAN class=smalltitle>每项都是一个节点</SPAN></A></P>
            <P>显然，<CODE>document</CODE> 
            对象很重要，但这只是开始。在进一步深入之前，需要学习另一个术语：<I>节点</I>。您已经知道标记的每个部分都由一个对象表示，但它不只是一个任意的对象，它是特定类型的对象，一个 
            DOM 节点。更特定的类型，比如文本、元素和属性，都继承自这个基本的节点类型。所以可以有文本节点、元素节点和属性节点。</P>
            <P>如果已经有很多 JavaScript 编程经验，那您可能已经在使用 DOM 代码了。如果到目前为止您一直在跟踪本 Ajax 
            系列，那么现在您<I>一定</I> 使用 DOM 代码有一段时间了。例如，代码行 <CODE>var number = 
            document.getElementById("phone").value;</CODE> 使用 DOM 
            查找特定元素，然后检索该元素的值（在本例中是一个表单字段）。所以即使您没有意识到这一点，但您每次将 
            <CODE>document</CODE> 键入 JavaScript 代码时都会使用 DOM。</P>
            <P>详细解释已经学过的术语，DOM 树是对象的树，但更具体地说，它是<I>节点</I> 对象的树。在 Ajax 应用程序中或任何其他 
            JavaScript 
            中，可以使用这些节点产生下列效果，比如移除元素及其内容，突出显示特定文本，或添加新图像元素。因为都发生在客户端（运行在 Web 
            浏览器中的代码），所以这些效果立即发生，而不与服务器通信。最终结果通常是应用程序感觉起来响应更快，因为当请求转向服务器时以及解释响应时，Web 
            页面上的内容更改不会出现长时间的停顿。</P>
            <P>在多数编程语言中，需要学习每种节点类型的实际对象名称，学习可用的属性，并弄清楚类型和强制转换；但在 JavaScript 
            中这都不是必需的。您可以只创建一个变量，并为它分配您希望的对象（正如您已经看到的）：</P>
            <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
              <TBODY>
              <TR>
                <TD class=code-outline><PRE class=displaycode>var domTree = document;
var phoneNumberElement = document.getElementById("phone");
var phoneNumber = phoneNumberElement.value;
</PRE></TD></TR></TBODY></TABLE><BR>
            <P>没有类型，JavaScript 根据需要创建变量并为其分配正确的类型。结果，从 JavaScript 中使用 DOM 
            变得微不足道（将来有一篇文章会专门讲述与 XML 相关的 DOM，那时将更加巧妙）。</P>
            <P><A name=N103A4><SPAN class=atitle>结束语</SPAN></A></P>
            <P>在这里，我要给您留一点悬念。显然，这并非是对 DOM 完全详尽的说明；事实上，本文不过是 DOM 的简介。DOM 
            的内容要远远多于我今天介绍的这些！</P>
            <P>本系列的下一篇文章将扩展这些观点，并深入探讨如何在 JavaScript 中使用 DOM 来更新 Web 页面、快速更改 HTML 
            并为您的用户创建更交互的体验。在后面专门讲述在 Ajax 请求中使用 XML 的文章中，我将再次返回来讨论 DOM。所以要熟悉 
            DOM，它是 Ajax 应用程序的一个主要部分。</P>
            <P>此时，深入了解 DOM 将十分简单，比如详细设计如何在 DOM 
            树中移动、获得元素和文本的值、遍历节点列表，等等，但这可能会让您有这种印象，即 DOM 是关于代码的，而事实上并非如此。</P>
            <P>在阅读下一篇文章之前，试着思考一下树结构并用一些您自己的 HTML 实践一下，以查看 Web 浏览器是如何将 HTML 
            转换为标记的树视图的。此外，思考一下 DOM 树的组织，并用本文介绍的特殊情况实践一下：属性、有元素混合在其中的文本、<I>没有</I> 
            文本内容的元素（比如 <CODE>img</CODE> 元素）。</P>
            <P>如果扎实掌握了这些概念，然后学习了 JavaScript 和 DOM 的语法（下一篇文章），则会使得响应更为容易。</P>
            <P>而且不要忘了，这里有清单 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#listing2">2</A> 
            和 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro4/#listing3">3</A> 
            的答案，其中还包含了示例代码！</P><BR><BR><A name=fig2><B>图 2. 清单 2 
            的答案</B></A><BR><IMG height=400 alt="清单 2 的答案" 
            src="掌握 Ajax，第 4 部分 利用 DOM 进行 Web 响应.files/tricky-solution.gif" 
            width=407> <BR><BR><BR><A name=fig3><B>图 3. 清单 3 的答案</B></A><BR><IMG 
            height=316 alt="清单 3 的答案" 
            src="掌握 Ajax，第 4 部分 利用 DOM 进行 Web