SUN的《AJAX与J2EE》全文译了

开玩笑、原文出处：http://java.sun.com/developer/technicalArticles/J2EE/AJAX/   
  中英文对照如下、全是我自己译的、水平有限（6级考78分）、欢迎指正：   

  Asynchronous   JavaScript   Technology   and   XML   (AJAX)   
  With   Java   2   Platform,   Enterprise   Edition   
  ——《异步JavaScript+XML技术与J2EE》   
  By   Greg   Murray,   June   9,   2005   

  Anyone   who   has   used   Flickr,   GMail,   Google   Suggest,   or   Google   Maps   will   realize   that   a   new   breed   of   dynamic   web   applications   is   emerging.   These   applications   look   and   act   very   similar   to   traditional   desktop   applications   without   relying   on   plug-ins   or   browser-specific   features.   Web   applications   have   traditionally   been   a   set   of   HTML   pages   that   must   be   reloaded   to   change   any   portion   of   the   content.   Technologies   such   as   JavaScript   programming   language   and   cascading   style   sheets   (CSS)   have   matured   to   the   point   where   they   can   be   used   effectively   to   create   very   dynamic   web   applications   that   will   work   on   all   of   the   major   browsers.   This   article   will   detail   several   techniques   that   you   can   use   today   to   enable   your   web   applications   to   be   more   rich   and   interactive   like   desktop   applications.   ——使用过Flickr、GMail,、Google、Suggest或Google地图的人都知道一种全新的动态WEB应用正在成型、这些应用看上去和传统桌面应用非常相似、他们不依赖于插件或者浏览器特效。传统意义上的WEB应用就是一组网页、当页面上有任何一点内容有所变化的时候必须更新整个网页。一些技术比如JavaScript和CSS已经非常成熟、你可以使用他们高效的创建动态网页、并可以跑在大多数主流浏览器上。本文将细述数种可以使你的WEB应用更丰富更具交互性（就象桌面应用一样）的技术。   

  Introducing   Asynchronous   JavaScript   Technology   and   XML   (AJAX)   
  ——AJAX介绍   

  Using   JavaScript   technology,   an   HTML   page   can   asynchronously   make   calls   to   the   server   from   which   it   was   loaded   and   fetch   XML   documents.   The   XML   documents   may   then   be   used   by   the   JavaScript   technology   to   update   or   modify   the   Document   Object   Model   (DOM)   of   the   HTML   page.   The   term   Asynchronous   JavaScript   Technology   and   XML   (AJAX)   has   emerged   recently   to   describe   this   interaction   model.   ——使用JavaScript技术、HTML网页可以异步调用生成它的服务器上的服务并可以获取返回的XML文档形式的结果。JavaScript再使用这个XML文档更新或改动本网页的文档对象模型（DOM）、名词AJAX就是近年来出现的用与描述这种交互模式的新名词。   

  AJAX   is   not   new.   These   techniques   have   been   available   to   developers   targeting   Internet   Explorer   on   the   Windows   platform   for   many   years.   Until   recently,   the   technology   was   known   as   web   remoting   or   remote   scripting.   Web   developers   have   also   used   a   combination   of   plug-ins,   Java   applets,   and   hidden   frames   to   emulate   this   interaction   model   for   some   time.   What   has   changed   recently   is   that   the   inclusion   of   support   for   the   XMLHttpRequest   object   has   became   ubiquitous   in   the   mainstream   browsers   across   all   platforms.   The   real   magic   is   the   result   of   the   JavaScript   technology’s   XMLHttpRequest   object.   Although   this   object   is   not   specified   in   the   formal   JavaScript   technology   specification,   all   of   today’s   mainstream   browsers   support   it.   The   subtle   differences   with   the   JavaScript   technology   and   CSS   support   among   current   generation   browsers   such   as   Firefox,   Internet   Explorer,   and   Safari   are   manageable.   If   you   are   required   to   support   older   browsers,   AJAX   may   not   be   the   answer   for   you.   ——AJAX并不是新事物、数年前使用微软IE浏览器的开发者们就在使用它、直到最近、这项技术被冠以远程脚本而更出名了。以前WEB开发者使用插件、applets或者隐藏框架来仿效这种交互模式。但是现在由于XMLHttpRequest对象技术已经在各大平台的主流浏览器上普及、所以这种模仿的情况越来越少了。真正神奇的事情在于JavaScript和XMLHttpRequest对象技术的结合、尽管XMLHttpRequest对象技术并不属于JavaScript标准规范、但是现代的主流浏览器都支持、在Firefox、IE、   Safari这些浏览器对JavaScript和CSS的执行有微小不同、但这些不同之处很容易理解和处理。如果你一定要兼容老一代浏览器那还是不要用AJAX了。   
  //////////////////////////////////////////////////////////////////////////////////////////


1楼

BS   娄猪



2楼

What   makes   AJAX-based   clients   unique   is   that   the   client   contains   page-specific   control   logic   embedded   as   JavaScript   technology.   The   page   interacts   with   the   JavaScript   technology   based   on   events   such   as   the   document   being   loaded,   a   mouse   click,   focus   changes,   or   even   a   timer.   AJAX   interactions   allow   for   a   clear   separation   of   presentation   logic   from   the   data.   An   HTML   page   can   pull   in   bite-size   pieces   of   data   as   needed   rather   than   reloading   the   whole   page   every   time   a   change   needs   to   be   displayed.   AJAX   will   require   a   different   server-side   architecture   to   support   this   interaction   model.   Traditionally,   server-side   web   applications   have   focused   on   generating   HTML   documents   for   every   client   event   resulting   in   a   call   to   the   server.   The   clients   would   then   refresh   and   re-render   the   complete   HTML   page   for   each   response.   Rich   web   applications   focus   on   a   client   fetching   an   HTML   document   that   acts   as   a   template   or   container   into   which   to   inject   content,   based   on   client   events   using   XML   data   retrieved   from   a   server-side   component.——是什么使得基于AJAX的客户端如此独特？那就是客户端所嵌入的页面特定的控制逻辑、这些控制逻辑以JavaScript代码的形式存在。页面与JavaScript的交互建立在事件的基础上（比如文档加载事件、鼠标点击事件、焦点变化事件、甚至一个时钟事件）。AJAX清楚的将表示逻辑和数据分离开来、一个HTML网页能够在需要的时候获取以比特为单位的数据片段！这不同于以前的有一点变化就必须刷新整个页面的做法。同时AJAX也需要一种完全不同的服务端架构来支持这种交互模式。以前的传统服务端WEB应用专注于为每一个客户端的每一次请求生成HTML页面、每一次客户端接到响应都要刷新和重新渲染整个页面。而我们所谈的WEB应用专注于客户端把HTML文档当作模版或容器、客户端向这个容器中插入内容、作到这些的原理就是每当客户端发生事件、客户端都可以向服务端发出请求并使用服务端返回的XML数据。   

  Some   uses   for   AJAX   interactions   are   the   following:     
  Real-Time   Form   Data   Validation:   Form   data   such   as   user   IDs,   serial   numbers,   postal   codes,   or   even   special   coupon   codes   that   require   server-side   validation   can   be   validated   in   a   form   before   the   user   submits   a   form.     
  Autocompletion:   A   specific   portion   of   form   data   such   as   an   email   address,   name,   or   city   name   may   be   autocompleted   as   the   user   types.     
  Master   Details   Operations:   Based   on   a   client   event,   an   HTML   page   can   fetch   more   detailed   information   on   data   such   as   a   product   listing   that   enables   the   client   to   view   the   individual   product   information   without   refreshing   the   page.     
  Sophisticated   User   Interface   Controls:   Controls   such   as   tree   controls,   menus,   and   progress   bars   may   be   provided   that   do   not   require   page   refreshes.     
  Refreshing   Data   on   the   Page:   HTML   pages   may   poll   data   from   a   server   for   up-to-date   data   such   as   scores,   stock   quotes,   weather,   or   application-specific   data.   
  ——一些AJAX的使用例子如下：   
          实时的表单数据验证：象ID号、序列号、邮政编码、优惠卷号码这样的表单数据可以在用户提交整个表单之前就得到验证！   
          自动补全：一些特定表单数据比如email、姓名、城市名可以根据用户的类型自动填写。   
          细节操作：基于客户端事件、客户可以不刷新页面就可以查看某一种产品的细节信息。   
          智能客户端接口控制：诸如树、菜单、工具条都可以在不刷新页面的情况下随时提供服务。   
          刷新实时数据：页面可以从服务端筛选动态数据并显示、诸如：比分、股票报价、天气预报等。   

  This   list   is   not   all-inclusive,   but   it   shows   that   AJAX   interactions   allow   web   applications   to   do   much   more   than   they   have   done   in   the   past.   Although   many   of   these   benefits   are   noteworthy,   this   approach   has   some   drawbacks   as   well:     
  Complexity:   Server-side   developers   will   need   to   understand   that   presentation   logic   will   be   required   in   the   HTML   client   pages   as   well   as   in   the   server-side   logic   to   generate   the   XML   content   needed   by   the   client   HTML   pages.   HTML   page   developers   must   have   JavaScript   technology   skills.   Creating   AJAX-enabled   applications   will   become   easier   as   new   frameworks   are   created   and   existing   frameworks   evolve   to   support   the   interaction   model.     
  Standardization   of   the   XMLHttpRequest   Object:   The   XMLHttpRequest   object   is   not   yet   part   of   the   JavaScript   technology   specification,   which   means   that   the   behavior   may   vary   depending   on   the   client.     
  JavaScript   Technology   Implementations:   AJAX   interactions   depend   heavily   on   JavaScript   technology,   which   has   subtle   differences   depending   on   the   client.   See   QuirksMode.org   for   more   details   on   browser-specific   differences.     
  Debugging:   AJAX   applications   are   also   difficult   to   debug   because   the   processing   logic   is   embedded   both   in   the   client   and   on   the   server.     
  Viewable   Source:   The   client-side   JavaScript   technology   may   be   viewed   simply   by   selecting   View   Source   from   an   AJAX-enabled   HTML   page.   A   poorly   designed   AJAX-based   application   could   open   itself   up   to   hackers   or   plagiarism.     
  Frameworks   and   patterns   for   AJAX   technology   are   likely   to   emerge   as   developers   gain   more   experience   writing   applications   that   use   the   AJAX   interaction   model.   It   is   still   early   to   focus   on   a   one-size-fits-all   framework   for   AJAX   interactions.   This   article   and   the   associated   solutions   focus   on   how   AJAX   interactions   can   be   supported   today   by   existing   Java   2   Platform,   Enterprise   Edition   (J2EE)   technologies   such   as   servlets,   JavaServer   Pages   (JSP)   software,   JavaServer   Faces   applications,   and   the   Java   Standard   Tag   Libraries   (JSTL).     
  ——这些用处并不全、但是它们说明了AJAX交互使得WEB应用可以作到大量以前无法作到的事情。这些事情可能并不多么引人注目、而且还有一些缺陷：   
          复杂性：服务端开发者必须掌握XML、页面开发者必须掌握JavaScript技术。   
          XMLHttpRequest对象的标准化：XMLHttpRequest对象仍不是JavaScript标准规范。   
          JavaScript技术实现：AJAX严重依赖与JavaScript技术。可参考QuirksMode.org。   
          Debugging：AJAX难于调试。   
          查看原文件：使用这种方法可以容易的看到JavaScript源码、给黑客、剽窃者以可乘之机。   
          AJAX技术框架和模式还在探索和经验形成阶段、固化形成一个真正的框架还为时过早。本文只是探讨如何使用J2EE技术来支持AJAX交互。   

  The   Anatomy   of   an   AJAX   Interaction   
  Now   that   we   have   discussed   what   AJAX   is   and   what   some   higher-level   issues   are,   let’s   put   all   the   pieces   together   and   show   an   AJAX-   enabled   J2EE   application.     
  Let’s   consider   an   example.   A   web   application   contains   a   static   HTML   page,   or   an   HTML   page   generated   in   JSP   technology   contains   an   HTML   form   that   requires   server-side   logic   to   validate   form   data   without   refreshing   the   page.   A   server-side   web   component   (servlet)   named   ValidateServlet   will   provide   the   validation   logic.   Figure   1   describes   the   details   of   the   AJAX   interaction   that   will   provide   the   validation   logic   
  ——AJAX交互剖析：来看一个AJAX使能的J2EE应用：名为ValidateServlet的Servlet验证表单数据、但是要求不能对整个页面刷新。步骤如下：   

  1、A   client   event   occurs.   ——客户端事件发生。   
  2、An   XMLHttpRequest   object   is   created   and   configured.   ——一个XMLHttpRequest对象被创建并配置。   
  3、The   XMLHttpRequest   object   makes   a   call.   ——XMLHttpRequest对象发出请求。   
  4、The   request   is   processed   by   the   ValidateServlet.   ——请求被ValidateServlet处理。   
  5、The   ValidateServlet   returns   an   XML   document   containing   the   result.   ——ValidateServlet返回一个包含结果的XML文档。   
  6、The   XMLHttpRequest   object   calls   the   callback()   function   and   processes   the   result.   ——XMLHttpRequest对象调用callback()函数并处理结果。   
  7、The   HTML   DOM   is   updated.——HTML文档对象被更新。



3楼

各个步骤细节如下：   
  1.   A   client   event   occurs.——客户端事件发生：   
  点击链接或表单元素的键盘事件引发JavaScript函数validate()：   
  <input   type="text"   
                          size="20"       
                              id="userid"   
                          name="id"   
                    onkeyup="validate();">   

  2.   A   XMLHttpRequest   object   is   created   and   configured.——一个XMLHttpRequest对象被创建并配置：   
  var   req;   
  function   validate()   {   
          var   idField   =   document.getElementById("idField");   
          var   url   =   "validate?id="   +   escape(idField.value);   
          if   (window.XMLHttpRequest)   {   
                  req   =   new   XMLHttpRequest();   
          }   else   if   (window.ActiveXObject)   {   
                  req   =   new   ActiveXObject("Microsoft.XMLHTTP");——创建XMLHttpRequest对象   
          }   
          req.open("GET",   url,   true);——调用XMLHttpRequest对象的open方法、url为所请求的服务端组件路径、true表示这个调用是异步的、   

  如果设置为异步就必须还要有一个callback函数如下：   
          req.onreadystatechange   =   callback;   
          req.send(null);   
  }   

  3.   The   XMLHttpRequest   object   makes   a   call.——XMLHttpRequest对象发出请求：   
  执行到req.send(null)的时候发出请求。   

  如果是GET请求那么内容可以为空、在url附加参数。   
  如果是POST请求那么就需要一个Content-Type头的设置如下：   
  req.setRequestHeader("Content-Type",   "application/x-www-form-urlencoded");   
  req.send("id="   +   escape(idTextField.value));   

  如果用JavaScript产生表单元素值、必须确保值编码的正确、JavaScript有一个escape()函数用于保障正确的编码、并把特定字符正确的忽略掉。   

  4.   The   request   is   processed   by   the   ValidateServlet.——请求被ValidateServlet所处理:   
  servlet处理XMLHttpRequest就和处理其他HTTP请求一样：   

  public   class   ValidateServlet   extends   HttpServlet   {         
          private   ServletContext   context;   
          private   HashMap   users   =   new   HashMap();   
          public   void   init(ServletConfig   config)   throws   ServletException   {   
                  this.context   =   config.getServletContext();   
                  users.put("greg","account   data");   
                  users.put("duke","account   data");   
          }   
          public   void   doGet(HttpServletRequest   request,   HttpServletResponse     response)   
                  throws   IOException,   ServletException   {   

                  String   targetId   =   request.getParameter("id");   

                  if   ((targetId   !=   null)   &&   !users.containsKey(targetId.trim()))   {   
                          response.setContentType("text/xml");   
                          response.setHeader("Cache-Control",   "no-cache");   
                          response.getWriter().write("valid");     
                  }   else   {   
                          response.setContentType("text/xml");   
                          response.setHeader("Cache-Control",   "no-cache");   
                          response.getWriter().write("invalid");     
                  }   
          }   
  }   

  5.   The   ValidateServlet   returns   an   XML   document   containing   the   results.——ValidateServlet返回一个包含结果的XML文档。   
  ValidateServlet生成一个XML文档作为响应、更复杂的情况可能用到DOM、XSLT等。   

          response.setContentType("text/xml");   
          response.setHeader("Cache-Control",   "no-cache");   
          response.getWriter().write("invalid");     

  开发者必须了解两件事：第一：Content-Type必须设置为text/xml；第二：Cache-Control必须设置为no-cache。



4楼

up



5楼

6.   The   XMLHttpRequest   object   calls   the   callback()   function   and   processes   the   result.     
  ——XMLHttpRequest对象调用callback()函数并处理结果。   

  The   XMLHttpRequest   object   was   configured   to   call   the   callback()   function   when   there   are   changes   to   the   readyState   of   the   XMLHttpRequest   object.   Let   us   assume   the   call   to   the   ValidateServlet   was   made   and   the   readyState   is   4,   signifying   the   XMLHttpRequest   call   is   complete.   The   HTTP   status   code   of   200   signifies   a   successful   HTTP   interaction.     
  ——XMLHttpRequest对象的准备状态有所变化的时候则调用callback()方法、我们假定已经请求完毕ValidateServlet、准备状态为4、表示XMLHttpRequest调用已经完成、HTTP状态码为200、表示HTTP交互已经成功。   

  function   callback()   {   
          if   (req.readyState   ==   4)   {   
                  if   (req.status   ==   200)   {   
                          //   update   the   HTML   DOM   based   on   whether   or   not   message   is   valid   
                  }   
          }   
  }   

  Browsers   maintain   an   object   representation   of   the   documents   being   displayed   (referred   to   as   the   Document   Object   Model   or   DOM).   JavaScript   technology   in   an   HTML   page   has   access   to   the   DOM,   and   APIs   are   available   that   allow   JavaScript   technology   to   modify   the   DOM   after   the   page   has   loaded.     
  ——浏览器维护着一个文档的对象表示模型、既：DOM。网页中的JavaScript方法可以访问这个模型、并且可以在页面已经全部加载完成后再次改变这个模型。   

  Following   a   successful   request,   JavaScript   technology   code   may   modify   the   DOM   of   the   HTML   page.   The   object   representation   of   the   XML   document   that   was   retrieved   from   the   ValidateServlet   is   available   to   JavaScript   technology   code   using   the   req.responseXML,   where   req   is   an   XMLHttpRequest   object.   The   DOM   APIs   provide   a   means   for   JavaScript   technology   to   navigate   the   content   from   that   document   and   use   that   content   to   modify   the   DOM   of   the   HTML   page.   The   string   representation   of   the   XML   document   that   was   returned   may   be   accessed   by   calling   req.responseText.   Now   let’s   look   at   how   to   use   the   DOM   APIs   in   JavaScript   technology   by   looking   at   the   following   XML   document   returned   from   the   ValidateServlet.     
  ——使用JavaScript代码：req.responseXML可以得到服务端返回的XML文档、req为XMLHttpRequest对象、DOM为JavaScript提供了一种搜索文档内容以及根据搜索结果改变网页DOM的手段。可以使用req.responseText来访问返回的XML文档的字符串表示、如下所示：   

    <message>   
      valid   
    </message>   

  This   example   is   a   simple   XML   fragment   that   contains   the   sender   of   the   message   element,   which   is   simply   the   string   valid   or   invalid.   A   more   advanced   sample   may   contain   more   than   one   message   and   valid   names   that   might   be   presented   to   the   user:     
  ——上面的例子是一个简单的XML片段、实际应用可能包含更多：   

  function   parseMessage()   {   
          var   message   =   req.responseXML.getElementsByTagName("message")[0];   
          setMessage(message.childNodes[0].nodeValue);   
  }   

  The   parseMessages()   function   will   process   an   XML   document   retrieved   from   the   ValidateServlet.   This   function   will   call   the   setMessage()   with   the   value   of   the   message   element   to   update   the   HTML   DOM.     
  ——parseMessages()方法处理从服务端返回的XML文档、该方法使用message元素的值去调用setMessage()方法来改变HTML   DOM。



6楼

厉害。佩服。。。谢谢楼主



7楼

不错不错！翻译得很好！楼主得英语很好啊！6级啊…………嘻嘻……



8楼

7.   The   HTML   DOM   is   updated.——HTML文档对象被更新。   

  JavaScript   technology   can   gain   a   reference   to   any   element   in   the   HTML   DOM   using   a   number   of   APIs.   The   recommended   way   to   gain   a   reference   to   an   element   is   to   call   document.getElementById("userIdMessage"),   where   "userIdMessage"   is   the   ID   attribute   of   an   element   appearing   in   the   HTML   document.   With   a   reference   to   the   element,   JavaScript   technology   may   now   be   used   to   modify   the   element’s   attributes;   modify   the   element’s   style   properties;   or   add,   remove,   or   modify   child   elements.     
  One   common   means   to   change   the   body   content   of   an   element   is   to   set   the   innerHTML   property   on   the   element   as   in   the   following   example.     
  ——JavaScript可以获得HTML   DOM中任何元素（对象）的引用、推荐使用document.getElementById("userIdMessage")方法来获取。userIdMessage就是网页上任意元素的ID属性、有了元素（对象）的引用、JavaScript就可以改变这个元素的属性以及这个元素的样式属性、还可以增加删除或改变这个元素的子元素。通用的方法是设置innerHTML属性、如下所示：   

  <script   type="text/javascript">   
    function   setMessage(message)   {   
            var   userMessageElement   =   document.getElementById("userIdMessage");   
            userMessageElement.innerHTML   =   "<font   color=\"red\">"   +   message   +   "   </font>";   
    }   
  </script>   
  <body>   
  <div   id="userIdMessage"></div>   
  </body>   

  The   portions   of   the   HTML   page   that   were   affected   are   re-rendered   immediately   following   the   setting   of   the   innerHTML.   If   the   innerHTML   property   contains   elements   such   as   <image>   or   <iframe>,   the   content   specified   by   those   elements   is   fetched   and   rendered   as   well.   
  ——innerHTML属性被改变以后网页可以立即体现出变化、如果innerHTML属性内部包含象<image>、<iframe>这样的元素、那么其所指定的资源内容一样被浏览器解析显示。   

  The   main   drawback   with   this   approach   is   that   HTML   elements   are   hardcoded   as   strings   in   the   JavaScript   technology   code.   Hardcoding   HTML   markup   inside   JavaScript   technology   code   is   not   a   good   practice   because   it   makes   the   code   difficult   to   read,   maintain,   and   modify.   Consider   using   the   JavaScript   technology   DOM   APIs   to   create   or   modify   HTML   elements   within   JavaScript   technology   code.   Intermixing   presentation   with   JavaScript   technology   code   as   strings   will   make   a   page   difficult   to   read   and   edit.   
  Another   means   of   modifying   the   HTML   DOM   is   to   dynamically   create   new   elements   and   append   them   as   children   to   a   target   element   as   in   the   following   example.     
  ——这种方法最大的缺点是在JavaScript代码里面难于以字符串形式书写HTML、内嵌于JavaScript中的HTML也难以看懂、维护和更改。另外的改变HTML   DOM的方法是动态创建新元素然后将其作为子元素插入目标元素下、如下所示：   

  <script   type="text/javascript">   
    function   setMessage(message)   {   
            var   userMessageElement   =   document.getElementById("userIdMessage");   
            var   userIdMessageFont   =   document.getElementById("userIdMessageFont");   
            var   messageElement   =   document.createTextNode(message);   
            if   (userMessageElement.childNodes[0])   {   
                    //   update   the   elements   
                    userIdMessageFont.replaceChild(messageElement,   userIdMessageFont.childNodes[0]);   
            }   else   {   
                    //   create   the   new   elements   
                    var   fontElement   =   document.createTextNode("font");   
                    fontElement.setAtribute("id",   "userIdMessageFont");   
                    fontElement.setAtribute("color",   "red");   
                    userMessageElement.appendChild(fontElement);   
                    fontElement.appendChild(messageElement);   
            }   
    }   
  </script>   
  <body>   
    <div   id="userIdMessage"></div>   
  </body>   

  ——全文完、累死了。



9楼

精简版：   

  客户端所嵌入的页面特定的控制逻辑以JavaScript代码的形式存在。页面与JavaScript的交互建立在事件的基础上（比如文档加载事件、鼠标点击事件、焦点变化事件、甚至一个时钟事件）。AJAX清楚的将表示逻辑和数据分离开来、一个HTML网页能够在需要的时候获取以比特为单位的数据片段！这不同于以前的有一点变化就必须刷新整个页面的做法。同时AJAX也需要一种完全不同的服务端架构来支持这种交互模式。以前的传统服务端WEB应用专注于为每一个客户端的每一次请求生成HTML页面、每一次客户端接到响应都要刷新和重新渲染整个页面。而我们所谈的WEB应用专注于客户端把HTML文档当作模版或容器、客户端向其中插入内容、其原理就是每当客户端发生事件、客户端都可以向服务端发出请求并使用服务端返回的XML数据。   

  名为ValidateServlet的Servlet验证表单数据、但是要求不能对整个页面刷新。步骤如下：   

  1.   A   client   event   occurs.——客户端事件发生：   
  点击链接或表单元素的键盘事件引发JavaScript函数validate()：   
  <input   type="text"   
                          size="20"       
                              id="userid"   
                          name="id"   
                    onkeyup="validate();">   

  2.   A   XMLHttpRequest   object   is   created   and   configured.——一个XMLHttpRequest对象被创建并配置：   
  var   req;   
  function   validate()   {   
          var   idField   =   document.getElementById("idField");   
          var   url   =   "validate?id="   +   escape(idField.value);   
          if   (window.XMLHttpRequest)   {   
                  req   =   new   XMLHttpRequest();   
          }   else   if   (window.ActiveXObject)   {   
                  req   =   new   ActiveXObject("Microsoft.XMLHTTP");——创建XMLHttpRequest对象   
          }   
          req.open("GET",   url,   true);——调用XMLHttpRequest对象的open方法、url为所请求的服务端组件路径、true表示这个调用是异步的、   

  如果设置为异步就必须还要有一个callback函数如下：   
          req.onreadystatechange   =   callback;   
          req.send(null);   
  }   

  3.   The   XMLHttpRequest   object   makes   a   call.——XMLHttpRequest对象发出请求：   

  如果是GET请求那么内容可以为空、在url附加参数。   
  如果是POST请求那么就需要一个Content-Type头的设置如下：   
  req.setRequestHeader("Content-Type",   "application/x-www-form-urlencoded");   
  req.send("id="   +   escape(idTextField.value));   

  如果用JavaScript产生表单元素值、必须确保值编码的正确、JavaScript有一个escape()函数用于保障正确的编码、并把特定字符正确的忽略掉。   

  4.   The   request   is   processed   by   the   ValidateServlet.——请求被ValidateServlet所处理:   
  servlet处理XMLHttpRequest就和处理其他HTTP请求一样：   

  public   class   ValidateServlet   extends   HttpServlet   {         
          private   ServletContext   context;   
          private   HashMap   users   =   new   HashMap();   
          public   void   init(ServletConfig   config)   throws   ServletException   {   
                  this.context   =   config.getServletContext();   
                  users.put("greg","account   data");   
                  users.put("duke","account   data");   
          }   
          public   void   doGet(HttpServletRequest   request,   HttpServletResponse     response)   
                  throws   IOException,   ServletException   {   

                  String   targetId   =   request.getParameter("id");   

                  if   ((targetId   !=   null)   &&   !users.containsKey(targetId.trim()))   {   
                          response.setContentType("text/xml");   
                          response.setHeader("Cache-Control",   "no-cache");   
                          response.getWriter().write("valid");     
                  }   else   {   
                          response.setContentType("text/xml");   
                          response.setHeader("Cache-Control",   "no-cache");   
                          response.getWriter().write("invalid");     
                  }   
          }   
  }   

  5.   The   ValidateServlet   returns   an   XML   document   containing   the   results.——ValidateServlet返回一个包含结果的XML文档。   
  ValidateServlet生成一个XML文档作为响应、更复杂的情况可能用到DOM、XSLT等。   

          response.setContentType("text/xml");   
          response.setHeader("Cache-Control",   "no-cache");   
          response.getWriter().write("invalid");     
  开发者必须了解两件事：第一：Content-Type必须设置为text/xml；第二：Cache-Control必须设置为no-cache。   

  6.   The   XMLHttpRequest   object   calls   the   callback()   function   and   processes   the   result.     
  ——XMLHttpRequest对象调用callback()函数并处理结果。   
  XMLHttpRequest对象的准备状态有所变化的时候则调用callback()方法、我们假定已经请求完毕ValidateServlet、准备状态为4、表示XMLHttpRequest调用已经完成、HTTP状态码为200、表示HTTP交互已经成功。   

  function   callback()   {   
          if   (req.readyState   ==   4)   {   
                  if   (req.status   ==   200)   {   
                          //   update   the   HTML   DOM   based   on   whether   or   not   message   is   valid   
                  }   
          }   
  }   
  浏览器维护着一个文档的对象表示模型、既：DOM。网页中的JavaScript方法可以访问这个模型、并且可以在页面已经全部加载完成后再次改变这个模型。   

  使用JavaScript代码：req.responseXML可以得到服务端返回的XML文档、req为XMLHttpRequest对象、DOM为JavaScript提供了一种搜索文档内容以及根据搜索结果改变网页DOM的手段。可以使用req.responseText来访问返回的XML文档的字符串表示、如下所示：   

    <message>   
      valid   
    </message>   

  上面的例子是一个简单的XML片段、实际应用可能包含更多：   

  function   parseMessage()   {   
          var   message   =   req.responseXML.getElementsByTagName("message")[0];   
          setMessage(message.childNodes[0].nodeValue);   
  }   

  parseMessages()方法处理从服务端返回的XML文档、该方法使用message元素的值去调用setMessage()方法来改变HTML   DOM。   

  7.   The   HTML   DOM   is   updated.——HTML文档对象被更新。   

  JavaScript可以获得HTML   DOM中任何元素（对象）的引用、推荐使用document.getElementById("userIdMessage")方法来获取。userIdMessage就是网页上任意元素的ID属性、有了元素（对象）的引用、JavaScript就可以改变这个元素的属性以及这个元素的样式属性、还可以增加删除或改变这个元素的子元素。通用的方法是设置innerHTML属性、如下所示：   

  <script   type="text/javascript">   
    function   setMessage(message)   {   
            var   userMessageElement   =   document.getElementById("userIdMessage");   
            userMessageElement.innerHTML   =   "<font   color=\"red\">"   +   message   +   "   </font>";   
    }   
  </script>   
  <body>   
  <div   id="userIdMessage"></div>   
  </body>   

  innerHTML属性被改变以后网页可以立即体现出变化、如果innerHTML属性内部包含象<image>、<iframe>这样的元素、那么其所指定的资源内容一样被浏览器解析显示。   

  这种方法最大的缺点是在JavaScript代码里面难于以字符串形式书写HTML、内嵌于JavaScript中的HTML也难以看懂、维护和更改。另外的改变HTML   DOM的方法是动态创建新元素然后将其作为子元素插入目标元素下、如下所示：   

  <script   type="text/javascript">   
    function   setMessage(message)   {   
            var   userMessageElement   =   document.getElementById("userIdMessage");   
            var   userIdMessageFont   =   document.getElementById("userIdMessageFont");   
            var   messageElement   =   document.createTextNode(message);   
            if   (userMessageElement.childNodes[0])   {   
                    //   update   the   elements   
                    userIdMessageFont.replaceChild(messageElement,   userIdMessageFont.childNodes[0]);   
            }   else   {   
                    //   create   the   new   elements   
                    var   fontElement   =   document.createTextNode("font");   
                    fontElement.setAtribute("id",   "userIdMessageFont");   
                    fontElement.setAtribute("color",   "red");   
                    userMessageElement.appendChild(fontElement);   
                    fontElement.appendChild(messageElement);   
            }   
    }   
  </script>   
  <body>   
    <div   id="userIdMessage"></div>   
  </body>

最新评论