掌握 ajax，第 2 部分 使用 javascript 和 ajax 发出异步请求.htm

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

  request = false;
}
if (!request)
  alert("Error initializing XMLHttpRequest!");</SPAN>
&lt;/script&gt;
</PRE></TD></TR></TBODY></TABLE><BR>
            <P>一定要理解这些步骤：</P>
            <OL>
              <LI>创建一个新变量 <CODE>request</CODE> 并赋值 false。后面将使用 false 
              作为判定条件，它表示还没有创建 <CODE>XMLHttpRequest</CODE> 对象。 
              <LI>增加 try/catch 块： 
              <OL>
                <LI>尝试创建 <CODE>XMLHttpRequest</CODE> 对象。 
                <LI>如果失败（<CODE>catch (failed)</CODE>）则保证 <CODE>request</CODE> 
                的值仍然为 false。 </LI></OL>
              <LI>检查 <CODE>request</CODE> 是否仍为 false（如果一切正常就不会是 false）。 
              <LI>如果出现问题（<CODE>request</CODE> 是 false）则使用 JavaScript 
              警告通知用户出现了问题。 </LI></OL>
            <P>代码非常简单，对大多数 JavaScript 和 Web 
            开发人员来说，真正理解它要比读写代码花更长的时间。现在已经得到了一段带有错误检查的 
            <CODE>XMLHttpRequest</CODE> 对象创建代码，还可以告诉您哪儿出了问题。</P>
            <P><A name=N10183><SPAN class=smalltitle>应付 Microsoft</SPAN></A></P>
            <P>看起来似乎一切良好，至少在用 Internet Explorer 试验这些代码之前是这样的。如果这样试验的话，就会看到 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/#fig1">图 
            1</A> 所示的糟糕情形。</P><BR><BR><A name=fig1><B>图 1. Internet Explorer 
            报告错误</B></A><BR><IMG height=409 alt="Internet Explorer 报告错误" 
            src="掌握 Ajax，第 2 部分 使用 JavaScript 和 Ajax 发出异步请求.files/ie_broken.jpg" 
            width=500> <BR>
            <TABLE cellSpacing=0 cellPadding=0 width="45%" align=right 
              border=0><TBODY>
              <TR>
                <TD width=10><IMG height=1 alt="" 
                  src="掌握 Ajax，第 2 部分 使用 JavaScript 和 Ajax 发出异步请求.files/c.gif" 
                  width=10></TD>
                <TD>
                  <TABLE cellSpacing=0 cellPadding=5 width="100%" border=1>
                    <TBODY>
                    <TR>
                      <TD bgColor=#eeeeee><A name=N101A3><B>Microsoft 
                        参与了吗？</B></A><BR>关于 Ajax 和 Microsoft 
                        对该领域不断增长的兴趣和参与已经有很多文章进行了介绍。事实上，据说 Microsoft 最新版本的 
                        Internet Explorer —— version 7.0，将在 2006 年下半年推出 —— 
                        将开始直接支持 <CODE>XMLHttpRequest</CODE>，让您使用 
                        <CODE>new</CODE> 关键字代替所有的 <CODE>Msxml2.XMLHTTP</CODE> 
                        创建代码。但不要太激动，仍然需要支持旧的浏览器，因此跨浏览器代码不会很快消失。 
                  </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
            <P>显然有什么地方不对劲，而 Internet Explorer 很难说是一种过时的浏览器，因为全世界有 70% 在使用 
            Internet Explorer。换句话说，如果不支持 Microsoft 和 Internet Explorer 就不会受到 Web 
            世界的欢迎！因此我们需要采用不同的方法处理 Microsoft 浏览器。</P>
            <P>经验证发现 Microsoft 支持 Ajax，但是其 <CODE>XMLHttpRequest</CODE> 
            版本有不同的称呼。事实上，它将其称为<I>几种</I> 不同的东西。如果使用较新版本的 Internet 
            Explorer，则需要使用对象 <CODE>Msxml2.XMLHTTP</CODE>，而较老版本的 Internet 
            Explorer 则使用 <CODE>Microsoft.XMLHTTP</CODE>。我们需要支持这两种对象类型（同时还要支持非 
            Microsoft 浏览器）。请看看 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/#code4">清单 
            4</A>，它在前述代码的基础上增加了对 Microsoft 的支持。</P><BR><BR><A name=code4><B>清单 
            4. 增加对 Microsoft 浏览器的支持</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 request = false;
try {
  request = new XMLHttpRequest();
} <SPAN class=boldcode>catch (trymicrosoft) {
  try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (othermicrosoft) {
    try {
      request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (failed) {
      request = false;
    }
  }</SPAN>
}
if (!request)
  alert("Error initializing XMLHttpRequest!");
&lt;/script&gt;
</PRE></TD></TR></TBODY></TABLE><BR>
            <P>很容易被这些花括号迷住了眼睛，因此下面分别介绍每一步：</P>
            <OL>
              <LI>创建一个新变量 <CODE>request</CODE> 并赋值 false。使用 false 
              作为判断条件，它表示还没有创建 <CODE>XMLHttpRequest</CODE> 对象。 
              <LI>增加 try/catch 块： 
              <OL>
                <LI>尝试创建 <CODE>XMLHttpRequest</CODE> 对象。 
                <LI>如果失败（<CODE>catch (trymicrosoft)</CODE>）： 
                <OL>
                  <LI>尝试使用较新版本的 Microsoft 浏览器创建 Microsoft 
                  兼容的对象（<CODE>Msxml2.XMLHTTP</CODE>）。 
                  <LI>如果失败（<CODE>catch (othermicrosoft)</CODE>）尝试使用较老版本的 
                  Microsoft 浏览器创建 Microsoft 
                  兼容的对象（<CODE>Microsoft.XMLHTTP</CODE>）。 </LI></OL>
                <LI>如果失败（<CODE>catch (failed)</CODE>）则保证 <CODE>request</CODE> 
                的值仍然为 false。 </LI></OL>
              <LI>检查 <CODE>request</CODE> 是否仍然为 false（如果一切顺利就不会是 false）。 
              <LI>如果出现问题（<CODE>request</CODE> 是 false）则使用 JavaScript 
              警告通知用户出现了问题。 </LI></OL>
            <P>这样修改代码之后再使用 Internet Explorer 试验，就应该看到已经创建的表单（没有错误消息）。我实验的结果如 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/#fig2">图 
            2</A> 所示。</P><BR><BR><A name=fig2><B>图 2. Internet Explorer 
            正常工作</B></A><BR><IMG height=448 alt="Internet Explorer 正常工作" 
            src="掌握 Ajax，第 2 部分 使用 JavaScript 和 Ajax 发出异步请求.files/ie_fixed.jpg" 
            width=550> <BR>
            <P><A name=N10244><SPAN class=smalltitle>静态与动态</SPAN></A></P>
            <P>再看一看清单 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/#code1">1</A>、<A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/#code3">3</A> 
            和 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/#code4">4</A>，注意，所有这些代码都直接嵌套在 
            <CODE>script</CODE> 标记中。像这种不放到方法或函数体中的 JavaScript 代码称为<I>静态 
            JavaScript</I>。就是说代码是在页面显示给用户之前的某个时候运行。（虽然根据规范不能完全<I>精确地</I> 
            知道这些代码何时运行对浏览器有什么影响，但是可以保证这些代码在用户能够与页面交互之前运行。）这也是多数 Ajax 程序员创建 
            <CODE>XMLHttpRequest</CODE> 对象的一般方式。</P>
            <P>就是说，也可以像 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/#code5">清单 
            5</A> 那样将这些代码放在一个方法中。</P><BR><BR><A name=code5><B>清单 5. 将 
            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 request;
<SPAN class=boldcode>function createRequest() {</SPAN>
  try {
    request = new XMLHttpRequest();
  } catch (trymicrosoft) {
    try {
      request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (othermicrosoft) {
      try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (failed) {
        request = false;
      }
    }
  }
  if (!request)
    alert("Error initializing XMLHttpRequest!");
<SPAN class=boldcode>}</SPAN>
&lt;/script&gt;
</PRE></TD></TR></TBODY></TABLE><BR>
            <P>如果按照这种方式编写代码，那么在处理 Ajax 之前需要调用该方法。因此还需要 <A 
            href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/#code6">清单 
            6</A> 这样的代码。</P><BR><BR><A name=code6><B>清单 6. 使用 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 request;
function createRequest() {
  try {
    request = new XMLHttpRequest();
  } catch (trymicrosoft) {
    try {
      request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (othermicrosoft) {
      try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (failed) {
        request = false;
      }
    }
  }
  if (!request)
    alert("Error initializing XMLHttpRequest!");
}
<SPAN class=boldcode>function getCustomerInfo() {
  createRequest();
  // Do something with the request variable
}</SPAN>
&lt;/script&gt;
</PRE></TD></TR></TBODY></TABLE><BR>
            <P>此代码惟一的问题是推迟了错误通知，这也是多数 Ajax 程序员不采用这一方法的原因。假设一个复杂的表单有 10 或 15 
            个字段、选择框等，当用户在第 14 个字段（按照表单顺序从上到下）输入文本时要激活某些 Ajax 代码。这时候运行 
            <CODE>getCustomerInfo()</CODE> 尝试创建一个 <CODE>XMLHttpRequest</CODE> 
            对象，但（对于本例来说）失败了。然后向用户显示一条警告，明确地告诉他们不能使用该应用程序。但用户已经花费了很多时间在表单中输入数据！这是非常令人讨厌的，而讨厌显然不会吸引用户再次访问您的网站。</P>
            <P>如果使用静态 JavaScript，用户在点击页面的时候很快就会看到错误信息。这样也很烦人，是不是？可能令用户错误地认为您的 
            Web 应用程序不能在他的浏览器上运行。不过，当然要比他们花费了 10 
            分钟输入信息之后再显示同样的错误要好。因此，我建议编写静态的代码，让用户尽可能早地发现问题。</P><BR>
            <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
              <TBODY>
              <TR>
                <TD><IMG height=1 alt="" 
                  src="掌握 Ajax，第 2 部分 使用 JavaScript 和 Ajax 发出异步请求.files/blue_rule.gif"