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

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

            <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
              <TBODY>
              <TR>
                <TD class=code-outline><PRE class=displaycode>
// Get the value of the "phone" field and stuff it in a variable called phone
var phone = document.getElementById("phone").value;
// Set some values on a form using an array called response
document.getElementById("order").value = response[0];
document.getElementById("address").value = response[1];
</PRE></TD></TR></TBODY></TABLE><BR>
            <P>这里没有特别需要注意的地方，真是好极了！您应该认识到这里并没有非常复杂的东西。只要掌握了 
            <CODE>XMLHttpRequest</CODE>，Ajax 应用程序的其他部分就是如 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html#code2">清单 
            2</A> 所示的简单 JavaScript 代码了，混合有少量的 HTML。同时，还要用一点儿 DOM，我们就来看看吧。</P>
            <P><A name=dom><SPAN class=smalltitle>以 DOM 结束</SPAN></A></P>
            <P>最后还有 DOM，即文档对象模型。可能对有些读者来说 DOM 有点儿令人生畏，HTML 设计者很少使用它，即使 
            JavaScript 程序员也不大用到它，除非要完成某项高端编程任务。大量使用 DOM 的<I>是</I> 复杂的 Java 和 
            C/C++ 程序，这可能就是 DOM 被认为难以学习的原因。</P>
            <P>幸运的是，在 JavaScript 技术中使用 DOM 很容易，也非常直观。现在，按照常规也许应该说明如何使用 
            DOM，或者至少要给出一些示例代码，但这样做也可能误导您。即使不理会 DOM，仍然能深入地探讨 
            Ajax，这也是我准备采用的方法。以后的文章将再次讨论 DOM，现在只要知道可能需要 DOM 就可以了。当需要在 JavaScript 
            代码和服务器之间传递 XML 和改变 HTML 表单的时候，我们再深入研究 DOM。没有它也能做一些有趣的工作，因此现在就把 DOM 
            放到一边吧。</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=N10167><SPAN class=atitle>获取 Request 对象</SPAN></A></P>
            <P>有了上面的基础知识后，我们来看看一些具体的例子。<CODE>XMLHttpRequest</CODE> 是 Ajax 
            应用程序的核心，而且对很多读者来说可能还比较陌生，我们就从这里开始吧。从 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html#code1">清单 
            1</A> 可以看出，创建和使用这个对象非常简单，不是吗？等一等。</P>
            <P>还记得几年前的那些讨厌的浏览器战争吗？没有一样东西在不同的浏览器上得到同样的结果。不管您是否相信，这些战争仍然在继续，虽然规模较小。但令人奇怪的是，<CODE>XMLHttpRequest</CODE> 
            成了这场战争的牺牲品之一。因此获得 <CODE>XMLHttpRequest</CODE> 
            对象可能需要采用不同的方法。下面我将详细地进行解释。</P>
            <P><A name=N10183><SPAN class=smalltitle>使用 Microsoft 
            浏览器</SPAN></A></P>
            <P>Microsoft 浏览器 Internet Explorer 使用 MSXML 解析器处理 XML（可以通过 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html#resources">参考资料</A> 
            进一步了解 MSXML）。因此如果编写的 Ajax 应用程序要和 Internet Explorer 
            打交道，那么必须用一种特殊的方式创建对象。</P>
            <P>但并不是这么简单。根据 Internet Explorer 中安装的 JavaScript 技术版本不同，MSXML 
            实际上有两种不同的版本，因此必须对这两种情况分别编写代码。请参阅 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html#code3">清单 
            3</A>，其中的代码在 Microsoft 浏览器上创建了一个 
            <CODE>XMLHttpRequest</CODE>。</P><BR><A name=code3><B>清单 3. 在 
            Microsoft 浏览器上创建 XMLHttpRequest 对象</B></A><BR>
            <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
              <TBODY>
              <TR>
                <TD class=code-outline><PRE class=displaycode>
var xmlHttp = false;
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
</PRE></TD></TR></TBODY></TABLE><BR>
            <P>您对这些代码可能还不完全理解，但没有关系。当本系列文章结束的时候，您将对 JavaScript 
            编程、错误处理、条件编译等有更深的了解。现在只要牢牢记住其中的两行代码：</P>
            <P><CODE>xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");</CODE></P>
            <P>和</P>
            <P><CODE>xmlHttp = new 
            ActiveXObject("Microsoft.XMLHTTP");</CODE>。</P>
            <P>这两行代码基本上就是尝试使用一个版本的 MSXML 创建对象，如果失败则使用另一个版本创建该对象。不错吧？如果都不成功，则将 
            <CODE>xmlHttp</CODE> 变量设为 false，告诉您的代码出现了问题。如果出现这种情况，可能是因为安装了非 
            Microsoft 浏览器，需要使用不同的代码。</P>
            <P><A name=N101BD><SPAN class=smalltitle>处理 Mozilla 和非 Microsoft 
            浏览器</SPAN></A></P>
            <P>如果选择的浏览器不是 Internet Explorer，或者为非 Microsoft 
            浏览器编写代码，就需要使用不同的代码。事实上就是 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html#code1">清单 
            1</A> 所示的一行简单代码：</P>
            <P><CODE>var xmlHttp = new XMLHttpRequest object;</CODE>。</P>
            <P>这行简单得多的代码在 Mozilla、Firefox、Safari、Opera 以及基本上所有以任何形式或方式支持 Ajax 的非 
            Microsoft 浏览器中，创建了 <CODE>XMLHttpRequest</CODE> 对象。</P>
            <P><A name=N101D6><SPAN class=smalltitle>结合起来</SPAN></A></P>
            <P>关键是要支持<I>所有</I> 浏览器。谁愿意编写一个只能用于 Internet Explorer 或者非 Microsoft 
            浏览器的应用程序呢？或者更糟，要编写一个应用程序两次？当然不！因此代码要同时支持 Internet Explorer 和非 
            Microsoft 浏览器。<A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html#code4">清单 
            4</A> 显示了这样的代码。</P><BR><A name=code4><B>清单 4. 以支持多种浏览器的方式创建 
            XMLHttpRequest 对象</B></A><BR>
            <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
              <TBODY>
              <TR>
                <TD class=code-outline><PRE class=displaycode>
/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version &gt;= 5)
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
@end @*/
if (!xmlHttp &amp;&amp; typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}
</PRE></TD></TR></TBODY></TABLE><BR>
            <P>现在先不管那些注释掉的奇怪符号，如 <CODE>@cc_on</CODE>，这是特殊的 JavaScript 
            编译器命令，将在下一期针对 <CODE>XMLHttpRequest</CODE> 的文章中详细讨论。这段代码的核心分为三步：</P>
            <OL>
              <LI>建立一个变量 <CODE>xmlHttp</CODE> 来引用即将创建的 
              <CODE>XMLHttpRequest</CODE> 对象。 
              <LI>尝试在 Microsoft 浏览器中创建该对象： 
              <UL>
                <LI>尝试使用 <CODE>Msxml2.XMLHTTP</CODE> 对象创建它。 
                <LI>如果失败，再尝试 <CODE>Microsoft.XMLHTTP</CODE> 对象。 </LI></UL>
              <LI>如果仍然没有建立 <CODE>xmlHttp</CODE>，则以非 Microsoft 的方式创建该对象。 </LI></OL>
            <P>最后，<CODE>xmlHttp</CODE> 应该引用一个有效的 <CODE>XMLHttpRequest</CODE> 
            对象，无论运行什么样的浏览器。</P>
            <P><A name=N1022F><SPAN class=smalltitle>关于安全性的一点说明</SPAN></A></P>
            <P>安全性如何呢？现在浏览器允许用户提高他们的安全等级，关闭 JavaScript 
            技术，禁用浏览器中的任何选项。在这种情况下，代码无论如何都不会工作。此时必须适当地处理问题，这需要单独的一篇文章来讨论，要放到以后了（这个系列够长了吧？不用担心，读完之前也许您就掌握了）。现在要编写一段健壮但不够完美的代码，对于掌握 
            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=N10237><SPAN class=atitle>Ajax 世界中的请求/响应</SPAN></A></P>
            <P>现在我们介绍了 Ajax，对 <CODE>XMLHttpRequest</CODE> 
            对象以及如何创建它也有了基本的了解。如果阅读得很仔细，您可能已经知道与服务器上的 Web 应用程序打交道的是 JavaScript 
            技术，而不是直接提交给那个应用程序的 HTML 表单。</P>
            <P>还缺少什么呢？到底如何使用 
            <CODE>XMLHttpRequest</CODE>。因为这段代码非常重要，您编写的<I>每个</I> Ajax 
            应用程序都要以某种形式使用它，先看看 Ajax 的基本请求/响应模型是什么样吧。</P>
            <P><A name=N1024E><SPAN class=smalltitle>发出请求</SPAN></A></P>
            <P>您已经有了一个崭新的 <CODE>XMLHttpRequest</CODE> 对象，现在让它干点活儿吧。首先需要一个 Web 
            页面能够调用的 JavaScript 方法（比如当用户输入文本或者从菜单中选择一项时）。接下来就是在所有 Ajax 
            应用程序中基本都雷同的流程：</P>
            <OL>
              <LI>从 Web 表单中获取需要的数据。 
              <LI>建立要连接的 URL。 
              <LI>打开到服务器的连接。 
              <LI>设置服务器在完成后要运行的函数。