掌握 ajax，第 1 部分 ajax 简介.htm

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

                          <FORM name=email 
                          action=https://www.ibm.com/developerworks/secure/email-it.jsp><INPUT 
                          type=hidden 
                          value="Ajax 由 HTML、JavaScript、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本系列的作者是一位 Ajax 专家，他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱，包括 XMLHttpRequest 对象。" 
                          name=body><INPUT type=hidden 
                          value="掌握 Ajax，第 1 部分: Ajax 简介" name=subject><INPUT 
                          type=hidden value=cn name=lang>
                          <SCRIPT language=JavaScript type=text/javascript>
<!--
document.write('<tr valign="top"><td width="8"><img src="//www.ibm.com/i/c.gif" width="8" height="1" alt=""/></td><td width="16"><img src="//www.ibm.com/i/v14/icons/em.gif" height="16" width="16" vspace="3" alt="将此页作为电子邮件发送" /></td><td width="122"><p><a class="smallplainlink" href="javascript:document.email.submit();"><b>将此页作为电子邮件发送</b></a></p></td></tr>');
//-->
</SCRIPT>
                          <NOSCRIPT>
                          <TBODY>
                          <TR vAlign=top>
                            <TD width=8><IMG height=1 alt="" 
                              src="掌握 Ajax，第 1 部分 Ajax 简介.files/c.gif" 
                            width=8></TD>
                            <TD width=16><IMG height=16 alt="" 
                              src="掌握 Ajax，第 1 部分 Ajax 简介.files/c.gif" 
                            width=16></TD>
                            <TD class=small width=122>
                              <P><SPAN class=ast>未显示需要 JavaScript 
                              的文档选项</SPAN></P></TD></TR></NOSCRIPT></FORM>
                          <TR vAlign=top>
                            <TD width=8><IMG height=1 alt="" 
                              src="掌握 Ajax，第 1 部分 Ajax 简介.files/c.gif" 
                            width=8></TD>
                            <TD width=16><IMG height=16 alt="" 
                              src="掌握 Ajax，第 1 部分 Ajax 简介.files/fw_bold.gif" 
                              width=16 vspace=3 border=0></TD>
                            <TD width=122>
                              <P><A class=smallplainlink 
                              href="http://www.ibm.com/developerworks/community/"><B>讨论</B></A></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><!--START RESERVED FOR FUTURE USE INCLUDE FILES--><!-- 03/20/06 updated by gretchen --><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
                    <TBODY>
                    <TR>
                      <TD class=v14-header-2-small>拓展 Tomcat 
                  应用</TD></TR></TBODY></TABLE>
                  <TABLE class=v14-gray-table-border cellSpacing=0 cellPadding=0 
                  border=0>
                    <TBODY>
                    <TR>
                      <TD class=no-padding width=150>
                        <TABLE cellSpacing=0 cellPadding=0 width=143 border=0>
                          <TBODY>
                          <TR vAlign=top>
                            <TD width=8><IMG height=1 alt="" 
                              src="掌握 Ajax，第 1 部分 Ajax 简介.files/c.gif" 
                            width=8></TD>
                            <TD><IMG height=16 alt="" 
                              src="掌握 Ajax，第 1 部分 Ajax 简介.files/fw_bold.gif" 
                              width=16 vspace=3 border=0></TD>
                            <TD width=125>
                              <P><A class=smallplainlink 
                              href="http://www.ibm.com/developerworks/cn/kickstart/webserver.html?S_TACT=105AGX52&amp;S_CMP=simpleart">下载 
                              IBM 开源 J2EE 应用服务器 WAS CE 新版本 V1.1</A> 
                          </P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><!--END RESERVED FOR FUTURE USE INCLUDE FILES--><BR></TD></TR></TBODY></TABLE>
            <P>级别: 初级</P>
            <P><A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html#author">Brett 
            McLaughlin</A> (<A 
            href="mailto:[e-mail]?subject=Ajax 简介&amp;cc=[e-mail]">mailto:[e-mail]?subject=Ajax 
            简介&amp;cc=[e-mail]</A>), 作家，编辑, O'Reilly Media Inc.<BR></P>
            <P>2006 年 1 月 04 日</P>
            <BLOCKQUOTE>Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 
              组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。<A 
              href="http://www.ibm.com/developerworks/cn/web/wa-ajaxintro/">本系列</A>的作者是一位 
              Ajax 专家，他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 
              Ajax 核心概念的神秘面纱，包括 XMLHttpRequest 对象。</BLOCKQUOTE><!--START RESERVED FOR FUTURE USE INCLUDE FILES--><!-- include java script once we verify teams wants to use this and it will work on dbcs and cyrillic characters --><!--END RESERVED FOR FUTURE USE INCLUDE FILES-->
            <P>五年前，如果不知道 XML，您就是一只无人重视的丑小鸭。十八个月前，Ruby 成了关注的中心，不知道 Ruby 
            的程序员只能坐冷板凳了。今天，如果想跟上最新的技术时尚，那您的目标就是 Ajax。</P>
            <P>但是，Ajax 不<I>仅仅</I> 是一种时尚，它是一种构建网站的强大方法，而且不像学习一种全新的语言那样困难。</P>
            <TABLE cellSpacing=0 cellPadding=0 width="40%" align=right 
              border=0><TBODY>
              <TR>
                <TD width=10><IMG height=1 alt="" 
                  src="掌握 Ajax，第 1 部分 Ajax 简介.files/c.gif" width=10></TD>
                <TD>
                  <TABLE cellSpacing=0 cellPadding=5 width="100%" border=1>
                    <TBODY>
                    <TR>
                      <TD bgColor=#eeeeee>
                        <P>请访问 <A 
                        href="http://www.ibm.com/developerworks/cn/ajax/">Ajax 
                        技术资源中心</A>，这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 
                        和新闻。任何新信息都能在这里找到。</P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
            <P>但在详细探讨 Ajax 是什么之前，先让我们花几分钟了解 Ajax <I>做</I> 
            什么。目前，编写应用程序时有两种基本的选择：</P>
            <UL>
              <LI>桌面应用程序 
              <LI>Web 应用程序 </LI></UL>
            <P>两者是类似的，桌面应用程序通常以 CD 
            为介质（有时候可从网站下载）并完全安装到您的计算机上。桌面应用程序可能使用互联网下载更新，但运行这些应用程序的代码在桌面计算机上。Web 
            应用程序运行在某处的 Web 服务器上 —— 毫不奇怪，要通过 Web 浏览器访问这种应用程序。</P>
            <P>不过，比这些应用程序的运行代码放在何处更重要的是，应用程序如何运转以及如何与其进行交互。桌面应用程序一般很快（就在您的计算机上运行，不用等待互联网连接），具有漂亮的用户界面（通常和操作系统有关）和非凡的动态性。可以单击、选择、输入、打开菜单和子菜单、到处巡游，基本上不需要等待。</P>
            <P>另一方面，Web 应用程序是最新的潮流，它们提供了在桌面上不能实现的服务（比如 Amazon.com 和 eBay）。但是，伴随着 
            Web 的强大而出现的是等待，等待服务器响应，等待屏幕刷新，等待请求返回和生成新的页面。</P>
            <P>显然这样说过于简略了，但基本的概念就是如此。您可能已经猜到，Ajax 尝试建立桌面应用程序的功能和交互性，与不断更新的 Web 
            应用程序之间的桥梁。可以使用像桌面应用程序中常见的动态用户界面和漂亮的控件，不过是在 Web 应用程序中。</P>
            <P>还等什么呢？我们来看看 Ajax 如何将笨拙的 Web 界面转化成能迅速响应的 Ajax 应用程序吧。</P>
            <P><A name=N100A7><SPAN class=atitle>老技术，新技巧</SPAN></A></P>
            <P>在谈到 Ajax 
            时，实际上涉及到多种技术，要灵活地运用它必须深入了解这些不同的技术（本系列的头几篇文章将分别讨论这些技术）。好消息是您可能已经非常熟悉其中的大部分技术，更好的是这些技术都很容易学习，并不像完整的编程语言（如 
            Java 或 Ruby）那样困难。</P>
            <TABLE cellSpacing=0 cellPadding=0 width="40%" align=right 
              border=0><TBODY>
              <TR>
                <TD width=10><IMG height=1 alt="" 
                  src="掌握 Ajax，第 1 部分 Ajax 简介.files/c.gif" width=10></TD>
                <TD>
                  <TABLE cellSpacing=0 cellPadding=5 width="100%" border=1>
                    <TBODY>
                    <TR>
                      <TD bgColor=#eeeeee><A name=N100B2><B>Ajax 
                        的定义</B></A><BR>
                        <P>顺便说一下，Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 
                        等）的缩写。这个短语是 Adaptive Path 的 Jesse James Garrett 发明的（请参阅 
                        <A 
                        href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html#resources">参考资料</A>），按照 
                        Jesse 的解释，这<I>不是</I> 
              个首字母缩写词。</P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
            <P>下面是 Ajax 应用程序所用到的基本技术：</P>
            <UL>
              <LI>HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。 
              <LI>JavaScript 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。 
              <LI>DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用 
              <CODE>div</CODE>、<CODE>span</CODE> 和其他动态 HTML 元素来标记 HTML。 
              <LI>文档对象模型 DOM 用于（通过 JavaScript 代码）处理 HTML 结构和（某些情况下）服务器返回的 XML。 
              </LI></UL>
            <P>我们来进一步分析这些技术的职责。以后的文章中我将深入讨论这些技术，目前只要熟悉这些组件和技术就可以了。对这些代码越熟悉，就越容易从对这些技术的零散了解转变到真正把握这些技术（同时也真正打开了 
            Web 应用程序开发的大门）。</P>
            <P><A name=N100DF><SPAN class=smalltitle>XMLHttpRequest 
            对象</SPAN></A></P>
            <P>要了解的一个对象可能对您来说也是最陌生的，即 <CODE>XMLHttpRequest</CODE>。这是一个 
            JavaScript 对象，创建该对象很简单，如<A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html#code1">清单 
            1</A> 所示。</P><BR><A name=code1><B>清单 1. 创建新的 XMLHttpRequest 
            对象</B></A><BR>
            <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
              <TBODY>
              <TR>
                <TD class=code-outline><PRE class=displaycode>
&lt;script language="javascript" type="text/javascript"&gt;
var xmlHttp = new XMLHttpRequest();
&lt;/script&gt;
</PRE></TD></TR></TBODY></TABLE><BR>
            <P>下一期文章中将进一步讨论这个对象，现在要知道这是处理所有服务器通信的对象。继续阅读之前，先停下来想一想：通过 
            <CODE>XMLHttpRequest</CODE> 对象与服务器进行对话的是 <I>JavaScript</I> 
            技术。这不是一般的应用程序流，这恰恰是 Ajax 的强大功能的来源。</P>
            <P>在一般的 Web 应用程序中，用户填写表单字段并单击 <I>Submit</I> 
            按钮。然后整个表单发送到服务器，服务器将它转发给处理表单的脚本（通常是 PHP 或 Java，也可能是 CGI 
            进程或者类似的东西），脚本执行完成后再发送回全新的页面。该页面可能是带有已经填充某些数据的新表单的 
            HTML，也可能是确认页面，或者是具有根据原来表单中输入数据选择的某些选项的页面。当然，在服务器上的脚本或程序处理和返回新表单时用户必须等待。屏幕变成一片空白，等到服务器返回数据后再重新绘制。这就是交互性差的原因，用户得不到立即反馈，因此感觉不同于桌面应用程序。</P>
            <P>Ajax 基本上就是把 JavaScript 技术和 <CODE>XMLHttpRequest</CODE> 对象放在 Web 
            表单和服务器<I>之间</I>。当用户填写表单时，数据发送给一些 JavaScript 代码而<I>不是</I> 
            直接发送给服务器。相反，JavaScript 
            代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说，JavaScript 
            代码在幕后发送请求，用户甚至不知道请求的发出。更好的是，请求是异步发送的，就是说 JavaScript 
            代码（和用户）不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。</P>
            <P>然后，服务器将数据返回 JavaScript 代码（仍然在 Web 
            表单中），后者决定如何处理这些数据。它可以迅速更新表单数据，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。JavaScript 
            代码甚至可以对收到的数据执行某种计算，再发送另一个请求，完全不需要用户干预！这就是 
            <CODE>XMLHttpRequest</CODE> 
            的强大之处。它可以根据需要自行与服务器进行交互，用户甚至可以完全不知道幕后发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验，但是背后又拥有互联网的全部强大力量。</P>
            <P><A name=N1011D><SPAN class=smalltitle>加入一些 
            JavaScript</SPAN></A></P>
            <P>得到 <CODE>XMLHttpRequest</CODE> 的句柄后，其他的 JavaScript 
            代码就非常简单了。事实上，我们将使用 JavaScript 代码完成非常基本的任务：</P>
            <UL>
              <LI>获取表单数据：JavaScript 代码很容易从 HTML 表单中抽取数据并发送到服务器。 
              <LI>修改表单上的数据：更新表单也很简单，从设置字段值到迅速替换图像。 
              <LI>解析 HTML 和 XML：使用 JavaScript 代码操纵 DOM（请参阅 <A 
              href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html#dom">下一节</A>），处理 
              HTML 表单服务器返回的 XML 数据的结构。 </LI></UL>
            <P>对于前两点，需要非常熟悉 <CODE>getElementById()</CODE> 方法，如 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html#code2">清单 
            2</A> 所示。</P><BR><A name=code2><B>清单 2. 用 JavaScript 
            代码捕获和设置字段值</B></A><BR>