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

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

              <LI>发送请求。 </LI></OL>
            <P><A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html#code5">清单 
            5</A> 中的示例 Ajax 方法就是按照这个顺序组织的：</P><BR><A name=code5><B>清单 5. 发出 Ajax 
            请求</B></A><BR>
            <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
              <TBODY>
              <TR>
                <TD class=code-outline><PRE class=displaycode>
function callServer() {
  // Get the city and state from the web form
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  // Only go on if there are values for both fields
  if ((city == null) || (city == "")) return;
  if ((state == null) || (state == "")) return;
  // Build the URL to connect to
  var url = "/scripts/getZipCode.php?city=" + escape(city) + "&amp;state=" + escape(state);
  // Open a connection to the server
  xmlHttp.open("GET", url, true);
  // Setup a function for the server to run when it's done
  xmlHttp.onreadystatechange = updatePage;
  // Send the request
  xmlHttp.send(null);
}
</PRE></TD></TR></TBODY></TABLE><BR>
            <P>其中大部分代码意义都很明确。开始的代码使用基本 JavaScript 代码获取几个表单字段的值。然后设置一个 PHP 
            脚本作为链接的目标。要注意脚本 URL 的指定方式，city 和 state（来自表单）使用简单的 GET 参数附加在 URL 
            之后。</P>
            <P>然后打开一个连接，这是您第一次看到使用 
            <CODE>XMLHttpRequest</CODE>。其中指定了连接方法（GET）和要连接的 URL。最后一个参数如果设为 
            <CODE>true</CODE>，那么将请求一个异步连接（这就是 Ajax 的由来）。如果使用 
            <CODE>false</CODE>，那么代码发出请求后将等待服务器返回的响应。如果设为 
            <CODE>true</CODE>，当服务器在后台处理请求的时候用户仍然可以使用表单（甚至调用其他 JavaScript 
方法）。</P>
            <P><CODE>xmlHttp</CODE>（要记住，这是 <CODE>XMLHttpRequest</CODE> 对象实例）的 
            <CODE>onreadystatechange</CODE> 属性可以告诉服务器在运行<I>完成</I> 
            后（可能要用五分钟或者五个小时）做什么。因为代码没有等待服务器，必须让服务器知道怎么做以便您能作出响应。在这个示例中，如果服务器处理完了请求，一个特殊的名为 
            <CODE>updatePage()</CODE> 的方法将被触发。</P>
            <P>最后，使用值 <CODE>null</CODE> 调用 <CODE>send()</CODE>。因为已经在请求 URL 
            中添加了要发送给服务器的数据（city 和 
state），所以请求中不需要发送任何数据。这样就发出了请求，服务器按照您的要求工作。</P>
            <P>如果没有发现任何新鲜的东西，您应该体会到这是多么简单明了！除了牢牢记住 Ajax 的异步特性外，这些内容都相当简单。应该感激 
            Ajax 使您能够专心编写漂亮的应用程序和界面，而不用担心复杂的 HTTP 请求/响应代码。</P>
            <P><A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html#code5">清单 
            5</A> 中的代码说明了 Ajax 的易用性。数据是简单的文本，可以作为请求 URL 的一部分。用 GET 而不是更复杂的 POST 
            发送请求。没有 XML 和要添加的内容头部，请求体中没有要发送的数据；换句话说，这就是 Ajax 的乌托邦。</P>
            <P>不用担心，随着本系列文章的展开，事情会变得越来越复杂。您将看到如何发送 POST 
            请求、如何设置请求头部和内容类型、如何在消息中编码 
            XML、如何增加请求的安全性，可以做的工作还有很多！暂时先不用管那些难点，掌握好基本的东西就行了，很快我们就会建立一整套的 Ajax 
            工具库。</P>
            <P><A name=N102BF><SPAN class=smalltitle>处理响应</SPAN></A></P>
            <P>现在要面对服务器的响应了。现在只要知道两点：</P>
            <UL>
              <LI>什么也不要做，直到 <CODE>xmlHttp.readyState</CODE> 属性的值等于 4。 
              <LI>服务器将把响应填充到 <CODE>xmlHttp.responseText</CODE> 属性中。 </LI></UL>
            <P>其中的第一点，即就绪状态，将在下一篇文章中详细讨论，您将进一步了解 HTTP 
            请求的阶段，可能比您设想的还多。现在只要检查一个特定的值（4）就可以了（下一期文章中还有更多的值要介绍）。第二点，使用 
            <CODE>xmlHttp.responseText</CODE> 属性获得服务器的响应，这很简单。<A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html#code6">清单 
            6</A> 中的示例方法可供服务器根据 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html#code5">清单 
            5</A> 中发送的数据调用。</P><BR><A name=code6><B>清单 6. 处理服务器响应</B></A><BR>
            <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
              <TBODY>
              <TR>
                <TD class=code-outline><PRE class=displaycode>
function updatePage() {
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("zipCode").value = response;
  }
}
</PRE></TD></TR></TBODY></TABLE><BR>
            <P>这些代码同样既不难也不复杂。它等待服务器调用，如果是就绪状态，则使用服务器返回的值（这里是用户输入的城市和州的 ZIP 
            编码）设置另一个表单字段的值。于是包含 ZIP 编码的 <CODE>zipCode</CODE> 
            字段突然出现了，而用户<I>没有按任何按钮</I>！这就是前面所说的桌面应用程序的感觉。快速响应、动态感受等等，这些都只因为有了小小的一段 
            Ajax 代码。</P>
            <P>细心的读者可能注意到 <CODE>zipCode</CODE> 是一个普通的文本字段。一旦服务器返回 ZIP 
            编码，<CODE>updatePage()</CODE> 方法就用城市/州的 ZIP 
            编码设置那个字段的值，用户就可以改写该值。这样做有两个原因：保持例子简单，说明有时候可能<I>希望</I> 
            用户能够修改服务器返回的数据。要记住这两点，它们对于好的用户界面设计来说很重要。</P><BR>
            <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
              <TBODY>
              <TR>
                <TD><IMG height=1 alt="" 
                  src="掌握 Ajax，第 1 部分 Ajax 简介.files/blue_rule.gif" 
                  width="100%"><BR><IMG height=6 alt="" 
                  src="掌握 Ajax，第 1 部分 Ajax 简介.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，第 1 部分 Ajax 简介.files/c.gif" width="100%"><BR>
                  <TABLE cellSpacing=0 cellPadding=0 border=0>
                    <TBODY>
                    <TR>
                      <TD vAlign=center><IMG height=16 alt="" 
                        src="掌握 Ajax，第 1 部分 Ajax 简介.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-ajaxintro1.html#main"><B>回页首</B></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>
            <P><A name=N1030A><SPAN class=atitle>连接 Web 表单</SPAN></A></P>
            <P>还有什么呢？实际上没有多少了。一个 JavaScript 方法捕捉用户输入表单的信息并将其发送到服务器，另一个 
            JavaScript 方法监听和处理响应，并在响应返回时设置字段的值。所有这些实际上都依赖于<I>调用</I> 第一个 
            JavaScript 方法，它启动了整个过程。最明显的办法是在 HTML 表单中增加一个按钮，但这是 2001 
            年的办法，您不这样认为吗？还是像 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html#code7">清单 
            7</A> 这样利用 JavaScript 技术吧。</P><BR><A name=code7><B>清单 7. 启动一个 Ajax 
            过程</B></A><BR>
            <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
              <TBODY>
              <TR>
                <TD class=code-outline><PRE class=displaycode>
&lt;form&gt;
 &lt;p&gt;City: &lt;input type="text" name="city" id="city" size="25" 
       <SPAN class=boldcode>onChange="callServer();"</SPAN> /&gt;&lt;/p&gt;
 &lt;p&gt;State: &lt;input type="text" name="state" id="state" size="25" 
       <SPAN class=boldcode>onChange="callServer();"</SPAN> /&gt;&lt;/p&gt;
 &lt;p&gt;Zip Code: &lt;input type="text" name="zipCode" id="city" size="5" /&gt;&lt;/p&gt;
&lt;/form&gt;
</PRE></TD></TR></TBODY></TABLE><BR>
            <P>如果感觉这像是一段相当普通的代码，那就对了，正是如此！当用户在 city 或 state 
            字段中输入新的值时，<CODE>callServer()</CODE> 方法就被触发，于是 Ajax 
            开始运行了。有点儿明白怎么回事了吧？好，就是如此！</P><BR>
            <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
              <TBODY>
              <TR>
                <TD><IMG height=1 alt="" 
                  src="掌握 Ajax，第 1 部分 Ajax 简介.files/blue_rule.gif" 
                  width="100%"><BR><IMG height=6 alt="" 
                  src="掌握 Ajax，第 1 部分 Ajax 简介.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，第 1 部分 Ajax 简介.files/c.gif" width="100%"><BR>
                  <TABLE cellSpacing=0 cellPadding=0 border=0>
                    <TBODY>
                    <TR>
                      <TD vAlign=center><IMG height=16 alt="" 
                        src="掌握 Ajax，第 1 部分 Ajax 简介.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-ajaxintro1.html#main"><B>回页首</B></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>
            <P><A name=N10332><SPAN class=atitle>结束语</SPAN></A></P>
            <P>现在您可能已经准备开始编写第一个 Ajax 应用程序了，至少也希望认真读一下 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html#resources">参考资料</A> 
            中的那些文章了吧？但可以首先从这些应用程序如何工作的基本概念开始，对 <CODE>XMLHttpRequest</CODE> 
            对象有基本的了解。在下一期文章中，您将掌握这个对象，学会如何处理 JavaScript 和服务器的通信、如何使用 HTML 
            表单以及如何获得 DOM 句柄。</P>
            <P>现在先花点儿时间考虑考虑 Ajax 
            应用程序有多么强大。设想一下，当单击按钮、输入一个字段、从组合框中选择一个选项或者用鼠标在屏幕上拖动时，Web 
            表单能够立刻作出响应会是什么情形。想一想<I>异步</I> 究竟意味着什么，想一想 JavaScript 
            代码运行而且<I>不等待</I> 
            服务器对它的请求作出响应。会遇到什么样的问题？会进入什么样的领域？考虑到这种新的方法，编程的时候应如何改变表单的设计？</P>
            <P>如果在这些问题上花一点儿时间，与简单地剪切/粘贴某些代码到您根本不理解的应用程序中相比，收益会更多。在下一期文章中，我们将把这些概念付诸实践，详细介绍使应用程序按照这种方式工作所需要的代码。因此，现在先享受一下 
            Ajax 所带来的可能性吧。</P><BR><BR>
            <P><A name=resources><SPAN class=atitle>参考资料 
            </SPAN></A></P><B>学习</B><BR>
            <UL>
              <LI>您可以参阅本文在 developerWorks 全球站点上的 <A 
              href="http://www.ibm.com/developerworks/xml/library/wa-ajaxintro1.html?S_TACT=105AGX52&amp;S_CMP=cn-a-x" 
              target=_blank>英文原文</A>。<BR><BR>
              <LI>您可以参阅 <A 
              href="http://www.ibm.com/developerworks/cn/web/wa-ajaxintro/" 
              target=_blank>本系列的其他文章</A>。<BR><BR>
              <LI><A href="http://www.ibm.com/developerworks/cn/ajax/" 
              target=_blank>Ajax 技术资源中心</A>：developerWorks 上所有有关 Ajax 
              的问题都可以在这里找到解答。<BR><BR>
              <LI><A href="http://www.adaptivepath.com/">Adaptive Path</A> 
              是一家领先的用户界面设计公司，仔细阅读他们的网站可以更多地了解 Ajax。 <BR><BR>
              <LI>如果关心 Ajax 一词的来历，请看一看 <A 
              href="http://adaptivepath.com/team/jjg.php">Jesse James 
              Garre